想进步UI界面质感？15个版式设想技能！

123456833

来历：知乎
在做UI界面的时辰，很多时辰我们需要去看很多的产物停止竞品分析、市场调研，非论是交互逻辑还是设想细节，很是占用设想师的时候本钱，在这里我为大师分析和整理了常用的一些实战设想小技能，帮助大师节省一些汇集材料的时候，希望帮助设想师们进步设想品格和效力！
1. 版面中的空间关系元素

在界面版式设想中，可以应用平面设想中的结构想考方式去了解UI界面中的空间元素结构的散布对应，下面以消息类客户端为例停止页面元素分析



2. 内容过量处置方式

为了让阅读更有用，可以采用分歧题目规格、分歧编排比例或分歧色底停止条理上的分别



3. 模块化朋分方式

线条朋分和空间朋分的区分，朋分线给人一种榨取感，而空间的朋分给人加倍轻松的阅读感受



4. 若何改变版面图版率与视觉空间比重

我们来看下qq音乐会员中心页面的设想，分歧的品级对应分歧的色彩卡片，应用色彩添补布景吸援用户增加界面专属比重，起到账户切换视觉的指导感化，是一个很好的设想思绪



5. 按照主题挑选配图及配色计划

我们在做设想时很多时辰会去追求「高级灰」、「高逼格」亦大概是「怪同性」，想进步UI界面质感？15个版式设想技能！实在更重要的是要合适产物的调性和产物工具人群，不能一味的去追求自我的「设想追求」，比以下面的2个案例就很好的表达出了产物的调性，明白的告诉用户我是做什么产物的，为什么样的人群去办事的





6. 画面焦点

暗示在画面中相对加倍突出的内容，让用户在阅读产物时可以第一视觉捕捉用户的眼球；焦点是相对的，在大页面中可所以焦点，在小模块中也可以是焦点
页面中焦点
采用模态结果的弹窗给人以不成轻忽的方式出现



模块中的焦点
我们可以看到在优酷的「我的」页面信息以卡片的形式显现，而会员采办进口则以一种带有色彩偏向性的色彩设想，表达了其重要性；还有优酷的首页精选的卡片中「全网独播」等角标的设想在每一个模块中都很抢眼，很轻易就可以捕捉到用户的视觉重心；苹果手机自带日历中当前日期的红色选中态以绝对的焦点方式设想显现给用户。



界面平衡
平衡是版面元素高低左右比例都比力适中，给人一种稳定战争衡的视觉感受。平衡的版式设想可以让画面稳定不会发生高低比重失衡的现象，平衡的比例构图使人愉悦，而不服衡的设想会形成不稳定的分离留意力。视觉平衡是指在设想中的负元素和正元素比例相对合适，设想师的感化就是发挥元素的视觉重量的构图平衡。



7. 字体的挑选

很多时辰有的设想师在做界面时辰都希望全真个字体可以同一，最好的法子是嵌入笔墨包，但给代码包增加了负担，所以我们需要去取舍。很多国产安卓手机都有自己的系统字体，要现实调研真机结果（如差别不大非必须嵌入字体）苹果和安卓常用字体以下



8. 有节奏感的版式设想

节奏感的设想表示形式有很多种，比力常用的是在同一的款式节奏中穿插分歧的模块来使得页面的节奏感加倍的腾跃和灵活，比如Medium、网易云音乐的版式设想中都应用了节奏感的设想方式



腾跃的节奏感给人以活跃和时髦现代的感受，不会让画面全盘单一且死板的显现给用户；灵活的节奏感也为很多付费内容供给了很好的显现方式。



9. 常用版心边距间隔整理去

分歧行业的边距巨细分歧，内容信息较多的笔墨类和购物类产物的边距相对较小，而很多以图片、视频和音乐为主的产物相对较大，我为大师整理了常用参数，方便设想师们检察和参考，不必每次都需要丈量很多产物



10.多端思维版式设想，合适平台特征的版式设想

我们发现很多产物移动真个版式设想与Web端网页的Feed流版式设想结构会有分歧，假如是你你会这么排版吗？



