建议收藏起来，方便随时查看～

  用户头像篇

关于用户头像这个板块的信息，如果采用昵称向上对齐，ID向下对齐的方式，两块内容就会很分散，不够聚焦。

如果头像和背景的颜色有一部分接近或者颜色一样，看起来会感觉头像好像少了一块，例如左图。为头像框添加描边，让头像更有整体性，还可以让文案对比更明显，页面看起来也会更精致。

当用户使用手机注册登录后，新用户没有头像的情况下，就要给一个默认头像，或者使用品牌IP形象，增加用户的品牌记忆。

  按钮篇

当一个页面有两个操作按钮时，可以区分出来一个最重要的按钮，引导用户更容易去进行选择。

当弹窗背景是白色的时候，会有点空荡的感觉，显得细节不够，可以为背景丰富细节，增加耐看程度。

当使用亮色按钮时，如果文字也比较亮，识别度就会很差。识别度对比一定要明显，亮底暗字，暗底亮字，画面一定不能出现识别模糊的情况。

登录板块，在用户未输入的状态下，登录/注册按钮呈现置灰状态，给人不可点击的感觉。输入信息后，激活登录按钮高亮状态，这样可以更清晰地引导用户操作下一步。

在这样的登录状态中，输入后与未输入的文字颜色需要给予一定的区分，这样便于用户区分哪些是填写和未填写的。在输入框可以增加对应的icon ，让整体感觉更丰富。

  卡片排版篇

关于投影的使用技巧，尽量选择颜色微浅或者和卡片颜色相近的投影。左图的投影使用比较深的颜色，会让画面太过沉重。

在图文式卡片排版的场景中，图片占比内容区域大，能起到突出重点的作用。

右图内容少的时候使用的是黄金分割比法则 0.618:1的比例。当内容多的时候，左图的布局也不错，瀑布流排下去能避免过于死板。

卡片上有过多的小标签时，可以加一个淡色的底，这样不会给人文案很多的感觉，整体视觉不会很分散，且层级更加分明，让用户更快速的找到自己需要的信息。

卡片背景直接排上文案，背景会显得很空，没有层次和细节。所以在做背景的时候，适当加上一些细节，就会显得耐看很多。

文案直接加在图片上时，要去对应地处理图片，例如给图片加一个蒙版，这样就不会导致文字的颜色和图片叠加在一起看不清的情况。

在做效果图的时候，有图片需要添加到设计稿中，尽量选择搭配起来比较和谐的图片，比如：饱和度、色相、亮度等尽量保持差不多的感觉，这样看起来会增加设计稿中的整体一致。

在有多个板块需要做成滑动的时候，需要留出一个被遮住的板块，代表还有内容可以滑动。在左图中，多个板块刚好做成一个宽度的内容，那么用户不知道后面还有内容可以滑动。

  文字排版篇

文字行间距的把控，对于较大的文字，行间距通常来说采用文字大小1.5倍的间距，文字较小时使用1.2倍的间距会比较合适。通常情况下，我会设置比1.5倍还大一些的间距，文字行间距太小不易于用户阅读，可适具体情况而定。

当主标题和副文案一样长的时候，整体会显得很呆板，且看着是一团字的感觉，这时就可以让标题和副标题之间产生长短不一的显示，就不会那么呆板。

在卡片上排列信息时，需要用到线条的时候，线太深给人感觉分割会很明显，把线的颜色调浅，有一点感觉在会比较好。

接着上面的信息排列，另一种方案是可以把线去掉，增加上下两者的间距，扩大留白也可以起到拉开信息之间的板块区分，让整个画面更加简洁和干净。

信息已填写与未填写的一个区分，已填写过的信息用深一些的颜色，未填写的信息用浅一些的颜色，这样利于用户更快速找到需要修改和填写的信息。

对于导航选中的栏目，选中的信息显示和其他的栏目对比要拉开。对比弱的话，用户一眼看不出来当前选择的导航栏目是哪一个。针对选中的栏目，可以根据品牌形象去做延展，建立品牌认知感。

面对内容过多的场景，分别将两组信息排在画面里，例如左图，会感觉整个画面信息很多，而且很分散。

