恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
发现最好的你-设计中如何打造最合适的组件
0.0°
2017-03-13 原创文章 经验/观点 举报 11966 200 213 12

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

模块大家应该都不陌生,任何一个完整的界面,都会有多个功能模块,而每个模块内有相应的组件,每个组件中又有相应的元素,其中任何一点的变化,都会使用户对产品的认知发生改变。

Image title

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

Image title

这些产品之所以使用模块是因为模块具有这些优点:

1.标准化:模块是具有标准尺寸和标准接口的预制功能单元,这是组装、互换等特征的基础;

2.可组装:多个模块可以方便、灵活地组合、配置,以构造不同大小、不同形状、不同功能的系统;

3.可替换:通过用一个模块去更换另一个模块,可以改变系统的局部功能而不影响系 统的其他部分;

4.可维护:可以对模块进行局部修改或设置,以满足用户需求,另外可以增加新模块,扩展系统功能。

 

 

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

 

常用插线板的模块分为两部分:总开关模块和主要功能模块,为保证总开关的重要性,总开关模块下并没有连续的组件,只有控制总操作的元素(按钮),总指示灯以及品牌logo之类的品牌信息。

Image title

我们来看看总开关模块下的元素:

 Image title

我们来看看主要功能模块的组件和元素:

Image title

 

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

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

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

Image title

 

从以上例子中可以发现:

 

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

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

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

 

 

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

项目实例 — 米大师WEB改版

 

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

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

 Image title

 

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

Image title

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

 

1.优化模块的结构

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

Image title

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

Image title


2.确立组件的表现形式

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

Image title

 

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

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

 

Image title

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

 

第一步:拆解,模块内每个组件传达的内容不同,将组件拆解成多个区域,发现每个区域的主要元素。

 

拆解总类目模块 

Image title


拆解商品档位信息模块

Image title


拆解支付信息模块(以Q币渠道为例)

Image title


第二步:结合新的模块结构和新的组件,改善已“拆解”的元素,发现新组件,定义新组件内的元素。

Image title


 

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


 

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

Image title

 

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

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

Image title


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

Image title


来看看最后的方案呈现:

Image title


感谢你的阅读,本文出自 Tencent CDC,转载时请注明出处,谢谢合作。

更新:2017-03-13

收藏

200人已收藏

腾讯CDC

腾讯用户研究与体验设计部,简称CDC

  • 32

    作品

  • 4142

    粉丝

  • 3

    关注

  • 解锁卡片分类全过程
  • 微保 [车险] 项目设计小结
  • 【To G设计赋能】重塑政务服务体验设计初探—粤省事小程序设
  • 【虚拟To B支付设计研究】(三)海外研究篇
相关标签

    猜你喜欢

      2017-03-13 原创文章 经验/观点 举报 11966 200 213 12

      发现最好的你-设计中如何打造最合适的组件

      0.0°

      你确定要举报发现最好的你-设计中如何打造最合适的组件

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      213
      200
      12

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录