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

控件(或部件,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

相关推荐

  • 从中国形式走向中国叙事:RSAA / 庄子玉工作室的2017

    *本文转载自RSAA鼓楼7号院刚刚过去的2017,对我们这个钟鼓楼旁的四合院是很特别的一年。虽然在RSAA北京公司成立后的八年间,我们一直埋头苦干,作品也算颇丰,但好像对大多数人而言,我们一直是一个相对默默无闻的团队,甚至很少有人知道RSAA是个正儿八经的德国独资公司;而在2017,RSAA和庄子玉工作室却因为几个极具当代中国调性的项目而广为人知;但只有我们自己知道,这也许不是偶然 - 以“在当下中国的社会和空间语境中寻找新的叙事性与类...

    2018-02-24
  • APP交互设计,需要注意五点事项

    交互设计这个词最早提出来是在1927-1970年,那个时候只是个初创期。后续随着时间推移,互联网和机器的发展,这几年开始被人重视这个交互设计。很多公司专门成立个部门叫UED,听起来很吓人,设计师没有接触过,不知道是什么东西,具体里面有哪些核心内容?其实说白了就是把人,机器和界面相融合,做到顺其自然,顺理成章,不要反其道而行,逆天反人类。

    2017-05-13
  • 三种方法,使用鲜艳的配色来制作WEB/APP界面

    无论是Web还是APP,鲜艳的配色已开始逐渐具有人气。为了将人们的注意力集中于要素之上,让设计能给用户带来深刻的印象,就让我们来使用鲜艳的配色吧。

    2017-05-09
  • 细数那些精彩纷呈的引导页

    随着苹果ios8的发布,可以看到货架上,众多主流App迫不及待地向人们展示产品视频预览,接下去会是被设计师、市场宣传相继关注的焦点,产品宣传的下一轮引爆点。 作为能在App store上先发触达地形成前期推广的视频预…

    2014-12-18
  • 留白这种设计手段的4大必要功效

    留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
    “留白不单单是一个被动的背景,而是一个活跃的元素。”Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
    适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.The more whitespace around an object, the more the eye is drawn to it
    越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。As designers, it’s our responsibility to create usable communication vehicles.
    “作为设计师,我们职责就是去创造“沟通手段””Let the products speak for themselves
    让产品自身为自己说话。

    2017-04-28
  • 交互设计中的项目跟进怎么进行?

    交互设计的常见流程可以划分为:需求分析、设计规划、设计实施、项目跟进、成果检验五个流程。很多人以为从无到有的过程才是最重要的环节,观点并没错,但我今天想说的是如何进行项目跟进。

    2017-05-30
  • “来电”性格测试的交互设计历程

    来电,是一个主打免费通话的纯语音应用。从14年7月份低调发布Lightalk1.1后,历经3个版本,终于在1.4版更名为来电并投入推广了。除了运用一些传统的渠道推广,来电也尝试在应用内嵌一个提供分享的入口,鼓励用户做…

    交互设计 2015-04-10
  • 在007里的用户体验是“爽”还是“不爽”

    有一天在微信上和007社群的班级一位同学聊天,一通天南海北的乱扯后,话题就回到007这个社群上了,因为这段时间我参与007社群的一些活动,对这个话题特别敏感,然而他却流露出对这个社群的很多不满意,我们之间的一段对话让我思考了很久很久。对了,这两天你看了你们小组的信息了吗?小组信息?刚看,不过我最近在考虑要不要直接退出007,感觉没意思,也啥时间整这些了。那你当初为啥参加007啊?没啥,就是觉得应该养成一个写作的习惯以及可以认识一些稍微志...

    2018-04-11
  • 产品交互乱,设计效率低?你需要一套好用的产品设计规范

    说到产品设计规范,大家一定不会陌生。一套好的产品设计规范,将产品设计模块化、通用化、标准化,不仅能够为产品建立起统一的交互规则与品牌视觉,让用户拥有更好的产品体验、对产品风格有更深的认知,更重要的是,它能够减少产品设计人员的设计工作量,提升产品设计的效率。

    2017-06-08
  • 用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30