在右边的排版中，加了一层背景包裹起来分别对应的信息时，会让信息层级更加分明。

图标和文字搭配的情况下，为图标加一个底色，可以让该页面图标的大小视觉保持一致，也会给予其重心的承载作用。

在需要突出信息的时候，左图的排版方式并没有达到需要突出的信息，看不到重要的信息。如前面所说，在做信息层级的时候对比一定要拉开，才能突出最重要的信息，让用户一眼get到主要信息。

文案信息板块的排版，当文案层级对比不是很明显的时候，如第三种，居中排列文案，会使阅读体验很差，视觉参差不齐的循环。当文案层级比较明显的时候，居中对齐也是一种比较好的方式。

当文案标题需要加硬投影的时候，亮字下应该加颜色较暗的投影，例如右图。如果亮字下面的投影颜色还是很亮，会出现标题文案识别不清晰，对比度不足。

最后

以上就是全部的UI/UX设计技巧，希望通过这些技巧能够让你对界面设计加入更多思考，打造更好用的产品！

另外推荐大家去「下雨天DS」主页查看更多内容：myandy.zcool.com.cn

慢慢来比较快，如觉得有帮助，

懒人目录

 一.前言

二.UI界面中实战版式技巧分析

三.总结思考

一. 前言

在做UI界面的时候，很多时候我们需要去看很多的产品进行竞品分析、市场调研，不论是交互逻辑还是设计细节，非常占用设计师的时间成本，在这里我为大家分析和整理了常用的一些实战设计小技巧，帮助大家节省一些搜集资料的时间，希望帮助设计师们提高设计品质和效率！

二. UI界面中实战版式技巧分析

1. 版面中的空间关系元素

在界面版式设计中，可以运用平面设计中的结构思考方法去理解UI界面中的空间元素结构的分布对应，下面以新闻类客户端为例进行页面元素分析

2. 内容过多处理方法

为了让阅读更有效，可以采用不同标题规格、不同编排比例或不同色底进行层次上的划分

3. 模块化分割方法

线条分割和空间分割的区别，分割线给人一种压迫感，而空间的分割给人更加轻松的阅读感受

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

我们来看下qq音乐会员中心页面的设计，不同的等级对应不同的颜色card，运用颜色填充背景吸引用户增加界面专属比重，起到账户切换视觉的引导作用，是一个很好的设计思路

5. 根据主题选择配图及配色方案

我们在做设计时很多时候会去追求“高级灰”、“高逼格”亦或者是“独特性”，其实更重要的是要符合产品的调性和产品对象人群，不能一味的去追求自我的“设计追求”，比如下面的2个案例就很好的表达出了产品的调性，明确的告诉用户我是做什么产品的，为什么样的人群去服务的

6. 画面焦点

表示在画面中相对更加突出的内容，让用户在浏览产品时能够第一视觉捕捉用户的眼球；焦点是相对的，在大页面中可以是焦点，在小模块中也可以是焦点

6.1 页面中焦点

采用模态效果的弹窗给人以不可忽视的方式出现

6.2 模块中的焦点

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

7. 界面平衡

平衡是版面元素上下左右比例都比较适中，给人一种稳定和平衡的视觉感受。平衡的版式设计可以让画面稳定不会产生上下比重失衡的现象，平衡的比例构图令人愉悦，而不平衡的设计会造成不稳定的分散注意力。视觉平衡是指在设计中的负元素和正元素比例相对合适，设计师的作用就是发挥元素的视觉重量的构图平衡。

8. 字体的选择

很多时候有的设计师在做界面时候都希望全端的字体能够统一，最好的办法是嵌入文字包，但给代码包增加了负担，所以我们需要去取舍！很多国产安卓手机都有自己的系统字体，要实际调研真机效果（如差异不大非必须嵌入字体）苹果和安卓常用字体如下

 9. 有节奏感的版式设计

节奏感的设计表现形式有很多种，比较常用的是在统一的样式节奏中穿插不同的模块来使得页面的节奏感更加的跳跃和灵活，比如Medium、网易云音乐的版式设计中都运用了节奏感的设计方法

