您的位置:365bet在线投注官网 > 心理学 > 如何建立一套完整的UI 设计规范

如何建立一套完整的UI 设计规范

发布时间:2019-09-10 21:08编辑:心理学浏览(177)

      前几个月都在陆陆续续做这件事,中间做着做着就焦头烂额了,遇到很多一时想不清楚的问题,直到最近才产出一份初具雏形的文档,不过在规范文档没有产出之前就已经在印象笔记中边设计边梳理所有的元素以保证界面的一致性,这二天正好在知乎上看到这个话题,就顺道来吐吐撰写设计规范过程中的一些想法~

      首先需要想清楚这份规范文档是给谁使用,偏视觉和偏前端的规范并不一样,本来自己做之前是考虑给设计师查阅,但编写的过程中又觉得应该让前端工程师也能使用,可那样就意味着得包含相关样式的代码,且是网页格式,思考再三还是决定先专注于视觉设计师这个角色,让团队中不同的设计师能够产出设计语言一致的界面方案为先。而类似于JJ Ying分享的Lonely Planet或Purple: A UI kit for Herokus web interfaces这种偏前端的样式库我认为可以让前端工程师去建立。

      然后我也认为一套细致的设计规范对于更新迭代快速的互联网产品来说性价比不高,很可能好不容易完成了但又要面临新版本迭代,我的解决方案是出一份像Material Design 中文版式的Style Guide+UI Kit+标注图搭配使用,这也是受到台湾UI设计师Akane Lee的启发,可参考她的博文 UI 设计师应该要会写的文件

      pdf格式,主要作用是指南。用于说明色相、字体、字号、分隔线、间距等这些影响到风格形式的元素如何使用,如何建立层级,为了直观,需要适当的配上标注图,并说明界面中各组件的作用和使用场景。组件无需标注,从UI Kit的psd文件中提取即可。

      png格式,主要作用是参考。Style Guide中不会包含方方面面场景的情况,如果设计师捉摸不定逻辑上的一致性和合适的层级设定,可以参考更多以前交付给前端工程师的页面标注图,我向设计师传达的一个原则是:除非有更好的方案进行全局替代,否则应尽量使用之前已应用的方案,避免每次迭代都出现新的方案造成不一致问题的放大。

    转载请注明来源:如何建立一套完整的UI 设计规范