干货篇,最佳UI设计规范10例

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-相同方式共享
4409 2 19 2018-08-06

不得不承认,整理设计规范是UI设计师设计能力的一种体现,尤其是便随项目越来越多的情况下,对设计规范的把控力,成为了设计师职业素养的一种体现。

无论还是处于自己设计创作的阶段,还是和程序员沟通推动产品开发的阶段,设计规范完善与否,对产品的一致性和用户体验有着近乎于决定性的关键作用。在UI设计的过程中,设计规范是一个关键步骤。


整理设计规范很苦恼?优秀全面的设计规范是什么样的?如何通过设计规范提高品牌一致性和推动开发高度还原设计?我们不妨先来看看优秀的设计规范到底是什么样子。这里有我整理的10个设计和质量俱佳的设计规范模板,它们给我带来了很多启发,也希望对你有所帮助。


设计规范的组成


制定良好设计规范的第一步就是合理归类。你需要先明确你需要整理的内容有哪些,这些内容的分类又该怎样呈现。一般来讲,UI设计规范有一下几大分类:Logo、标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。


设计规范10例 (大图流量君谨慎,文末有打包资源,直接下载,我很勤快了)


1. 

Image title


2.

Image title


3.

Image title

4. 

Image title


5. 

Image title

6. 

Image title


7. 

Image title


8. Image title


9.

Image title


10.

Image title


点击这里下载设计规范模板!


制作设计规范


还在设计规范文档?也是很多人还在做着这样费力不讨好的事。相信看了上面的10个案例,你会发现,咦?还像它们都不是手写出来的呢?


UI设计师已经很忙了,全部手动整理规范整的是比较残忍的一个事儿。


你需要的是解放双手,比这样的黑科技:


一键查找相同


可以一键查找页面中的任何重复元素(如文本、颜色、边距、宽度等),一次查找,就可全部看清,提高效率。

Image title

自动整理规范


自动将页面中使用的颜色、文本样式等整理为设计规范。告别手工,自由自动。

Image title


交互原型,动效迷人

 

谁说的UI设计师做不出逼格满满的交互原型呢?交互原型轻松搞定,开发一眼就能看懂!

Image title


以上是摹客iDoc制作的图,使用了一小部分摹客iDoc的特色功能,你也可以自己去解锁更多哦。


为了更好的体验iDoc,有福利提供 ——【免费升级到协作版】,不仅设计师可以用,你的产品团队,产品经理啊,攻城狮啊都可以加入进来协作,效率加速提升,快到没朋友!


领取福利:只需前往https://idoc.mockplus.cn/get-idoc,输入升级码free即可哦。



大赛走一波~


摹客设计大赛邀您来参赛,主题是这做一款你心目中的社交APP。


1. 【大赛福利】报名赠送价值199元设计大礼包;

2. 【大赛奖项】万元大奖:iMac一体机、Apple Watch Series领回家;

3. 【大赛评委】30余位设计大V亲自点评。

报名请前往:https://idoc.mockplus.cn/ux_2018


欢迎大家积极参赛,赢取大奖~









全部评论:2条

  • 解语楠碎木

    2018-12-25 09:21

    @我不是柯基: 没认真看文章哦,第10个例子后面就是啦,链接直接给你https://img02.mockplus.cn/blog/attachments/20%E4%B8%AA%E5%9B%BD%E9%99%85%E7%B2%BE%E7%BE%8E%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.zip 推荐试试idoc自动整理规范,https://idoc.mockplus.cn/get-idoc/?hmsr=trista,输入free自动升级体验更好哈

  • 我不是柯基

    2018-12-24 16:20

    在哪儿下载?

  • typy

    2018-09-03 14:32

    广告刷屏???

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票