跳跃的节奏感给人以活泼和时尚现代的感受，不会让画面通盘单一且枯燥的呈现给用户；灵活的节奏感也为很多付费内容提供了很好的呈现方式

10. 常用版心边距距离整理

不同行业的边距大小不同，内容信息较多的文字类和购物类产品的边距相对较小，而很多以图片、视频和音乐为主的产品相对较大！我为大家整理了常用参数，方便设计师们查看和参考，不必每次都需要测量很多产品

11. 多端思维版式设计，符合平台特性的版式设计

我们发现很多产品移动端的版式设计与Web端网页的Feed流版式设计结构会有不同，如果是你你会这么排版吗？

其实这样的版式设计师有原因的，第一是移动端更多时候以文字标题作为吸引人的视线，而图片在手机端显示较小，所以很多图片的清晰度和内容呈现都不够清晰，第二和手机端不同，网页端图片较大，可以很好的起到其本身的作用，也正因为网页端的呈现空间较大，所以当标题比较短的时候，如果还按照移动端的结构，那么标题和图片的中间会产生空白，造成视觉的浏览的不连贯，这就是为什么不同平台版式差异化的原因。

12. 色彩在版式中的对比运用

其中主要包含经典的3种-纯度对比、色相对比、明暗对比，界面设计师如果掌握了这3种常用对比手法，可以在界面设计中灵活自如的制造出不错的色彩对比

12.1 纯度对比

我们可以看到此案例中进度条部分，采用了低纯度的蓝色和高纯度的蓝色和绿色制造色彩对比形成层次反差，让画面非常的有活力

12.2 明暗对比

这张图片中的主背景颜色左侧为白色，右侧则调整成了黑色，通过色彩明度的对比可以表现出整个界面的层次感，使得整体的感受呈现出简约和高品质的风格（现在很多产品都已经适配了深色模式，可以为用户呈现出Light和Darkmode两种用户体验）

12.3色相对比

整体界面的主色调不难看出，是以绿色为基本色进行大面积运用，橙色在绿色中的运用非常鲜明，形成强烈对比，让用户非常清晰的知道此为强引导入口

13. 图片版面率的有效利用

我们在网上购物时，更多的是通过图片的第一印象来获取产品，所以图片在购物网站的比例都做到尽可能的适合自己的产品特点才能让版式设计更优；常见的图片尺寸有16:9、4:3、3:2、1:1、2:1、1:0.618（黄金比例），

比如淘宝、京东的产品图片，在有限的空间内，正方形比例的呈现则是最大的空间展示；优酷采用16：9的比例更加符合人眼浏览视频的习惯等

14. 版式设计的软硬关系

在界面设计中，为了功能的突出或者版式的“活跃性”等需要，必须增加一些元素来烘托，此时不妨试试看如下几种软硬搭配的方法，能够起到不错的效果

14.1 曲线与圆角

通过曲线与圆角的方式让界面变得更加“柔和”，比如以下产品的顶部位置的背景层的处理上，通过运用柔和的具有弧度的线条，让整个画面都不那么生硬了

14.2 渐变与过渡蒙层

在界面设计中我们常常因为为了保证界面元素存在而又不失品质在图片上增加icon的方式，此时可以通过增加过渡蒙层的效果上增加icon既能够保证功能性又能够保证美观度

14.3 直线加浮层

通过直线设计手法把图片和功能入口进行风格，是一种界线清晰的“生硬”设计方法，让界面有一种刚硬、强劲的感受

15.「高级感」的版式设计

有一种高级感版式设计是利用大留白与大卡片的版式设计的方式，让整个产品的气质凸显了出来，使得产品别具一格，比如下面3个产品，利用卡片进行模块化设计，内容里凸显少量文字运用色彩重量对比和修饰性的语句，再配以高品质的图片，使得整个界面非常的具有高级感

16. 差异化版式设计方法

设计工作中，经常会用到的方法，主要目的是能够达到在同类型功能入口中，起到脱颖而出的效果，比较具有典型代表的是增加动画效果或者增加角标等修饰性的设计，如拼多多的入口里增加了icon的动效和角标的动效设计在新人专享处特别运用红包的表现手法让元素都动了起来；在蘑菇街的入口位置对直播入口的头像进行了动效设计，增加视觉引导性

