• ag视讯开户 2019-02-11
  • 想进阶成高手?得学会如何在设计中打造最合适的组件! - 优设网 - UISDC

    想进阶成高手?得学会如何在设计中打造最合适的组件!

    2017/03/10 评论区

    编者按:什么是??榛杓??它有哪些优势?该如何运用??榛杓??本文腾讯CDC 的高手带你一窥??榛杓频陌旅?。

    入门手册:《设计小科普!给设计师的??榛杓菩率滞耆朊胖改稀?/a>

    在看组件和元素之前,我们先了解在他们之上的一个概念

    ???/h4>

    ??榇蠹矣Ω枚疾荒吧?,任何一个完整的界面,都会有多个功能???,而每个??槟谟邢嘤Φ淖榧?,每个组件中又有相应的元素,其中任何一点的变化,都会使用户对产品的认知发生改变。

    ??椴⒉皇且桓鲂碌母拍?,早在20世纪初期的建筑行业中,将建筑按照功能分成可以自由组合的建筑单元的概念就已经存在,同样也出现在早期的产品设计中,并且许多产品的设计都能将其很好运用,包括汽车,电脑,电器,鞋子等等。(如下图)

    这些产品之所以使用??槭且蛭?榫哂姓庑┯诺悖?/p>

    1.标准化:??槭蔷哂斜曜汲叽绾捅曜冀涌诘脑ぶ乒δ艿ピ?,这是组装、互换等特征的基??;

    2.可组装:多个??榭梢苑奖?、灵活地组合、配置,以构造不同大小、不同形状、不同功能的系统;

    3.可替换:通过用一个??槿ジ涣硪桓瞿??,可以改变系统的局部功能而不影响系 统的其他部分;

    4.可维护:可以对??榻芯植啃薷幕蛏柚?,以满足用户需求,另外可以增加新???,扩展系统功能。

    那我们从身边熟悉的产品(插线板)出发,看看它里面有什么?

    常用插线板的??榉治讲糠郑鹤芸啬?楹椭饕δ苣??,为保证总开关的重要性,总开关??橄虏⒚挥辛淖榧?,只有控制总操作的元素(按钮),总指示灯以及品牌logo之类的品牌信息。

    我们来看看总开关??橄碌脑兀?/p>

    我们来看看主要功能??榈淖榧驮兀?/p>

    在功能??椴槐涞那榭鱿?,人们即将开始了一轮新的尝试和探索

    产品的发展与创新 —— 元素的变化和新组件的形成

    注意:必须要先弄清楚你的目标用户是谁,什么样的元素,新组件,外形,材料能吸引你的目标用户并能最好的表现其功能,这些在用户体验的过程中会起决定性的作用。

    在技术条件可行的前提下,人们增加,删除或改善元素,创造出了很多更好用的组件。同时也产生了很多新的品牌以及创新点。(插孔,接口等其余元素的视觉表现方式也变得更多样化)

    当然,影响的因素还有??榈耐庑?,材料变化(此处不深入讨论),从以上例子中可以发现:

    1.在满足用户和产品需求的前提下,发现最合适的元素和组件能打造更好的产品;

    2.元素和组件的变化,能提升产品功能的体验,同时可能为产品带来创新;

    3.如果你想发现一个产品的元素和组件,最好的办法就是将它“拆”了。

    那么在设计中,如何选择设计元素打造最合适的组件?

    项目实例 —— 米大师WEB改版

    先了解下米大师WEB是什么?

    米大师WEB是计费平台部为公司以及合作方提供的,PC端泛娱乐业务计费解决方案。业务以JS的方式直接调用,并以WEB弹窗形式来适配所有业务。

    我们来看看老版本,它有什么问题?(以会员为例)

    要解决这些问题,打造最合适的组件,先需要做的是:

    1.优化??榈慕峁?/p>

    旧版本采用的是左右结构,商品信息和支付信息混杂在一起,视觉动线杂乱,影响用户处理效率。

    在新版中,我们采用上下结构,按照用户路径进行信息分区,优化视觉动线。

    2.确立组件的表现形式

    旧版本商品和支付信息采用的是列表式,信息排列杂乱紧凑,视觉不美观,且不好适用于多种业务。

    在新版中,我们采用卡片式,将商品信息分档位,并将其单个打包,给用户带来更好的视觉一致性,易

    于操作,也能有效的对同类信息进行区分,同时能够容纳多种内容,便于多业务的复用。

    这些工作完成后,接下来就开始搞事情了——发现最合适的组件

    第一步:拆解,??槟诿扛鲎榧锏哪谌莶煌?,将组件拆解成多个区域,发现每个区域的主要元素。

    拆解总类目??椋?/p>

    拆解商品档位信息??椋?/p>

    拆解支付信息??椋ㄒ訯币渠道为例):

    第二步:结合新的??榻峁购托碌淖榧?,改善已“拆解”的元素,发现新组件,定义新组件内的元素。

    注意:紧随这个步骤之后,必须要先确定组件内设计元素的优先级,否则无法对结果进行判断。此处商品卡片内信息优先级为:运营信息>主要价格>商品档位>辅助信息

    第三步:分析罗列,通过参考和梳理,整理出组件内主要元素所有的表现方式,并将其一一罗列。(此处开始以单商品卡片组件为例)

    第四步:重组 ,将区域内整理出来的主要元素“重组”,进行尝试,发现多种组件形式,示例如下:

    重组过程中,你会发现,你见过的,没见过的所有式样都在里面。

    第五步:判断,根据判断标准(设计原则及产品属性)对各组件形式进行分析,选择最合适的,如下:

    来看看最后的方案呈现:

    随便聊聊

    设计的方法有很多种,或许未来会有更好的方法出现,但希望我们在通过各种渠道(网络、书本、项目等等)积累经验和知识的同时,抽点空闲,去看看身边普通或者不普通的物品,你会发现在它们身上有很多好的玩意等待着被发现,而这些东西也会为你的工作和生活带来很大的帮助。

    所以,赶快去发现新玩意吧~

    「最全面的设计原则合集」

    1. 界面排版丨自学体系第二课!写给新人设计师的界面排版原则(下)
    2. 可用性丨拿不定设计?让经典的尼尔森十大可用性原则帮你?。ǜ桨咐?/a>
    3. 动效设计丨让动效不止于好看!移动APP的7种动效设计和9条设计原则

    【优设网 原创文章 投稿邮箱:yuan@www.77ca.cn】

    ================关于优设网================
    “优设网AG手机客户端“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
    【特色推荐】
    设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
    设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
    设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.77ca.cn

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.77ca.cn/find-design-component-combination

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 海报设计 设计趋势 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立至今,一直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里