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

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

相关推荐

  • 悬浮动效常见的几种玩法

    动效是如今UI设计中的重要组成部分,也是目前最热门的设计趋势之一。在之前的《在现代网页设计中,动效常见的几种用法》这篇文章中,我们探讨了动效对于交互和用户的重要意义,动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效,这也是近年动效设计的热点之一。

    2017-05-05
  • 交互设计的3大要素:用户、目标、行为

    交互的三要素:用户、目标、行为 讲个故事,小鹏是个销售员,下午出去拜访客户,完事后发现已经六点多了,非常饿,小鹏想回家自己做饭吃,但是实在是太饿了,回家又要做好久的地铁,还不如就在附近找家小饭馆吃了呢…

    2016-05-08
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

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

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

    2018-02-24
  • 如何进行可用性启发式评估

    经验分类: 经验/观点 / 自译外文 原作者: Armen Ghazarian 用户体验只有在渗透入从创意到开发测试等产品开发的各个阶段时才能发挥最佳效果。当通常来说事情没这么简单,用户体验专家需要反复对已经完成的产品进行…

    2014-10-30
  • 【用户体验.春节特辑】客从何处来(总第266期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第266期我的家族,还算是一个比较大的家族。从我记事起,关于我的家族,关于那些已经逝去的,离我远去的那些家人的故事与人生经历,都是经由一个姑姑讲述给我听的。每逢节假日,尤其是寒暑假那些漫长的假期里,尚还年幼的我,都会安静地坐在她的身旁,在她的娓娓道来中,去遥想那些过往,那过往中我的那些平凡也却有些不凡的家人。我的祖辈的...

    2018-02-16
  • sketch 也能快速绘制轴测视角

    轴测图(isometric),这种能同时反映物体三个坐标面形状的表现手法,让原本停留在二维空间的构想扩展到了三维世界。宛如蛟龙得水,一跃获得了大家青睐。除了具有差异性的展示效果,其应用范围也很广。插画、图标、界面…… 不用惊讶,我们早晚是要步入虚拟化时代,三维呈现是大势所趋,轴测图是这场革命中一个微妙的平衡点。作品来源:追波Shirley for UIGREAT很多朋友绘制轴测图都愿意用 AI,其次也是 PS。但实际上,Sketch 也...

    2018-03-10
  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 硅谷设计师看苹果交互设计趋势:如何适应大屏?

    来源:用户体验联盟 本文作者:Jiaxin Yu 苹果终于顺应市场潮流,推出了大屏手机,而且销量前所未有的火爆!苹果大屏手机的推出,必然影响其交互设计的改变,其中有怎样的趋势?请看硅谷设计师的看法! 今年夏天,…

    交互设计 2014-10-11
  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-13