一致性为何在UI设计中如此重要

职业Foundry博客撰稿人Maria de la Riva

关于一致性的重要性已说了很多UI设计并有良好理由用户界面不一致性常产生混淆和阻塞用户,甚至最有希望的产品都有可能失败

UI设计中什么是一致性一致性UI设计涉及确保用户界面中的元素均匀性以同样方式看和行为帮助持续证明用户对用户界面的假设正确性,产生控制感、熟悉感和可靠性

开发UI设计一致性时,应力求与UI设备指南和行为、其他类似程序/网站保持一致,并与自身设计保持一致

UI设备指南行为

不同的平台有不同的UI使用指南设计iOS应用用户界面时,举例说,你应该熟悉iOSOS人界面指南并努力遵守之如果你设计 Android,你应该看一看材料设计

考虑移位 时区规划程序由Tapmates提供 Android和iOS用户都可用快速一目了然,两件设备屏幕显示下方图像移位看同样但如果你近距离看,你会发现几处细微变化, 譬如导航元素置入信头出自两个平台指南的差异换位程序设计师观察每个平台特有指南并调整两个版本以与它们保持一致

实例二a屏幕

下方视频中你会看到我解释一致性在UI设计中的重要性查查

其他类似应用/点名和通用实践

没有什么秘密你的用户会花时间使用其他应用,有些与你的相近结果是,他们会熟悉并自在使用大众模式、规则 和交互作用计及并建模设计 并用心提高使用性知识用户从以往经验中积累并不必担心 被新用户或不为人知用户界面混淆

这并不表示抢别人的设计免拷贝想要熟悉UI模式使用方式和别处改进自身设计所做的事情

思考电子商务网站并安装购物车通常从右上角查看我们准备购买的东西,对吗?设计电子商务网站用户界面,像下文可爱例子CatherineIrma Elita中想考虑把购物车置入相似位置

镜像网站快照

自定义设计

置换、定型、类型选择和布局只是几个元素,在整个用户接口中应保持一致性向导元素放入屏幕A页眉内时 切不可放入屏幕B页脚移动、修改或消失元素不单混淆用户,还会激怒用户,甚至可能激励用户踢你应用程序到路口

万一我想调味避免无趣设计呢做策略性偏差使用改善设计或提高用户界面可用性关键是用户注意到用户界面中某一元素或需要提醒注意该元素时,改变它想要拆散一个乏味设计中度自相矛盾添加视觉兴趣 只要不阻塞

查一下下面快速Gif注意,即使屏幕内容改变 导航元素的位置 在整个应用中保持一致性

UI设计一致性的好处

目标与设备UI指南和行为一致 其他类似应用/网站 自身设计面向应用用户几大关键效益如下:

可使用性提高

一致性使用户更容易导航使用a他们知道什么期望 要么因为他们学它 先前内应用或别处自然地,这会帮助用户感到自在快乐 并激励用户与应用保持接触

消除混淆

一致性用户界面促进通信视觉一致性确定内容优先级、可导航性或突出重要比特使用一致性创建逻辑结构并清晰定义用户在哪里能找到什么, 免得混淆和沮丧用户

Evoke情感响应

we've提到UI设计一致性可使用户更容易导航使用应用帮助用户相信自己有能力管理指针下的东西 并会从愉快体验中 引出积极的情感响应

一致性实践

if you're pretty new to the UI world, 其中许多概念难以视觉化深入理解一致性可转化为实践,查下完全Acs一致性应用示例

各种设备上应用

大应用清除

记不起来我引用或使用过多少次清除举个例子来说明UI设计中如此之大素质如果你不熟悉它,一定要检查它

一致性比外观一致微信应用上几件不同设备并爱我需要的简单手势 在所有设备中都保持基本相同 甚至在Mac上使我积累的知识 如何使用应用可移用于所有设备 提高可用性

屏幕截图dulingo应用

大应用:dulingo

杜利安戈趣味应用设计帮助任何人学习新语言不仅能令学习有趣化,还展示用户界面一致性的益性一致性

按钮、字面、导航元素甚至应用内插图均有目的和仔细设计,以视相兼容颜色、光线和形状都设计成在整个应用和所有材料上保持一致性,像网站环游应用不仅使a易于导航,还使其感到打上烙印和专业性

并加之可爱Duo令Dulingo视觉愉快使用,

不同屏幕Hopper应用

大应用:Happer

Hoper预测票价应用帮助你找到最佳航班交易 和最佳飞行时间 通过允许你留意特定路线物价波动时,Hopper会通知你

设计时,重要的是同时面向一致性布局和定位这一点特别重要 指导航元素 用户需要绕行

深入理解它可能长成什么样 查查Happer注意菜单总是信头内信头和它所包含的重要导航元素不拉休迪尼或移到底部屏幕上都坐在同一位置

现在,你可能知道UI设计中一致性有多重要正因如此,我们用多词来表达新词的一致性用户界面设计课程.探寻出进出之道 应用之道 并探求前后不一

Keen更仔细地研究UI设计的一致性UXPin公司的人写过超能力电子书上题包括亚马逊公司、Dolce和Gabbana公司、Adobe公司和美国航空公司都提供大量解释和案例研究帮助观察巨人如何解决它网站上还能找到更多免费资源 覆盖UI设计中的其他重要题目,如移动材料设计、 web排版和UX设计

内尔森诺曼集团的人 关于一致性的问题,你也可以查查看写过几本书和多文章 题目和由它产生他们的一致性跨通道经验文章阅读极佳 特别是今天 当我们约一百万个不同屏幕 计算设计时

职业Foundry是什么

职业Foundry网际学校面向面向技术生涯选择程序 并配专家导师教程 并成为准备工作设计师 开发师 分析师

深入了解程序
blog-footer-image