三. 总结思考

以上就是我为大家整理的实战中常用的版式设计的小技巧，希望能够帮助到大家，提升自己的设计能力和水平；

其实还有更多好的实际工作中的知识点和防踩坑技巧可以分享给大家，期待未来能够继续帮助大家进行梳理。

在此还是希望同学们给文章进行点赞加关注，留言区评论。让文章里的知识点能够有更多的角度融入到实际工作中

让我们一起努力，每天进步一点点，成为更好的自己。

原文地址：站酷

作者：Zeal庄治柱

2020年已经过去一大半，这些时间以来，我一直在关注数字设计领域未来的设计趋势。从年初就开始收集，到今8月份了，我想是时候将发现的一些趋势风格分享出来，这些风格很有可能继续延续到2021的产品设计上。

对于UI界面视觉趋势，同样需要我们高度重视。毕竟每年改版方向，视觉风格研究是必不可少的一个环节，下面正式开始。

少量的渐变

今年在各网站上看到大面积的渐变色设计，相对前两年来说越来越少，设计上有所克制。大面积的渐变色虽然视觉冲击力强，但大部分停留在概念中。

从今年设计中我们可以看到设计更加理性与克制，将渐变色彩运用到关键功能上，突出强调重要信息。

机票选购界面，将渐变色运用到头部位置去强调功能。

运用在功能卡片上，突出重点信息。

如上图，设计上同样只将渐变色运用在背景上，其他卡片上基本没有渐变色。

包豪斯风格图形

几何图形设计是目前运用最多一个设计手法，今年发现一些比较抽象艺术化包豪斯风格几何图形，在UI设计中大量运用，且效果还不错。

这种图形带来好处就是记忆性强，应用广，它不仅可以拓展在品牌包装，品牌图形延展，还可以运用在UI设计中。

卡片设计采用一些具有意向符号的图形，来表达功能的设计，形成记忆点。

品牌设计上，也是重复这种极简包豪斯风格几何图形。将logo元素提取，进行包豪斯风格化，重复运用在设计中。

有深度的界面

今年这样的设计屡见不鲜，大量3D运用在界面设计中，二维的界面已经不再满足当前设计需要。设计师去探索更多维度学科与UI界面融合，形成一种全新的视觉感官。

uber的概念官网就通过3D来呈现，表达功能亮点。

将二维世界三维化，将是2021年重要的趋势。目前国内外线上有一些产品，开始在部分功能模块使用这样设计手法，如Naver，支付宝等。

毛玻璃效果

可以说是趋势轮回，毛玻璃的效果又回来了。这也是今年在各网站设计上出现频次多一些的设计。

新的毛玻璃效果更加去注重功能说明，用在视觉强调的地方。

如上图设计，毛玻璃运用在顶部关键信息上。这样设计即可减少其他色彩运用，还可以对功能信息进行强调。

毛玻璃效果运用在个人中心，人物头像位置，进行设计强调。

运用毛玻璃去包装UI界面，可以提升品质感与神秘感。

沉浸式界面

将功能与场景融合设计，用户在使用产品过程中，能产生更多情景体验感触。这也是最近今年喊的比较火的一种设计思路。在各网站上，这样设计出现次数越来越多，设计效果冲击力强，得到很多设计师的认可。

场景中关键人物元素与设计进行巧妙集合。

运用超现实设计手法，将人物与酒店场景进行排版布局。

将制作材料与产品集合。

拟真植物元素与土地进行巧妙集合，在视觉上传达逼真效果。

界面排版杂志化

杂志化设计风格鲜明，可以有助产品去打造强化记忆点。杂志化设计的优势可以不受到网格约束，排版使用大字体，同时设计排版上更加个性。我们在做产品概念探索前期，可以多去尝试这样的风格。

拟物化图标

拟物图标又回来了，apple新版本的Big Sur系统，就采用拟态图标，这也是一个新的尝试，当然也是一个开始。我们很有必要时刻关注这个趋势，未来将会在更多设计中看到拟物化图标的出现。

不过这种风格也不能大面积运用在界面中，我们可以运用在一些关键功能入口设计上。

