上一篇讲到了作品集中的图标问题 (《图标设计细节不够?你需要掌握的10条关键原则》) ,今天这一篇会给大家讲到UI界面中的细节问题。希望通过今天这篇文章,能够让大家自检作品集中的界面问题,并找到一些可以快速执行落地的优化方向。

UI界面细节不够?你需要掌握的17条关键原则

初级与高阶设计师的区别,有时候不在于说整体大的布局上有什么差别,其实往往就在于文中提到的这些小细节点上。在腾讯,一个界面中的细节,往往会抠到像素级,大1px或者小px都可能要出几稿,调优后也确实会有不一样的感觉,所以一定要重视起来呀。

UI界面细节不够?你需要掌握的17条关键原则

这篇文章对初学者来说特别有用,但我还是建议所有设计师都应该把这些设计基础牢记在心,无论是否有经验。本文更偏向一些基础性的设计原则,而这些原则在实践中却往往被人遗忘。希望下面这些原则对你的设计能起到一个进阶调优的作用。

(彩云经常在一些工作多年的设计师作品中,发现他们同样会在这些基础问题上犯错,所以一定不要轻视这些基础。常挂在嘴边的,所谓的细节也就是这些了。)

UI界面细节不够?你需要掌握的17条关键原则

2. 文字粗细

在使用细体和极细体字体的时候要格外注意。中细体字可以用,但要看具体的字体细到啥程度。如果你做的产品最终会被用户在屏幕上看到,那么最好不要使用细体和极细字体,因为它们非常难阅读,在某些屏幕上甚至会造成半像素模糊的效果。

UI界面细节不够?你需要掌握的17条关键原则

3. 标题和正文字体大小

我们来谈谈网页排版。标题的级别有6个(h1-h6)。首先你应该确保你的项目中的标题级别不超过四个,并控制好它们的逻辑和一致性。一个网站或着陆页的最大标题(可能出现在主页面的第一块)可以随心所欲:目前的趋势是鼓励有表现力的排版。但是,确保你的标题的其余部分不要太大,因为太大的文字和太小的文字一样难以阅读。

现在说下正文。浏览器的默认设置(以Chrome浏览器为参照),会以16px大小显示每个文字。这个大小阅读起来是相当舒服的,但我倾向于主文字用不小于17px,附加文字用14px。保留12px作为最小的尺寸,而较小的尺寸由于视力问题或显示器不好而变得几乎无法阅读。

记住,要避免近似的尺寸,不要在同一段中使用16px和17px,这样会给产品的外观带来混乱和视觉上的不协调,可能会让人误以为是错误。

4. 行高

很少可以直接利用默认行高。通常情况下,必须比默认值稍大一些来提高可读性。这对于大的文本块尤其如此:博客、文章、网站或移动应用的信息块。同样的方法也适用于标题:确保字母上下不会互相碰触。

UI界面细节不够?你需要掌握的17条关键原则

5. 内容的层次

应使用加粗来突出显示文本的重要部分,包括标题、链接和按钮,有时也包括文本中被强调的部分。但如果所有文本内容都被加粗,就会变得不清楚该看哪里,分不清哪些部分更重要。内容需要有一定的层次性。

UI界面细节不够?你需要掌握的17条关键原则

6. 文字对比度

在设计中要特别注意文字的颜色。它应该有足够的对比度,这样文字在任何类型的显示器上都可以易读。这对于经常使用浅灰色的输入字段中的占位符尤其重要。

UI界面细节不够?你需要掌握的17条关键原则

UI界面细节不够?你需要掌握的17条关键原则

2. 元素层级

边距有助于从视觉上确定一个元素是否属于另一个元素。让我们考虑一下新闻网站上的一篇文章的布局。假设它由一张图片、一个标题、3-4行预览文本和发布日期组成。标题应该与内容成为一组,日期的边距应该比标题和文字之间的边距略大一些。最后,图片应该和标题-文本单元的日期一样,甚至更远。不明白么?还是看看下面的图片吧。

UI界面细节不够?你需要掌握的17条关键原则

3. 少即是多

总有一个客户或者经理要求所有的信息必须塞进一个区块或者一张界面上。所以,标题、电话,以及整个菜单、优惠信息都要塞进去。还有,别忘了一个大大的LOGO。我不怎么会谈判,也想不出如何让他们轻易改变主意的办法。

但至少你可以这样说:用户一次接收的信息越少,他就越容易采取行动(例如,打一个电话)。循序渐进的信息接收,可以确保更容易、更愉悦的用户体验。不要让用户在识别你的界面布局时遇到困难,而一堆元素堆积在一起是很难产生美观愉悦的体验。

4. 不均匀的边缘边距

