设计中会用到 UI 设计规范吗?

我以前在某大公司工作时,有位牛人提供了一份软件界面设计规范,震的我目瞪口呆。可惜那个时候小,觉得那东西没用,所以没有保存。 最近想改进公司的界面设计,首要就是制定公司的界面设计规范,在网上竟然没搜到,问了周围圈子的人,都说没这个东西。 在智城和猪八戒挂出英雄帖,接单的都说可以可以给我们设计一个界面,但是,说到规范,都表露出茫然。 我的问题是,是因为国内UI设计还没有规范到提供规范,还是我找到的人都还…
关注者
1263
被浏览
94624

25 个回答

呵呵哒,设计过程中绝对会用到规范,特别是在一个UI teamwork的时候。之前去面试很多公司的ui,我上来就可以打包票说,你们这个ui是好几个设计师做的吧。对方尴尬的说,是不是挺乱的。我就在心里呵呵哒。

我之前一直是在创业公司做独立设计师,说好听点是独立设计师,难听点,就是唯一的设计师。创业型公司,UI UE你要全包。但是我还是很有追求的在每个版本改版之后,更新设计规范。我的设计规范没有大公司那么高大上,只包含了字体选用,配色运用,ui kit这些东西。我当时做这个设计规范,纯粹只有两个原因:
一,我要设计的界面太多了,而且产品迭代很快,来不及一个个界面标注重复性的东西,于是我就出一个字体运用规范,让开发看一个文档就好了。有个设计文档,可以减少很多设计与开发之间的沟通,虽然我原来是左手ios 开发,右手android开发的UI小公举,但即使是这样,我也不想把时间浪费在重复的标注,没有意义的“ 小公举,你这个字体是多大,什么颜色”这样的问题上。后来给开发团队引进了zeplin,安卓小伙伴持续用着,ios开发,一直看着我的sketch源文件,在我教会开发sketch后,我连字体规范都少写了很多。

二,我把这些东西一个版本的整理迭代好了,哪天来一场说走就走的旅行,没有交接成本,即使公司找不到设计师,开发哥哥直接用这个规范,就可以分分钟上岗党设计师了。直接甩这个规范的sketch源文件就可以了。

事实是,在一年之后,我很感谢一年来的我如此的机智,因为我确实来了一场老娘不干了的裸辞,公司在很长时间也没招到合适的设计师。再在就业的时候,很多公司对你的整理的设计规范兴趣远大于你作品兴趣。我分析啊,主要他们可能他们心里觉得,一个设计师撑起的一个公司,居然还有设计规范。呵呵哒,你们肯定也想看我做的渣规范系不系。

附我做的规范一部分。


纯粹是为了节省空间,拍的这么密集。嗯。因为程序员的屏幕大多都很小。。不像我们大设计师,23寸,27寸高清无码大屏幕。心疼还要接渣显示器的程序员三秒。。。

我一般就写规定的用色,然后图标的区域规范,包括切图区域,点击区域,具体的规范是放在ai的图标规范里,有更详细的视觉区域,切图区域,点击区域规定等。还有诸如圆角,像素大小规定等。我总是在幻想,公司哪天招个设计师跟我一起画画图标。

是的,这些规定从我上岗到快离职,只有我一个设计师看到了。其他看到的都是程序员,但是我依旧非常肯定它存在的必要性,让我不用每次更新,都要翻旧的设计稿,卧槽,我上次用的这个是什么颜色?有人说,可以用色板记录啊,但是我的色板会把中间配色过程中使用的也保存下来,sketch的色板不像ps,可以标注备胎1号色,2号色。还有,设计师做视觉规范,可以帮助自己做个人沉淀,这个对自己的好处绝对大于对公司层面的好处。

——————————————感谢大家赞同的分割线,来更新一发——————————-

很多人评论私信问一些规则的详细事宜。我参考了很多大厂的一些设计规范,比如百度,淘宝,jd。还有一些类似airbnb之类的,综合来定制适合自己团队,自己app的规范。统一来说,规范出了包含色值,文字,之外当然还有icon规范,来新司制定新的设计规范就是把icon 的圆角建议规范都定制好了。下面简要的说明一下各规范建议规定的地方:

色彩体系:
高亮色,文字色,分割线色,背景色,辅助色,normal ,pressed,disabled的状态都是附加了比如10%的#000,10%#ffff之类的。

文字体系:
文字大小,line-height,所以字体大小与line-height的比例关系建议保持一致,如果存在小数点,可以四舍五入。比如:28px字体大小的line-height是40px。那26px的字体,line-height可以取36px,比例是1.4。
中文字体字形,英文字体字形,所用到的手绘字体等。

icon体系:
线性粗细,建议圆角大小,比如:

还有普适性icon的视觉区域大小,切图区域大小。比如我常用的视觉区域大小是44px, 切图区域大小是60px。icon的整体风格建议。这点可以参考md的。规定了各种。。。可以适当参考就行了。google.com/design/spec/

