陌北默
小编:网页、app、平面哪个设计不是由一个个小部件组成?一起跟随来自Tencent CDC的 @erztan去看看他们设计过程中如何通过拆解、改善、分析罗列、重组、判断来获得一个全新的组件的。

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

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

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

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

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

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

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

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

 

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

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

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

 

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

 

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

 

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

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

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

 

当然,影响的因素还有??榈耐庑?,材料变化(此处不深入讨论)————————————————————–

 

从以上例子中可以发现:

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

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

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

 

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

项目实例 — 米大师WEB改版

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

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

 

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

 

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

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

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

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

 

2.确立组件的表现形式

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

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

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

 

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

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

拆解总类目???/p>

 

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

 

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

 

 

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

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

 

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

 

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

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

 

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

来看看最后的方案呈现:

 

随便聊聊

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

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

 

原文地址:Tencent CDC

作者:erztan

 

转载请注明:学UI网—UI设计师学习教程平台 » 设计中如何打造最合适的组件?

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
「译」苹果官方 iPhone X 人机界面指南「译」苹果官方 iPhone X 人机界面指南
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
从iOS 11看怎样设计APP图标从iOS 11看怎样设计APP图标
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
网易设计师复盘小程序轻设计网易设计师复盘小程序轻设计
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
网易严选APP品牌设计流程详解网易严选APP品牌设计流程详解
?