【近期工作】iUAP Web规范再议

近期的工作围绕新产品的设计和以往规范的适应性展开,除了要满足产品需求外,设计上要顾虑原有的规范内容,并在不能满足的情况下拓展前规范的适用性。故而在研读UAP部门内部规范时亦与同事进行了若干讨论和思索。

字体设置

原规范字体设置为:

font:normal 12px/1.5 Arial,微软雅黑,宋体

仅就font-family属性来说,知乎是这样定义的:

font-family: ‘Helvetica Neue’,Helvetica,Arial,sans-serif;

门户站(如网易)是这样设置的:

font: 12px/1.5 \5b8b\4f53,Arial,sans-serif;

(其中\5b8b\4f53是宋体的unicode写法,为了解决某些版本浏览器解码问题。)

其他门户网站也大抵如此,宋体为首选字体或是直接不设置中文字体,结合之前在知乎上的问答,关于雅黑在12字号下的显示鄙陋确有其事,由此可以推导出阅读性网站以宋体为主的设计原因。然而为何在极客公园和36氪等浏览性网站使用雅黑字体?推测是一来这些科技资讯型站点的单篇沉浸时间较短,用户往往飞速浏览新闻,二来雅黑字体更突出的设计感对重度互联网用户来说更加舒适(毕竟他们忍受了宋体太久),并且,在雅黑的基础上,这些科技站也使用了更大的字号和更大的行高(1.8em)使段落更加易读。

总结:对于需要段落阅读的产品,尤其需要用到小于14px的字体时还是不得不选择宋体,仅有在能够做出更大字号更大行高的设计时才可能使用雅黑字体。

是不是我们将雅黑作为规范字体是错误的呢?当然也不是,尤其是在WEB工具型产品中,工具大量以标题/按钮/短内容为主要元素的产品还是可以使用雅黑的,此特性也解释了微博中使用微软雅黑的原因。之前的产品规范应用的也是这个逻辑,我们在应用规范的时候自然也要考虑规范制定的场景。

对于英文字体来说,windows下的Helvetica字体渲染没有经过hint并不如arial字体,而Mac下却更宜选择Helvetica,因此对于两者的前后顺序也宜根据产品本身更重视那个操作平台用户来决定了。

最后,在知乎上:如何保证网页的字体在各个平台上显示最高质量的黑体?中是给出这样的结论的:

font-family: ..., "Hiragino Sans GB", "Microsoft YaHei",
             "WenQuanYi Micro Hei", sans-serif;

下拉菜单

在原规范中,用户名部分的下拉菜单使用了居中对齐的方法,在及少量菜单的情况下或许尚可,但考虑平台一致性和拓展性,下拉菜单更宜选用左对齐的方式进行处理。

工具栏

在我们刚刚接触设计时,亲密性,对齐,对比,重复,作为排版的四大准则被牢记,在旧的规范中,工具栏的设计(即使是隐形的)采用了较大的随意性,然而作为对下方内容的操作,亲密和对齐是两个基本的处理方法。

卡片复选

原规范并未处理多选情况,据说新的规范为了适应IPAD端操作,将卡片复选做了全卡片热区,右上角标记状态的移动端移植效果。

IPhone 6 相册“点击选择按钮→选中多张图片→选择操作”

Nexus 5 相册“长按相片→选中多张图片→选择操作”

这也是我在重设计BQ地图的思路如下:

多选

然而google keep的处理方式也吸引了我的注意,将第一部的引导操作取消,通过鼠标经过时边缘的复选框来直接启动复选,即符合习惯,又保持了精简。

keep


后记:比建立规范更重要也更困难的是规范的维护,需要不断应对变化的需求和设计潮流,树立设计规范能够从无到有的建设公司的设计品牌和设计管理办法,之后也会花费足够大的维护成本。这个从无到有的过程,可以通过各个产品线不断的设计对话,也可以通过一个强有力的主设计来完成。更重要的是定性,严谨的定性要面对不断而来的非议和挑战,非严谨的定性(设计指南)会面对架空规范的问题,比规范本身更重要的组织架构和设计方法才会成为决定性问题。