用户体验入门:新人自学包之控件学习

控件(或部件,widget或control)是一种图形用户界面元素,其显示的信息排列可由用户改变,例如视窗或文本框。控件定义的特点是为给定数据的直接操作(direct manipulation)提供单独的互动点。控件是一种基本的可视构件块,包含在应用程序中,控制着该程序处理的所有数据以及关于这些数据的交互操作。
——https://zh.wikipedia.org/wiki/控件

用户体验入门:新人自学包之控件学习

随着互联网行业的逐渐成熟,用户体验设计师也成了炙手可热的“热门职业”。近年来,设计专业的高校教育也渐渐从传统的实体产品设计倾斜或引入用户体验的概念。毕业后仍从事设计行业的学生数量大大增加,同时半道出家的设计新人人数也在不断上升。

小可不才,在此结合自己多年的设计经验送给设计新人十五字真言:

  • 夯实基本功
  • 夯实基本功
  • 夯实基本功

扎实的基石乃高楼之保证,设计之路亦是如此。以用户体验设计新人为例,一般来讲,必须修炼的基本功,即本自学包包括但不限于:控件库;操作流程;信息架构等。

本系列名曰设计新人自学包,可供用户体验新人自主学习,在掌握了所有自学包的内容之后,可以轻松拿下初级设计师岗面试中的设计技能考核的部分。本文将就第一部分控件学习进行深入讲解。

用户体验入门:新人自学包之控件学习

(图1,各种控件)

控件(或部件,widget或control)是一种图形用户界面元素,其显示的信息排列可由用户改变,例如视窗或文本框。控件定义的特点是为给定数据的直接操作(direct manipulation)提供单独的互动点。控件是一种基本的可视构件块,包含在应用程序中,控制着该程序处理的所有数据以及关于这些数据的交互操作。

——https://zh.wikipedia.org/wiki/控件

控件对于设计来说就是搭建时最基础的积木块,每种积木块有着不同的外观也承载着不同的功能。对于每种控件的深入了解是做设计的前提,最简的学习方法就是学习windows控件库(当然也选择其他平台控件库入手学习)。

Windows控件库是我们最熟悉(熟悉到就像一种习惯)的控件,此外,它所覆盖的范围也足够广泛,在之后的不同控件库对比之时,也容易触类旁通。推荐一些参考:《About Face 4:  交互设计精髓》的第3部分交互细节;UXGuide上的Windows用户体验交互设计规范;各平台的设计规范等等。

用户体验入门:新人自学包之控件学习

1、选择控件库

选择一个控件库的规范作为教科书进行学习。

这里的规范可以是我这里推荐UXGuide上的Windows用户体验交互设计规范,也可以是其他的控件库。

用户体验入门:新人自学包之控件学习

2、学习控件

撰写每一类控件的详细交互规范和细节设计说明。

这一步其实就是自学记笔记,不同的设计规范中对于控件的定义方式不尽相同,有些言简意赅有些更偏向于编程实现有些有些是可怕的裹脚布。你可以选择你认为对设计有强指导帮助的部分进行强化学习。何为强指导帮助,即在你不确定如何选择控件或该控件需要设计几套状态的时候,你一看这些内容就可以基于此给出一个可用版本的设计。

用户体验入门:新人自学包之控件学习

(图4,以我当年的自学笔记之进度条为例)

3、填充案例库

收集正面案例,以正三观。

案例库需要你广泛收集不同产品的界面案例,从中提取分析windows控件在产品中的应用规范,大多数的时候案例是正面的,而有时候你会发现,一些产品上对控件的使用却是个扎扎实实的反面案例。

在收集案例的时候,建议以正面案例为主,分析为何在此处使用该控件,是否符合规范,是否可以用其他的控件代替以及为什么。除去一眼即明的控件样式,很多的产品界面的控件已经有了很多风格化的变种,然而刨去变异,每一个控件依然可以划归到基础控件类目中。如果不行,那就回过头去巩固第二步。

用户体验入门:新人自学包之控件学习

(图5,依然是我的笔记截图,当时在游戏公司实习,所以案例都是游戏啦)

4、产品界面分析练习

在完成了上述三步之后,找一些优秀产品进行界面分析,就某一具体界面进行思考:该界面使用了哪些控件,哪些控件组合,有没有更好的组合可以代替现有的组合。

用户体验入门:新人自学包之控件学习

图6,以注册界面为例,在这个所有人都很熟悉的界面上,除去文本,包括了:

  • A-链接(使用模式:任务链接);
  • B、C-文本输入框;
  • D-命令按钮;
  • E-复选框(使用模式:单个选项);
  • F-链接(使用模式:导航链接);
  • G-命令按钮(使用模式:标准命令按钮)