如果你在制作海报、banner或我们最喜欢的卡片时,要注意边缘的边距。如果你以经典的从左上角到右下角的方式来布局内容,那让顶部的边距比左侧的边距稍大一点,看起来会比四面均匀的边距更加舒服,美观。

UI界面细节不够?你需要掌握的17条关键原则

UI界面细节不够?你需要掌握的17条关键原则

3. 图标和配图

凡是可以矢量的东西都应该矢量。所有的图标,箭头和logo都应该以SVG格式(iOS开发的PDF格式)交给开发者。PNG图标边缘模糊,看起来很糟糕,尤其是在视网膜显示器上。此外,用矢量图占用内存也较少。

4. 关于图标

如果你正在为一个网站或应用开发一套图标,请确保所有的图标都属于一个 “家族”。这意味着相同的笔画宽度,相同的边框半径。检查一下,确保每个图标都适合在相同大小的正方形中,并且有相同的视觉重量。如果有些图标有圆圈,确保这些圆圈的直径相同。图标应该有一致的风格。

UI界面细节不够?你需要掌握的17条关键原则

UI界面细节不够?你需要掌握的17条关键原则

2. 界面尺寸

在开始设计一个手机APP之前,一定要先向开发者询问一下屏幕尺寸。通常情况下,iOS的屏幕尺寸为320px,Android的屏幕尺寸为360px。虽然在移动APP上或多或少都会有明确的预期,但网站设计可能会有一定的挑战性,因为它将在多种设备上展示。下面这种情况在我自己做前端开发的经验中非常常见:提供的布局是为巨大的显示器做的。块之间有400-600像素的边距,巨大的字体大小,奇怪的网格。

好在我也是一个设计师,我自己也可以通过调整页边距和大小来解决这个问题,让它在任何屏幕上都能好看。然而,前端开发人员通常没有设计背景,会完全按照提供给他们的设计方式来实现。因此,在普通的笔记本电脑屏幕上,元素会过大。需要注意的是,一般的笔记本电脑屏幕的垂直宽度限制在700px左右,所以要尽量将一个模块放入这个显示范围内。

3. 内容填充

重复的示例文本放在设计中看起来会很廉价,不专业,所以应当避免使用。它只会让人觉得你懒得得去做一些像样的内容。此外,现在不再需要自己创建,有一堆Sketch和Figma的插件可以自动填充内容。内容尽量不要重复,哪怕只是为了演示的目的。放上不同的图片、标题和不同长度的预览文本,效果看起来会更好。

每条规则都有其例外。所有给出的建议从来都不是教条,总会有不同的情况。但在大多数情况下,这些建议会帮助你提高设计水平。希望这篇文章对你有帮助, 谢谢你的阅读。

#相关阅读#

《图标设计细节不够?你需要掌握的10条关键原则》

原文链接:https://uxdesign.cc/how-to-improve-your-product-ui-designers-checklist-58510947e6ab

原作者:Anna Sh – UX Collective

翻译:Scott,目前是莫纳什大学交互设计在读,设计小透明一枚,对设计,科技和生活充满热情。公众号:彩云译设计

本文由 @彩云Sky 翻译发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议




阻力设计在产品中的应用

阻力设计在产品中的应用

阻力是指物体在流体中相对运动所产生与运动方向相反的力,不仅在自然间中常见,在互联网中也广泛存在。本文作者从五个角度,深入分析阻力设计在产品中的应用,希望对你...

2020-06-18
如何成为一个合格的数据架构师?

如何成为一个合格的数据架构师?

数据架构师在互联网行业中是个很重要的职位,是企业数据资产最重要的“奠基者”。那么,如何成为一个合格的数据架构师呢?本文作者基于自身经历,从三个方面展开介绍,推...

2020-06-18
倒推“抖音短视频”APP产品需求文档

倒推“抖音短视频”APP产品需求文档

文章是倒推“抖音短视频”APP产品需求文档,但由于作者是第一次写需求文档,所以仅对核心需求进行了需求分析与说明。一起来看看~ 目录: 一、文档综述 1.1文档属性 1.2产...

2020-06-18
微信“拍一拍”,真的是一个没什么用的功能吗?

微信“拍一拍”,真的是一个没什么用的功能吗?

昨天微信上线了“拍一拍”功能,用户点击2次头像,会产生头像抖动,震动反馈,且在聊天框中显示“XX拍了拍XX”。 这个功能推出后,很多微信群都在疯狂拍一拍,引起了一波拍...

2020-06-18
数据大屏设计师,我不信你没有这些困惑(上)

数据大屏设计师,我不信你没有这些困惑(上)

从事互联网行业的人,每天都在接收新知识,时常也会有迷惑的时候,尤其是数据大屏这样比较少有人踏足的领域。本文作者以自身经历出发,对数据大屏设计提出了自己的一点...