在天气上的运用，相对之前扁平化设计，目前具有空间的拟物化设计，增加了真实感。

圆形的运用

圆形趋势，我想大家也许会忽略的点，最近几年设计中，圆形的设计无处不在。它的好处不言而喻，亲和力强、场景覆盖广，几乎任何设计都能去用圆形。因此我们有必要去注意圆形运用技巧。

星巴克的web UI概念设计，采用圆形与产品进行集合设计排版。

2021新拟态界面

新拟态趋势是2020年受到广泛关注的趋势之一，这种趋势大量使用了柔和的阴影和微弱渐变，使设计既具有未来感又具有现实感，并且为熟悉的界面带来了新的感觉。相对之前大面积浓厚阴影而言，目前新的简化拟态界面，会克制使用这些元素。

2021年拟态界面，更注重功能与体验。拟态效果会使用在关键功能上，如仪表、按钮，又或者需要重点强调的地方，避免了大面积使用这种设计手法。

写在最后

2021年的趋势相对来说，有继续延续2020年一些设计风格，这些风格将会在继续加强，同时我们也有发现，目前越来越多3D元素与二维界面进行集合设计，能更生动传达功能与将故事，2021年大家务必要注意这种趋势的延续。

作为设计师，我们对设计的思考不能只停留在表象层面，而更多的需要围绕信息传达这一设计的本质功能，以充满自省的精神深化和反思自己的设计意识，同时要时刻保持对趋势的敏感度。将新趋势合理的运用在产品设计中，以产生最大化收益。

原文地址：功夫UX（公众号）

作者：功夫UX

Playstation 5 Dualsense 3d Neumorphic Mobile 3d App by Dawid Tomczyk

Radio Player App by Alexander Plyuto

Fitness Device App by Sergi Mi

Tesla Smart App by Gavrisov Dmitri

Playlists by Filip Legierski

Player App Ui Concept by Anton Skvortsov

Crypto Exchange App by Taras Migulko

Player App Ui Night Version by Anton Skvortsov

Sleep Cycle App by Devanta Ebison

Kettle App Concept by Vadim Demenko

Neumorphism Tutorial by Julia Shagofferova

Skeuomorph Banking App by Mikolaj Galeziowski

Banking App by Filip Legierski

Sky Vpn App by Sergey Dyachenko

Skeuomorph Anicorn Watches App V2 by Dawid Tomczyk

Ui For Tracking Project by Mariana Konstantinova

Purchase Guitar App by Ozturk Erdag

Soft Ui Countdown Timer by Marc Merle

Sign In Mobile Screen by Dali

Best Powder Snowboard by Olya Safianova

Home Automation Remote Control by Martin Priotti

Neumorphism – To Do List by Oliver H. Gunther

Time With Some Clouds by Julia

Alfred Smart Lock by Xiaoming Phan

Headphone Controller App by Ariunbold Ankhaa _

Mi Remote Control Mobile App by Igor Erema

Simple Music Player by Luiks Tsaryk

Voice Recorder Interface by Tanmoy

Mp3 Player Mobile Application by Orkhan Salahov

Shazam Redesign In Dark Neomorphism by Marius

]]> //www.laura-marie.com/48155.html/feed 0 //www.laura-marie.com/47694.html //www.laura-marie.com/47694.html#respond Thu, 06 Jul 2017 17:10:07 +0000 APP UI 的界面看似只有几个简单的元素组合起来，所有元素的绘制可以说比较简单，然而当一个产品原型出来后，设计师如果单纯按原型来进行设计而不考虑信息化规则，那么很多时候就会出现不协调的效果。其实UI设计对版式的应用相当重要，懂得一些版式的原理，是设计良好视觉效果的前提。

今天为大家谈谈APP UI界面中的一些版式排版设计理论，学习这些理论知识，对你日后做移动端界面设计也会起到一定的帮助。

1.信息的排布

对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。

对齐除了能建立一种清晰精巧的外观，还能方便开发的实现。基于从左上至右下的阅读习惯，移动端界面中内容的排布通常使用左对齐和居中对齐，表单填写的输入项使用右对齐。

