设计规范的学习

之前阅读了各家的设计规范之后自己总结汇总了一下,输出这篇文档,现在放上来


使用户清楚和愉悦

交互设计引导用户一步一步进行操作,给予用户反馈,引导用户往下进行操作。

好的交互设计使用户感觉智能,对整个操作的过程充满好奇,好的界面给用户在合适的时间提供合适的工具。

设计与功能的整合

视觉表象和交互行为要与其功能良好的整合在一起。例如,一款协助用户完成重要任务的应用应该使用不易察觉且不引人注目的图形、标准化控件和可预知的交互行为从而让用户保持专注。反之而言,一款沉浸式体验的应用(比如游戏),就需要吸引人的视觉表象,在鼓励用户探索的同时带来无穷的乐趣和刺激。

隐喻

当一个应用的虚拟对象和行为与用户熟悉的体验相似时——无论这种体验是来源于现实生活或是数字世界,用户都能更快速地学会使这款应用。比如,他们拖曳(drag)和滑动(swipe)对象,他们拨动(toggle)开关,移动(move)滑块,滚动(scroll)数值选择器,他们甚至通过轻扫(flick)来翻阅书籍和杂志。Material design中是使用纸片隐喻现实世界。

信息架构清晰

信息架构方面要清晰,使得用户能在虚拟架构中明确自己所在的位置,在当前位置可以做什么。导航需要告诉用户,当前在哪,可以去哪,如何回去等问题。信息架构的设计要与用户现有的心理模型保持一致,从而减轻用户的认知负担,也有助于用户将新设计感知为熟悉的。除了要有清晰的导航形式,还应该确保对象间的路径是合理的,符合预期的且容易追溯的。设计一个能够快速简单地访问内容的信息结构。合理地组织你的信息结构,保证它只用最少次数的点击、横扫和屏幕间跳转就能访问相应的内容。

不要包涵多段的面包屑路径。返回按钮只能执行一个单独的操作,即返回到上一屏。如果你认为用户可能会因为忘记到达当前屏的完整路径而迷路,请考虑扁平你的app层级。

使操作简洁明显

交互的设计要建立在人们已有的心智模型的基础上。熟悉,清晰和选项的区别性可以降低用户的认知负荷,使人们更专注于任务。

减少用户不必要的操作,附加工作消耗用户的精力,但是不直接实现用户的目标。消除附加工作,可以提升操作效率,改善产品的可用性

在设计构思时可以进行任务分析,梳理产品流程,在研究基础上选取最优最简的流程。

界面精简

页面信息的精简,尽量只展现当前对用户有意义的信息,避免对用户认知带来负荷。一个页面最好能突出一个重点,让用户快速理解和完成任务。避免页面上出现其它与用户决策和操作无关的干扰因素。特别是在任务导向的页面中。

一致性

系统内所有设计遵循贯彻相同的标准和规范,使用系统提供的界面元素、风格统一(众所周知)的图标、标准的字体样式和一致的措辞。使得界面的表现能符合用户的心理预期。设计的一致性也可以使用户对产品产生熟悉感。

层次(Hierarchy)

层次是 UI 很重要的元素,让重要的、不重要的东西区隔开来,引导使用者的阅读视线。区分层次的手法有很多,如大小、粗细、颜色、间隔、形状、排列方式……等等。

减少输入

在手机较小的空间里,无论是点击键盘输入还是点击界面元素,信息输入都是一个冗长的流程。由于用户在使用应用时是任务导向的,总是希望尽快达到自己的目的,冗长的输入会消磨用户的耐心。因此,需要注意以下几项:要尽可能展示选项给用户选择;可以从系统中获取的信息不要要求用户输入;只有系统运行真正必须的信息才使用必填项;尽可能在用户输入后就立马检查输入值;提供可靠的默认值帮助用户缩短做决定的时间从而加快流程。

即时的反馈

反馈认证交互行为,呈现结果,并通知用户。即时恰当的反馈能告诉用户下一步该做什么,帮助用户做出判断和决定,让用户知道系统运行良好稳定。如按键之后的水波纹效果等,颜色变化等。但是要避免给用户看到太多包含无关紧要信息的警告。

身份验证

在涉及到用户的身份认证的时候需要体现安全感,设计需要使用户安心。

要求用户进行身份验证时应该用有价值的东西交换,比如个人化体验、获得更多功能、购买内容或者同步数据。为了避免减少应用的乐趣,需要尽可能将登陆流程设计得快速简单并且低调。

应用内部如果需要登录,尽可能地延后登陆。在做一些有用的事前强制用户登陆会使得用户想要离开应用,在强制用户前给他们一个爱上你的应用的机会。

如果需要登录,请展示适合的键盘来减少数据输入,因为用户都是懒的。

结合环境场景

用户的使用环境一直在变化,设计要考虑到手机用户时刻移动,易被打断的场景

要考虑设备的持握方式 

横屏和竖屏时对内容的显示和交互都会产生影响。

单手持握手机时可交互区域的难易程度(左)内容可读性区域的难易程度(右)


单手持握可交互区域:颜色深到浅:BEST,OK,HARD   
内容可读性区域:     颜色由深到浅:BEST,GOOD,OK


手势

交互手势要避免复合的手势,如双击,按住一定时间等,因为这类手势通常是偶然触发才能被发现,时长很难准确估计。

一般使用标准手势。用户已熟悉了标准手势,使用标准手势用户就不用花费多余的时间去学习和记忆手势。注意对于标准的手势不要用于执行非标准的操作,否则容易使用户混乱。

交互控件库

需要根据实际项目积累,控件库可以保持产品的一致性,同时节省开发成本

使用语言 

通过用户研究和任务分析获得用户熟悉的词汇,使用用户熟悉的语言进行设计

使用简洁的,含有任务气息的,引导性更强,如使用“全选”“发送”,“添加”,“完成”等字眼

热区

操作的热区要大于实际按钮的大小。

页面层级规范

用于规范页面元素所属层级、层级顺序及组合规范。

交互自查表

对于移动应用来说,移动情景非常复杂,交互设计需要充分考虑细节,确保不遗漏特殊状态。交互设计自查表可以帮助设计师深入审查自己的设计。

配色

注意考虑色盲, 避免把这些颜色组合作为区分两种状态或值的唯一方式。比如,用红色方块和绿色圆形来表示下线和上线状态,而不是用红色和绿色的圆形。

Animation

动效要为功能服务,避免无意义的动画和动效。动效要力求真实和可信,符合自然和物理规律。

参考资料:

微信设计文档https://weui.io/

IBM设计文档https://www.ibm.com/design/

Ant designhttps://ant.design/docs/spec/proximity-cn 

Material design  https://material.io/   

IOS Human Interface Guildelines  https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

如何建立交互设计自查表http://uedc.163.com/12870.html 

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,783评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,360评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,942评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,507评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,324评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,299评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,685评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,358评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,652评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,704评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,465评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,318评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,711评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,991评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,265评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,661评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,864评论 2 335

推荐阅读更多精彩内容