button体系:
按钮的常态高度,圆角大小。不同按钮状态的alpha值统一等。按钮的线型,按钮内字体大小等。按钮的长度延伸适配等。可以采用sketch插件 Dynamic buttons,可以自适应按钮大小。

其他UIKIT体系:
1.nav bar统一,特别是有类别切换的。
2.文本框
3.单一列表,组合列表
4.bar 体系,高度,透明度,投影等。
5.popover体系,弹出框的宽度,背景灰度值,文本规范,按钮规范等。
6.配图规范,风格选图建议(为了保持app的格调一致性)
7.情感化提示规范。
8.插画规范。
还有好多,不一一例举了。

还有另外好多问zeplin的事情的朋友,官网是zeplin.io.可以直接将sketch的画板导入到zeplin,就可以直接查看相应的色值,间距,大小了。可以根据不同的平台切换显示重要的是他会帮助我们整理相应的一些规范。

当然我这里是重合了好几个文件,所以有两个高亮色。见谅。

还有最近新发现一个帮助建立品牌视觉设计规范的一个网站Create Free Brand & Design Style Guides with Frontify Style Guide,仔细研究研究,还是挺好的。他默认的排版就挺美的了。

想到了再继续补充吧。感谢大家。么么哒~




——————————————写完一份新文档的分割线—————————————————

最近针对app的android端 新写了一份设计文档,做了一个设计组建化,文档的阅读对象从单一的设计师变成了设计师,研发,产品经理。文档的涵盖内容就不止停留在设计层面,更多从实现角度出发,如何保证设计在设备上的还原度。直接贴部分文档吧。


这也是第一次针对android也一个设计规范文档,需要提醒一下设计师,在不同的平台,适配的习惯不同,比如android平台很多采用的是auto layout的布局方式,所以很多时候,规定的是固定的间距,而不是整体高度,宽度。iOS则很多时候是固定一个高度,宽度,不同设备适配的时候,标示比例。
我知道楼主想说的其实是界面的视觉规范,但在这里我想延伸一下,把 UI 的含义泛化为 User Interface(其实也是它原本的含义)。

Use Interface 规范其实包含两部分,一部分是交互规范,一部分是视觉规范。

其中交互规范比较特殊,因为又分为平台规范和应用自身的规范。然而,在目前阶段,业内更加强调的是平台规范,比如说 xxx 组件的设计得按 xxx 平台来做啊。然而,我并不太 care 这点。因为在我看来,平台规范归根结底是为了确保产品的易用性,也就是说遵循平台规范不是为了遵循平台规范,而是为了用户能够在没有任何学习成本的情况下懂得如何使用产品(相关回答:Android 设计指南要求 Tab 不可以放在底部,为什么国内大多不遵守? - 郑坚义的回答)。

然而,如果所有的产品都严格地遵循各个平台的交互设计规范,那做出来的东西会显得非常的枯燥和单调。

传统的设计其实非常强调创新和个性,但 UI 设计对这一块的关注却不够,甚至有点遏制的感觉在里面。而我的观点是只有适当地打破规范,才能创造出让人耳目一新、或者说有格调的产品。所以,在加入现在的公司之前,我有跟 CEO 沟通,希望产品各个页面的布局和交互方式能够依然由原来的 UI 设计师主导(她非常优秀,之前的产品格调就是有她打造的,我希望能够传承和优化),而我只是起到一个把关的作用,也就是一些明显错误的设计我才会否决掉。

但千万记得,应用自身的交互规范必须得遵循。否则会乱套,不仅起不到有格调的作用,还会给人一团遭、不专业的感觉。


至于视觉规范这一块,我认为是非常有必要的。就传统的设计而言,是有 VI 规范一说的,也就是说,各个设计的元素必须严格遵循规范,这样才能给消费者传达统一的品牌形象,从而潜移默化地进行品牌渗透。

对于互联网产品的视觉设计而言,也是如此。只是在团队还非常精简的阶段,可能不需要产出专门的规范文档,因为 UI 设计师就一个,只需要跟他传达视觉元素必须符合规范的原则即可。然而,当团队逐渐扩大,要吸纳新成员的时候,相关的 UI 设计规范文档必须就位。否则,要确保视觉的一致性(实际上是品牌的一致性),所付出的沟通成本将会非常大。

这其实跟产品文档的道理是一样的,在企业初期,产品设计师只需要简单的文档或者通过口头沟通,就能和 UI 设计师、工程师达成一致,实现想要的功能。然而团队不断壮大之后,要使新人了解产品的现状,必须需要一个文档,否则你得不断地重复介绍相关的功能,这是非常累人和低效的。

至于楼主所说的在智城和猪八戒接单的场景非常好理解,因为这种外部就是一锤子买卖。你做出了设计方案,如果没有相关的设计规范文档,客户往后自己维护的时候可能就会非常混乱,大大降低了产品的视觉体验,给人一种不专业的感觉。