相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

从落地到上线——设计规范全面构建指南

春哥发布于:2019-11-28 21:46 |原作者: 酒夏|
春哥
重庆市 江北区 GUI设计师
发私信 + 关注
简介: 本文非常详情全面地讲诉了如何从零开始构建一个设计规范,以及设计规范从落地到上线的实现过程和问题总结。希望对您有所帮助。


大胆,图形,鲜明

Material Design基于印刷设计的指导原则,字体,栅格,留白,颜色等元素都以创造层次,意义,和焦点为基础来让用户沉浸在设计体验中。

MD Design用比较抽象的词语来概括了设计中的重点,这几个重点和克鲁格在他的《don't make me think》一书中提倡的web端可用性原则一致,保持段落简短,层级关系明显;重点内容突出;充分利用标题。好的用户体验最重要的标准之一便是别让用户思考。

从落地到上线——设计规范全面构建指南 飞特网 设计理论

动效赋予意义

微妙顺畅地反馈和过渡性动作效果,引起用户的注意力并使之保持持续关注。当元素出现在一个界面中的时候,元素之间的互动重塑了环境。

从落地到上线——设计规范全面构建指南 飞特网 设计理论

基础灵活

Material Design同样旨在实现品牌价值的传递。结合了基础的代码,组件,和元素,可表达不同的品牌需求。

从落地到上线——设计规范全面构建指南 飞特网 设计理论

跨平台

Material Design的UI组件库可在不同的平台共用,不论在安卓平台,ios,Flutter,还是web都可保持一致的组件元素。

IOS Human Interface Guidelines

IOS的人机规范指南,保持了苹果一贯的风格。虽然没有MD规范那么细致全面,但是核心的设计原则在每个组件的设计说明中都有渗透。作为ios系统的设计基础,建议每个设计师都需要仔细研究。

IOS设计价值观

从落地到上线——设计规范全面构建指南 飞特网 设计理论

1)Clarity

系统中所有的文字,图标,图像,以及各个元素都清晰可见,语意表达准确,功能驱动设计

2)Deference

顺应用户的行为,流畅的动效和清晰美观的界面使用户沉浸在顺畅的交互中,不去打扰用户

3)Depth

清晰的视觉层级和流畅的动效同样提供了系统清晰的层次感,使其富有活力且易于用户理解

IOS设计原则

从落地到上线——设计规范全面构建指南 飞特网 设计理论

Aesthetic Integrity整体美感

整体美感不仅仅包括美观的app界面,还包括流畅的交互体验,产品功能和用户行为的有效结合。比如当一款工具类app主要是帮助用户完成一项任务时,设计师应关注于用户操作本身的行为路径,和产品功能相结合来帮助用户完成目标,使用户聚焦功能本身。而如果是是一款游戏,那么需要提供非常有吸引力的界面,在鼓励引导用户探索的同时也有非常棒的操作体验。

Consistency一致性

一个保持了一致性原则的app,通过使用标准的控件,熟悉的icon,标准的文字规范,统一的组件俗语来实现一个拥有标准化范例的系统。这个系统提供的特性和交互行为也符合用户的心智模型和预期。

Direct Manipulation直接操作

让用户在屏幕上直接对内容进行操作的交互行为可以鼓励用户和系统进行交互并且更易于理解。当用户翻转屏幕,或者使用手势直接于屏幕交互时,他们会感知到直接操作的行为,并且能立即得到操作结果。

Feedback反馈

反馈能够相应操作,呈现结果,使用户获得信息。手机中内置的iOS应用程序为用户的每一个动作提供可感知的反馈。交互元素在点击时会被高亮显示会凸显,进进度指示器显示了需要长时间运行的操作进度,动效和声音使用户能够更清晰地感知交互行为的结果结果作出响应。

Metaphors隐喻

当一个app的虚拟对象和操作路径与用户本身所熟悉的心智模型一致时,不管它是来自于真是世界还是数字世界,用户都能很快都上手。隐喻之所以有效果是因为用户和屏幕存在物理上的交互。用户可以通过移动分层视图来显示手机上被遮挡的内容;拽拖并且滑动对象,切换开关,移动滑块,滚动数值选择器,用户甚至可以通过翻转手势来翻阅手机上的杂志和文章。

User Control用户控制

在ios系统中,用户是主导者,而不是app。app可以提供行动建议,给予警告提示,但是不应该替用户做选择。优秀的app始终会在用户主导和用户不想要出现的结果中保持平衡。一个app应该始终让用户感知到在他的掌控之中。交互的元素给用户熟悉感并且可预期,对有破坏性的操作可确认,对错误操作可取消,即使是在进行中的行为也可中断。

从落地到上线——设计规范全面构建指南 飞特网 设计理论

在sketch工具中可直接下载ios的组件库使用。

Airbnb DLS

从落地到上线——设计规范全面构建指南 飞特网 设计理论

在2016年,由工程师和设计师组成的团队创建了Airbnb的设计语言系统 (DLS)的第一个版本,其目标是创建一致的体验和跨平台的统一。DLS包含了一套内部和第三方工具,由共享原则和模式定义的组件的集合。这允许使用跨设计,工程和其他学科的共享词汇表进行快速迭代。DLS的结构简单而连贯,简化了团队之间的沟通。并制定了以下几条原则来指导DLS的设计:

Unified 统一性

每个组件都是系统的一部分,并且需要积极地响应系统。没有单独特殊的单一组件。

Universal 通用性

Airbnb在全球被全世界人使用。所以我们的产品和视觉语言需要是受欢迎的和易于理解的。

Iconic 标志性

产品的视觉和功能设计是最重要的。我们的工作必须专注于对视觉和功能给予清晰明确的定义。

Conversational 对话性

动效在我们产品中是有生命的,它能让用户和我们产品更好的交流对话。

ADS开源库

从落地到上线——设计规范全面构建指南 飞特网 设计理论

Airbnb设计副总裁Alex Schleifer在IXDC2017国际体验设计大会上分享了这一创新React Sketch app 管理设计系统, 这是为Airbnb的设计系统而设计的,其实就是个实时更新的代码数据库,可以实时查询sketch数据、代码,也可以下载图标、设计模块,所有工程师、设计师都可以免费下载。看到这个,我想完美共享库也许并不是那么的遥远的未来。

19

好评
14

差评

刚表态过的朋友 (33 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

春哥
重庆市 江北区 GUI设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计