实在这样的版式设想是有缘由的，第一是移动端更多时辰以笔墨题目作为吸引人的视野，而图片在手机端显现较小，所以很多图片的清楚度和内容显现都不够清楚，第二和手机端分歧，网页端图片较大，可以很好的起到其自己的感化，想进步UI界面质感？15个版式设想技能！也正由于网页真个显现空间较大，所以当题目比力短的时辰，假如还依照移动真个结构，那末题目和图片的中心会发生空缺，形成视觉的阅读的不联贯，这就是为什么分歧平台版式差别化的缘由。



11. 色彩在版式中的对照顾用

其中首要包括典范的3种-纯度对照、色相对照、明暗对照，界面设想师假如把握了这3种常用对照手法，可以在界面设想中灵活自若的制造出不错的色彩对照
纯度对照
我们可以看到此案例中进度条部分，采用了低纯度的蓝色和高纯度的蓝色和绿色制造色彩对照构成条理反差，让画面很是的有活力



明暗对照
这张图片中的主布景色彩左侧为红色，右侧则调剂成了黑色，经过色彩明度的对照可以表示出全部界面的条理感，使得整体的感受显现出繁复和高品格的气概（现在很多产物都已经适配了深色形式，可以为用户显现出Light和Darkmode两种用户体验）



色相对照
整体界面的主色彩不丢脸出，是以绿色为根基质停止大面积应用，橙色在绿色中的应用很是鲜明，构成激烈对照，让用户很是清楚的晓得此为强指导进口



12. 图片版面率的有用操纵

我们在网上购物时，更多的是经过图片的第一印象来获得产物，所以图片在购物网站的比例都做到尽能够的合适自己的产物特点才能让版式设想更优；常见的图片尺寸有16:9、4:3、3:2、1:1、2:1、1:0.618（黄金比例），比如淘宝、京东的产物图片，在有限的空间内，正方形比例的显现则是最大的空间展现；优酷采用16：9的比例加倍合适人眼阅读视频的习惯等





13. 版式设想的软硬关系

在界面设想中，为了功用的突出大概版式的「活跃性」等需要，必须增加一些元素来衬托，此时无妨试试看以下几种软硬搭配的方式，可以起到不错的结果。
曲线与圆角
经过曲线与圆角的方式让界面变得加倍「温和」，比如以下产物的顶部位置的布景层的处置上，经过应用温和的具有弧度的线条，让全部画面都不那末僵硬了



突变与过渡蒙层
在界面设想中我们经常由于为了保证界面元素存在而又不失品格在图片上增加icon的方式，此时可以经过增加过渡蒙层的结果上增加icon既可以保证功用性又可以保证美妙度



直线加浮层
经过直线设想手法把图片和功用进口停止气概，是一种界限清楚的「僵硬」设想方式，让界面有一种刚硬、微弱的感受



14.「高级感」的版式设想

有一种高级感版式设想是操纵大留白与大卡片的版式设想的方式，让全部产物的气质凸显了出来，使得产物别开生面，比以下面3个产物，操纵卡片停止模块化设想，内容里凸显少许笔墨应用色彩重量对照和修饰性的语句，再配以高品格的图片，使得全部界面很是的具有高级感



15. 差别化版式设想方式

设想工作中，经常会用到的方式，首要目标是可以到达在同范例功用进口中，起到脱颖而出的结果，想进步UI界面质感？15个版式设想技能！比力具有典型代表的是增加动画结果大概增加角标等修饰性的设想，如拼多多的进口里增加了icon的动效和角标的动效设想在新人专享处出格应用红包的表示手法让元素都动了起来；在蘑菇街的进口位置对直播进口的头像停止了动效设想，增加视觉指导性



总结思考
以上就是我为大师整理的实战中常用的版式设想的小技能，希望可以帮助到大师，提升自己的设想才能和水平。
在此还是希望同学们给文章停止点赞加关注，留言区批评。让文章里的常识点可以有更多的角度融入到现实工作中。
感受不错的可以点个关注，天天更新设想技能。想要进修什么方面的可以再下方批评出来。
相关保举：

原文地址：https://zhuanlan.zhihu.com/p/180080278
免责声明：本帖内容由机械人自动收集于互联网，如加害了您的权益，请联系我们【E-Mail:cb@yoyodoc.com】 我们会实时删除侵权内容，给您带来未便，深感歉意！