设计和做其他事情一样，也要有轻重缓急之分，不要让用户去找重点/需要注意的地方，应该让用户流畅地接收到我们想要传达的重要的信息。重复和对比是一套组合拳，让设计中的视觉元素在整个设计中重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。

在排布复杂信息的时候，如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密性的原则，把彼此相关的信息靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。

在设计表达的时候，一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感，而且图形的理解比文字更高效。那些用文字方式表现时显得冗长的说明，一旦换成可视化的表现方式也会变得简明清晰，可视化的图形可以将说明/标题/数值这种比较生硬的内容，以比较柔和的方式呈现出来。

2.图片的使用

app的页面结构和文本确定之后，就要开始安排图标/按钮/图片的安排了，这时页面也就从单纯文本的“阅读”型结构调整为“观看”型结构，对于页面的易读性以及页面整体的效果会产生巨大的影响。页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果。

实际中也跟选取图片的元素/色调/表达出来的情感有关系，合适的图片也能散发出整个应用的气质，直接传达给人“高级”，“平民化”，“友好”等不同的感觉。

在内容比较少但是又想提高版面率的话可以采用一些色块，或者抽象化模拟现实存在的物件，例如电影票，书本纸张，优惠券，便签等的效果，使界面更友好也降低空洞的感觉。通过这种方式也可以改变页面所呈现出的视觉感受，只是这种方法最多改变页面的色调/质感，并不能改改变“阅读”内容的比例，这点是需要注意的。

3.颜色的使用

不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范，确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/按钮/icon等地方，通常起强调和引导阅读的作用。

主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的颜色)，这种方法比较常用因为色相柔和过渡也非常自然。

第二种是同色系配色(色相一致，饱和度不同)，主色和点晴色都在统一的色相上，给用户一种一致化的感受。

第三种是点亮色配色，主色用相对沉稳的颜色，点晴色采用一个高亮的颜色，起带动页面气氛，强调重点的作用。

第四种是中性色配色，用一些中性的色彩为基调搭配，弱化干扰。这种方法在移动端是最常见的方法。

还有一些渐变，明暗调对比，多色搭配等方法在这里不一一说明，你感受一下。

4.留白的艺术

不单单是文字和图片需要设计，留白也是构成页面排版必不可少的因素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的空间构成。

常见的手法有几种，第一通过留白来减轻页面带给用户的负担。首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过留白来减轻页面的压迫感，使用户进入一种轻松的氛围。

第二通过留白区分元素的存在，弱化元素与元素之间的阻隔。表单项与表单项之间，按钮与按钮之间，段落与段落之间这种有联系但又需要区分的元素用留白的方式可以轻易造成一种视觉上的识别，同时也能给用户一种干净整洁的感觉。

第三通过留白有目的的突出表达的重点。“设计包含着对差异的控制。不断重复相同的工作使我懂得，重要的是要限制那些差异，只保留那些最关键的。”这句话出自原拓哉的“白”一书中，通过留白去限制页面中的差异使内容突出是最简单自然的表达方式。减少页面的元素以及杂乱的色彩，让用户可以快速聚焦到产品本身，这种方法在电商类的应用上被大量的使用。

第四留白赋予页面构成产生不同的变化。版式设计中要有节奏感，这也是我一直强调了。传统杂志在每一页翻开都会有不同的视觉感受，我认为在app内很多板块之间的也是可以局部去突出个性或特点的。留白可以赋予页面轻重缓急的变化，也可以营造出不同的视觉氛围，通过留白去改变版式再配合四大原则可以产生出不同的效果。

值得注意的是，留白不是一定要用白色去填充界面，而是营造出一种空间与距离的感觉，自然与舒适境界。

5.视觉心理的灵活运用

在观看事物时，往往会产生一些不同的视觉心理，例如两个等宽的正方形和圆形放在一起，你一定会觉得正方形更宽。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导，也能让设计师快速找到一些排版布局的方法。

(via 版式设计原理)

首先最常见方法是的是灵活运用黄金分割比，文本与线段的间隔，图片的长宽比等地方都可以通过黄金分割比快速的设定。比如通栏高度的设定等等。