2020-06-18
客户关系管理的15个模型总结(下)

客户关系管理的15个模型总结(下)

对于ToB产品,仅仅基于用户需求来设计产品架构是远远不够的。B端产品服务的是有着几年,甚至几十年管理积淀的企业,必须依靠一定的理论知识来支撑系统的设计规划。本文...

2020-06-18
B端产品设计:价值主张与需求对应的价值

B端产品设计:价值主张与需求对应的价值

B端产品的需求来源于场景,产品经理通过满足客户需求从而产生价值。因此,SaaS产品经理面对扑面而来的需求时,应当更清晰理解并评判需求的价值。 01 2008年,著名商业...

2020-06-18
以知乎为例,探讨未来产品设计的几大变化

以知乎为例,探讨未来产品设计的几大变化

知乎作为一个典型的问答社区,它本身反映了内容社区产品的很多典型问题。本文以知乎为例,探讨社区类产品未来发展的一些变化,对内容社区感兴趣的童鞋不要错过。 前段...

2020-06-18
如何用产品思维打造线上课程?

如何用产品思维打造线上课程?

如何用产品思维来给自己打造一个线上课程呢?本文从市场调研、课程开发、运营推广、成交这几个方面分享如何打造自己的课程,希望对大家有所帮助~ “地摊经济”重出江湖,...

2020-06-18
「武侠连载」营销中心设计——优惠券

「武侠连载」营销中心设计——优惠券

优惠券是常见的一种营销推广的方式,但是你真的了解它吗?本文作者以武侠故事的形式,对优惠券展开了生动的分析,对优惠券感兴趣的童鞋不要错过哦。 (武侠情节接上文“...

2020-06-18
金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

本文作者从实际工作实践出发,结合案例等分享了电商金融支付财务融合中的基本概念和相关原理解析,包括:订单、账单、交易流水和账知识解构,供大家一同参考和学习。 ...

2020-06-18
关于卡片设计的分析与思考

关于卡片设计的分析与思考

卡片是APP常见的设计形式,它既有好处也有弊端,因此需要根据场景和内容确定展现形式。本文从四个方面对卡片设计展开分析,推荐给对卡片设计感兴趣的童鞋阅读。 卡片是...

2020-06-17
内容型产品中,付费会员功能如何设计?

内容型产品中,付费会员功能如何设计?

付费会员制度让用户预付会员费,将钱留在平台,那么未来一定会有消费行为,那么会员制度要如何设计,才能激励用户付费呢? 01 为什么要做付费会员? 讨论这个问题之前...

2020-06-16
文字社区是否可以拥有弹幕?

文字社区是否可以拥有弹幕?

从社区产品的角度来思考,弹幕功能对于内容生产方,内容消费方以及平台方而言各自有什么意义?图文内容社区是否有机会拥有弹幕呢?如果可以发弹幕,用怎样的形式呢?本...

2020-06-16
FMS财务系统收支结算总结

FMS财务系统收支结算总结

本文按照FMS收支结算划分,结算流程分类及各系统交互,财务系统内部结算基础能力,收支结算整体结构的顺序来依次介绍,总结财务系统收支结算的结构,和一些作者的个人思...

2020-06-16
如何迅速提升用户好评?试试这三种方法

如何迅速提升用户好评?试试这三种方法

小编推荐:如何提高一个产品的用户评分,改变大家对这个产品的印象呢?本文作者给大家介绍了三个概念:用户体验地图、峰终定律和服务蓝图,并详细解释了该如何使用这三...

2020-06-16
对工具型产品易学习与易使用的思考

对工具型产品易学习与易使用的思考

小编推荐:易学习是指怎么让新用户的学习成本降低,能够很快地掌握产品的使用,它的前提是足够简单和容易理解。而易使用是指,如何让用户快速、高效地完成一项任务,达...

2020-06-16
比对象还懂你!推荐算法为啥这么准?

比对象还懂你!推荐算法为啥这么准?

信息过度和广告过多的社会中,推荐算法的使用也就显得理所当然,但是它是如何做到了解用户的呢?本文从用户画像的定义和设计出发,结合实际案例,深入浅出地阐述了基于...

2020-06-15
B端平台产品需要培养的4种意识

B端平台产品需要培养的4种意识

对于许多刚入行不久的产品经理来说,B端平台产品是比较有难度的一项工作。本文作者基于自己的工作经历,提出了四点关于B端平台产品需要培养的4种意识,希望对你有帮助。...

2020-06-15
广告系列:保留价

广告系列:保留价

在一次拍卖中如果所有买家的报价均小于卖家的估价时,则拍卖品不出售由卖家保留,此时卖家的估价就是保留价,也叫底价,全称市场保留价。对于卖家来说,保留价的设置保...

2020-06-15