关于控件库的学习就先讲到这里。

在所有的自学任务中,控件库的学习和整理可能是最枯燥的事,一个控件可能就会耗费几小时甚至更久,然而,它所带来的技能成长也是最立竿见影的(自我设计时有最基本的依据;讨论细节时有最基本的理据;看其他设计师不爽时,可以拷问ta最基本的根据;也可以随口冒出一些术语偶尔装装逼等等等等)。

同时,你也建成了一个自己的控件资源库,可以随时填充进去你觉得有意思的设计案例,以做未来设计之参考。

 

本文由@点融黑帮(公众号:DianrongMafia) 原创发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28413/

(0)
CatherineCatherine
上一篇 2017-05-20 20:39
下一篇 2017-05-20 23:05

相关推荐

  • 如何从0到1设计用户激励体系,除了积分勋章还可以做什么?

    作者:子宸君   内容概要 什么是用户激励? 为什么要做用户激励? 用户激励作用的作用是什么? 如何从0到1拆解用户行为给出激励方案? 用户激励的副作用?   在互联网运营界,说起用户运营、内容运营、活动运营都避不开…

    交互专题 2017-08-07
  • 新项目丨青岛东海凤凰:宽建筑[UCD]挑战中国第一仿生建筑

    *文章已由原作者授权发布▲凤凰中心效果图作者:王宽方案设计方:宽建筑 [北京城建] KUAN architects [UCD]项目名称:青岛市西海岸新区文化活动中心地址:中国,青岛,金沙滩设计团队:王宽,周媛,李鹏,梁文杰等结构咨询:中冶京诚工程技术有限公司  卢理杰数字模型&BIM咨询:北京华茂云信息科技有限责任公司施工方:北京城建集团(建筑部)、北京城建集团十六公司、城建精工钢构公司面积:31,313平方米状态:主体结构已封顶预计建...

    2018-03-13
  • 私家推荐!九月必收的优质设计资源干货大合集

    小白叨一叨:九月份设计圈的干货 合集来咯,包括前端开发、设计神器、设计素材 (字体、PSD等)、以及一大波实用的酷站推荐,全是精选干货 ,快来收吧!

    2017-06-04
  • 日照这家单位招人啦!提成、五险一金、带薪培训、年终奖、节日福利···

    关于我们与其说我们是一个团队,我倒觉得我们更像一个温暖的大家庭。工作上我们团结协作、互相体恤,生活上我们互相帮助、彼此鼓励,家人遇到困扰,我们会拧成一股绳共度难关,家人有喜事有收获,我们会由衷的祝贺!我们每一个人都在用真心去经营我们的置业网大家庭,所以我们无比珍惜和感恩,也希望你和我们一样将它视如珍宝……公司简介日照置业网传媒有限公司主要经营各类广告的发布代理及各项活动策划,各类网站制作管理维护与设计,目前经营包含日照置业网等6家网站,...

    2018-04-08
  • 沃尔沃自主驾驶概念交互设计欣赏

    沃尔沃自主驾驶的概念交互设计来自设计师Keke Le用户调研 |  HMI设计 |  UE/UI设计 |  HMI培训  |  HMI评测  | 体验咨询

    2018-03-21
  • 交互细节思考: Calender VS 下拉框

    微小的差别给用户的感受可能完全不同。

    2017-05-05
  • 转化率低是设计师的问题?这锅我们不背!

    市场反馈好不好是由那些自带话语权或流量的人或产品决定的,这些人或产品既左右了大部分人的喜欢和习惯,又代表了大部分人的喜欢和习惯。转化率=(产生购买行为的客户人数 / 所有到达店铺的访客人数)× 100%

    2017-08-04
  • 常见的App应用界面交互框架

    掌握常见的APP应用界面交互框架,了解他们各自的优缺点,使用时才能游刃有余。你还在等什么呢?赶快去学习吧。标签式、跳板式、列表式和旋转木马等在等着你。 1>标签式 优点: 1、当前位置入口清晰   2、轻松在…

    2014-11-19
  • 影响网页内容的七种设计误区

    如果你的设计当中出现了这些问题,请不要担心。它们的解决方案并不复杂,通常也不需要经过复杂的重设计来完善,只需要进行适当的调整即可。

    2017-05-03
  • iOS 10锁屏交互大改,是革新还是灾难?

    本次更新除了锁屏交互的调整,也添加了一些更实用的小功能:例如删除系统软件、夜间模式等。虽然beta1版本体现出的诚意还不够,但是我相信两个月后的iOS 10正式版会令多数人满意。

    2017-05-22