美文网首页
设计规范的学习

设计规范的学习

作者: LesleyWu | 来源:发表于2018-03-01 21:17 被阅读0次

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


    使用户清楚和愉悦

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

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

    设计与功能的整合

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

    隐喻

    当一个应用的虚拟对象和行为与用户熟悉的体验相似时——无论这种体验是来源于现实生活或是数字世界,用户都能更快速地学会使这款应用。比如,他们拖曳(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 

    相关文章

      网友评论

          本文标题:设计规范的学习

          本文链接:https://www.haomeiwen.com/subject/pkeftftx.html