在界面排布中，往往圆角和圆形比直角更容易让人接受，更加亲切。直角通常用在需要更全面展示的地方，例如用户的照片，唱片封面，艺术作品，商品展示等地方。在个人类的feed或者头像，板块的样式等使用圆角会有更好的效果。

在全局页面的排版中也要避免单调，增加节奏感。在上文我也提到过排版要有轻重缓急之分，这样让用户在观看的过程中不会感到冗长，无趣。

图片也是有不同的色调的，通过蒙版的方法可以控制这种色调。如果选择比较明亮的色调可以减轻这种对用户的压迫感，选择比较暗的色调可以让整个画面更沉稳，内容显示更为清晰。

6.没有设计的设计

最后这段不是版式设计原理，更像是一种设计的心境。古人在写诗的时候有一种手法叫白描，原拓哉也曾强调“最美的设计是虚无”，在界面设计中同样追求一种“让用户感受不到设计”的境界。每一条线/每一行文字/每一个按钮的存在都是都有它存在的理由。它不加无意义的修饰、不须陪村和烘托，让用户更关注内容的主体，弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。“菩提本无树，明镜亦非台”，做设计和做人一样，一切有为法皆如梦幻泡影，不要注重形式才能明心见性。

图中的例子在某些地方处理得也不是那么自然，但是我认为以上的例子是有向“让用户感知不到设计”的方向上走的，没有完美的设计，只有努力变的更好的设计。最后，做好设计非一朝一夕，理解设计也非一朝一夕，希望各位善于发现美，也善于理解美。

来源：知乎     作者：justinlam

建立这种信任将有助于建立你和用户之间坚实的基础，它可以促进销售，提高用户对产品的忠诚度，它建立了品牌形象，促进了成功，并有利于建立长期有效的用户关系。那么，这种设计该注意什么呢？下面，我们有十点建议，可以帮助你更好的建立一个高度信任感的用户界面。

1.高清晰度

如果一个随机的用户登陆你的网站，首先，接口信息或者目标是否明确？他是否知道该如何操作？能否快速的了解你网站主打的功能是什么？

如果答案是肯定的，那么你的设计已经达到了简易明了的要求。如果答案是否定的，那你可能就要重新调整一下了。

网站的清晰度意味着你网站设计的方式，对于用户而言是否是容易理解辨别的。用户需要了解这个网站是用来干什么的，信息传达，产品展示还是游戏。你可以使用一些会给人惊喜的或者给人悬念的元素，但是必须在于网站的清晰度上找到一个平衡点。

2.透明度

你有没有遇到过这种情况，一个网站起始页向用户传达了一种信息，但当翻阅到后文，发现它讲的是完全不同的信息。所以网站的前期设计，必须明确的传达后期的信息。不能前后不统一。

以下是一些简单的例子:

• 告诉用户你将会用什么形式展示信息
• 告诉用户你是否会使用cookies追踪他们的行为
• 建立一个隐私保障概述或者用户须知告诉用户你会怎么处理他们的信息
• 在进行常用问题解答或者用户开放交流时，使用安全连接和HTTPS。
• 如果你进行金融交易，制定一个明确的政策，包括回报和保障。
• 如果发生了一些失误（比如安全漏洞），尽快给予解释并提供解决方法

3.注重诚信

虽然这个听起来是个非常简单的概念，但是当实施起来的时候，很多人会选择丢掉诚信，你每次都会执行你所承诺的吗？

这点需要在所有地方都得到保障，从一个应用的发布日期，到邮件列表，导航项目的维护。你许下一个承诺，那你最好保证能兑现。否则，一次不忠百次不用，你会永远失去你的用户。

4.赋予用户控制权

如今的用户已经习惯事情在他或她的掌控之中了。用户喜欢自定义网站和应用程序体验。给他们这个选择，哪怕只是一小部分。

允许用户做出交互式选择。你可以通过几种方式做到这一点：

• 提供导航选项，让用户作出选择
• 对用户的操作做出反馈
• 赋予他们一些小的控制权，比如开启或者关闭通知栏
• 服装购物时，允许用户自行选择的内容，如女士/男士/男童/女童
• 当选择使用工具时，向用户提供一定的指令，通过悬停元素或者下拉菜单，帮助用户了解选项。

