• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 看起来很高大上的设计规范,看这篇就知道怎么用了!

看起来很高大上的设计规范,看这篇就知道怎么用了!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计规则,设计规范等相关知识,希望在学习及工作中可以帮助到您

什么是设计规范,设计规范到底有什么用?如何看懂设计规范?今天@Jaret_杰瑞特?结合实际工作中的体验,帮你快速上手设计规范。

“设计规范”这个话题似乎在这1,2年里大家最常讨论到。基于智能设备的人机交互方式已经渐渐的走向成熟。在经历了最初大家一起一股脑儿摸爬滚打的时期之后;在进行越来越多、越来越频繁的UI/UX工作之后,许多方式方案开始慢慢沉淀,被认可,被整理出了一系列具有参考性及可沿用性的东西。

大家对“设计规范”所起的作用多少都有些了解。时常听到的声音包括有:“让工程师能清晰的知道如何去实现还原设计”;“设计团队有新小伙伴加入时能尽快熟悉相关产品的属性环节,快速上手。”具有一种对内、对外兼具的作用。

在网上一些设计交流共享平台上简单搜索了一下发现,绝大部分看到的“规范”都是类似这样的一种展示方式

大部分的规范我能清楚的明白设计控件的尺寸规格。对于前端的开发人员来说照着做是没有任何障碍的。

但当想要通过“规范”去认识当前的产品;或期望通过“规范”来帮助我进一步获得一些认知时,我发现变得不再那么容易。似乎除了对于刻板标注的数字理解外,就不再有其他的任何信息了。

回忆起我在学习阅读Material Design时的感受,我突然发现“设计规范”的大体可以归类为两大部分-“设计指南”和“设计规格”

“按钮”是最常见的一种控件。随着设计风格的不断更新,按钮的样式也在最近几年中出现了明显的变化。看似最简单,没什么可说的“按钮”或许有很多我们会忽略的地方。

在Material Design中,“按钮”的“指南”部分先大致阐述了“按钮”主要的几个类别,以及各类别在整个产品环境中所使用的频次概率以金字塔的方式呈现出来。并提供了几个简单但典型的场景表述。

以完整界面的正反例形式,补充之前提到的在场景中的使用方式。

同样,苹果的iOS人机交互指南中也简单的大概描述了一些几个典型按钮的作用。(但和Material Design的指南比起来还是属于比较含糊和笼统的。)

“设计规格”是我们大部分时候比较热衷和有“把握”的部分,毕竟设计师对于细节的追求有着一种与生俱来的天性。

在“设计规格”中,Material Design把“规格”中的原则性也尽可能的表述了出来。比如建议(至少)的最小尺寸,按钮所属的文本属性等。

我在阅读到从网上分享平台中搜索出大部分的关于“按钮规范”的这一部分时,发现这两类呈现方式在理解和实际工作中有着明显的差异,前者像是一种产品和信息传递的媒介,后者更像是一种写给自己的关键数据备忘。

我发现现在在很多产品中对于给予用户的一些文本描述、反馈等语言类的设定越来越重视。简练、易懂切合场景的文本表述可以提高用户的认知和学习门槛,提高用户行为效率。复杂难懂的语言表述则会破坏用户的行为流程,甚至在关键操作上给用户造成损失。

Material Design中对于语言文本的描述从用词本身到语气语调,甚至到标点的使用都有详细的建议。

情景式的表达在设计规范中很难找到的原因是,基于一些动态化展示的组件和功能时,情景式的表达可以快速的让阅读者理解产品和设计上的一些特性。

设置一个“人物”,讲述一段故事,引出一个使用实例,展示一张场景下的界面不失为一种有效的表述方式。

另外,情景式表现方式也可以用在日常的设计评审工作流程中。相比较直接看一屏的线框界面加各种串联的线,一段典型使用场景的描述更有利于大家理解设计的意图,从用户场景出发去考虑、看待和讨论一些设计和需求的定义。

欢迎关注作者微信公众号:

jrtqr

「如何看懂iOS 10 的设计规范指南」

  1. 看趋势变化丨《从IOS 10设计指南变化看设计的新趋势》
  2. 看交互启示丨《从IOS 10 的交互设计中学到的3个设计启示》
  3. 看使用方法丨《一份超详细的「IOS 10 UI KIT」使用手册(附源文件)》
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23如何才能做到色彩平衡?网易老司机告诉你!
  • 2018-08-23用好PS的3D工具,5分钟快速做出酷炫的海报设计!
  • 2018-08-23这样做引导,帮你的用户快速熟悉手势交互
  • 2018-08-23这10种色彩,是潘通预测的2017年秋冬两季流行色
  • 2017-08-06form表单中的Input使用disabled不能提交的解决方法
  • 2018-08-23让APP中内容呈现更友好易用的5种常见导航设计模式
  • 2017-08-06整理CSS中遇到的一些常见问题(Hack标识/固定容器/图片垂直居中)
  • 2017-08-06更受欢迎 更具创造性的深底色网页设计实例
  • 2018-08-23想设计出吸引视线的标题?来学这些好用的文字组合技巧
  • 2018-08-23针对不同设计阶段,如何选择合适的动效工具?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何设计优秀的弹出框?这儿有一份全面总结!
    • 如何用「8点网格」来规范你的设计?看这篇好文!
    • WEB中文字体应用指南
    • 学会这4个心理学小知识,你的设计会更有说服力!
    • 腾讯内部分享!一个工作坊的完整设计流程剧透
    • 用Keep的案例,让你轻松理解交互设计师的职责
    • 屏幕外的交互设计:界面设计 ≠ 屏幕设计
    • 如何构建 Web 端设计组件之树和日期时间选择器
    • 可自由编辑!一份30页的坚果Pro情怀PPT模板
    • 网站使用单页设计还是多页设计?这篇文章帮你理智分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有