5.采用清晰的排版

每个模式都有存在的原因。它们具有普遍接受，易于使用，鼓励用户交流互动的特性。坚持按着基本模式进行设计。

当你的设计易于使用和易于理解，用户就不会质疑网站的运行方式，为什么这么做还是怎么的。信任是与生俱来的。但是，当这些事情都不清楚，用户可能会问为什么还是怎么的，而这也正是不信任的种子萌芽的地方。

6.清晰的导航菜单

清晰的导航菜单有利于提高用户对于网站的信任度，它为用户提供了一个易于理解的途径进行搜索或者操作。导航同样引导用户在页面跳转之间更方便的找到他们想要查看的内容。

有助于建立清晰导航菜单的关键UI元素包括：

• 页眉和标题的页面
• 视觉识别
• 标志和品牌跨页
• 页脚，包括相关的信息和联系
• 一致的图标使用
• 页面之间简便转化的途径
• 清楚说明的文本元素
• 基本菜单结构，可以从任何页面访问

7.解决问题

你的网站是做什么的？它解决了用户的问题吗？还是它会给用户提供答案。

网站需要能帮助用户解决问题，不然用户使用它干嘛。你是否了解用户想要知道什么，解决的方案又是什么？你的网站界面，每一个环节和行动和交互都应该引导用户实现这一解决方案。

这一切又回到一个议题：你的网站需要有一个明确的目标。

8.沟通简洁明了

别想太多，别搞太多套路。使用简单清晰的语言阅读方式。这要延伸到所有的副本，特别注意那些经常被人遗忘的元素（比如文字链接或者底部的按钮等等）

然后编辑，编辑，编辑。

如果不和用户沟通，你永远不会知道该怎么样赢得用户的信任，也找不到自己沟通，传播信息时的错误。使用性能良好的编辑器工作，保证你编辑的所有副本语法正确。通过QA测试确保底部所有链接都可用。在合适的位置设置一个社交网站图标按钮链接，确保提交形式正确。网站上的每一个元素都会传达你理念的一部分，建立用户对网站的信任和好感。

9.结合一两个流行趋势

你可能会想在你的网站中使用一个时髦的设计或者流行的模式。过时的接口会使用户怀疑你的网站是否有效或者管用，或者直接导致怀疑。

通过一种时髦的方式来呈现你的内容，不断的努力改进，使用最新的互联网技术，可以增强用户对于网站的信任感，通过一种可视化的方式建立信任。

这并不是说你非得采用最新的技术，走在潮流最前端，你只需要添加一点点的时尚元素就可以了，比如说扁平化的按钮，鲜艳的配色或者简约的设计风格，使你的设计给人感觉清新就可以了。Cards系统或者不同质感的设计同样可以使你的网站看起来很有现代感。

10.测试 测试  测试

最后，每个元素都必须保证有效可用。在设计之初，你必须保证每个元素亲测有效，然后后期也必须定期维护升级，这样才能保证为用户提供一个卓越的使用体验。

为用户预留一个位置，使他们可以提意见。用户时不时就会产生问题或者其他反馈，保证他们的反馈能及时被解决，你需要及时跟进他们反馈的问题并让他们知道你积极的在为他们解决问题。

制衡和纠正错误的过程会让用户感受到人性化，错误发生，联系破裂，你的反应方式决定了用户对你的信任度。

结论

信任是一个用户界面成功的基础，也是用户体验的一个重要部分。没有信任，用户会怀疑你的网站和产品，然后离开你的网站投降他人怀抱。没有信任，用户就会拒绝在你的网站上进行任何操作，无论是表格填写还是进行购买。最重要的是，如果用户不信任你的网站，他会跟自己的朋友传播自己的观点，你失去的就不是这一个客户，而是他周围一片的潜在用户。

一个信任你和你的网站的用户更有可能成为忠实用户，然后与企业或者网站进行进一步的互动。并向他身边的朋友分享自己的想法。无论从何种角度来看，如果想要取得长期的成功的话，建立网站同用户之间的信任都是一项必要且重要的步骤。

原文链接:http://blog.enqoo.com/blog/2016/04/22/how-to-create-a-ui-that-users-can-trust/