设计：The Woork Co

我曾经写过，UI设计是一个拼盘，它需要把版式设计、字体设计、配图设计、插画设计、摄影后期等所有与视觉有关的内容都全部综合在一个拼盘里，这个拼盘呈现的形式，可以是APP界面，或者网页界面。

所以，学习UI设计，归根到底，是对拼盘里的内容进行组合装配的过程。今天我们这篇文，就是试着回答经常收到的网友私信关于UI设计学习的问题：我应该怎样提高UI设计呢？

我一方面从技法上给大家一点学习建议，一方面主要从大环境，更高的维度来阐述这个看似只是职业技巧的问题。也许它不是职业技巧，而更甚是一个哲学问题。

搞清楚这一点，对你的职业生涯尤其重要，你能获得学习提升的方向，也能帮助你判断你的工作价值感在哪里。

一、你了解你的金主爸爸吗？

你的UI界面出稿，最初的观者受众，是你的甲方爸爸。也可能是你的上级BOSS。他们的审美，其实就是你的UI界面审美的第一道关卡。

如果他们的审美趣味比较老套，估计你想潮起来也没机会。参考dribbbble？别开玩笑了。认真点开国内那些广告飘来飘去的门户大网站。最好还能是他们所属行业里前三的那种水平。对于金主爸爸们来说，绝大多数（不排除有另类者）都是以“利润多”为目标的。你也可以在这里把利润换成流量。

审美能直接带来利润吗？这篇文章不好直接回答这个问题，但是，你一定要知道，审美高，不是在职UI设计师们的第一追求目标。accept it!

潜在提升对方的审美值

能潜移默化提升甲方的审美，这点非常关键。而能影响对方的前提，是你要用你的专业去征服对方。而不是和对方硬杠。

很多时候，我们以为boss并不关心我们的行为，其实，他只是表现出不在意的样子，目的是为了让你放松，表现出最真实的你。而他也在这一过程中默默观察你。

所以，如果你能给他以”专业“的印象，那么这个印象就会提高你在工作过程中的话事权。

人与人之间的关系，其实就是一个潜在的能量拉锯过程。你要增加自己在职业的能量值，类似把你的职业系数开大。你首先要接受这份雇佣关系，既然是关系，就必定在寻找一种平衡。如果你弱了，他自然就要强压你，让你难受，让你996，让你改稿改到喷血……如果你强了（至少在专业上强），他认为你值得这份工资的支出，自然就会尊重你、怕你跳槽、听你的意见……

如果不是奇葩上司或甲方，这份关系的建立，就是如此简单。

所以，如果遇到一个审美偏低的金主爸爸，让自己的专业去影响对方，就能达到提升自己的作品视觉的效果。

二、眼界来自你的手，更多来自你的心，和眼睛没关系

眼睛的审美是贪婪的，没有天花板的。之所以你觉得自己做的作品不好看，其实还是因为看过其他更好看的作品。

而好看是什么？其实我觉得很少人会思考这个问题。如果说好看就是流行，就是打开dribbble、Behance里那些推荐作品，然后让他们来告诉我们好看的设计就应该是这样，那么我们的审美其实也是很被动的。

这又是一个哲学问题。但是我们还是不要活得这么复杂吧，回到技术层面。

要好看的界面？很简单。每天对着Dribbble上排名top的作品进行临摹就可以了。临摹不要想太多，就是做。做的过程，会告诉你所有的答案。

临摹会带来什么

临摹的过程会有一种“再经历一遍创作者的design过程”的感觉。首先你会从排版上发现，哇，原来这样排版更好看，文字可以用这种方式排在一起。

没有图片素材也没关系，原作素材的缺席刚好是你的学习点的开始。打开图片网站，搜索一张和原来素材类似的图片。然后再和文字组合，看看和原作有什么不同。

下图左边是网上找来的原作，右边是根据原作所做的临摹。

很多借鉴的好作品，大都是英文排版。试着换成中文排版，看看怎样把中文变得好看。如果直接用英文，的确在视觉上很省事。但是，你的金主爸爸未必会同意，你们的营销策略也大概率不会答应。

以下就是经过中文洗礼以后的APP界面设计：

所以，如果是经常做商稿，就要有心里有准备。临摹时也要有所调试。最好的临摹，就是能超越原作。

通过手的训练，提升了你的审美感受力。起码能追到最流行的视觉节奏，出稿就“下笔如有神”。这种“神”，甚至不需要你每次设计就打开参考图库，而是能直接从大脑中取货。

三、你的原创力

虽然现在网上有很多优秀作品，但是，有原创感的优秀作品，其实非常非常少。因为多少大家都在相互借鉴，能完全独创的其实非常稀缺。

你的金主爸爸或许不会给你时间原创。但是你要把原创列为自己职业生涯一个非常阶段性的重大目标。

你的原创力决定了你的职业生涯长短

设计师最大的能量原点，就是你的idea。这我在《没有美术基础的设计师怎样学习插画》这篇文章中也谈到了。很多设计师之所以没有在这行坚持下去，也是因为这个点没办法突破。

很多人说设计师是美工，美工也许是对没有原创力的设计师的一个统称。但我其实很想为美工正名，美工未必没有原创力。美工侧重“工”，只是侧重点不一样。并无高下之分。

任何工作，只要丢失了原创力，就会容易被取代。一个人如果做街道清洁做得有创造力，他就不再是普通的清洁工，而可能是环卫专家。一个如果做农活做得有原创力，他就可能是一个田园生活方式博主。

一份工作能否给你带来价值感，也是以“原创的比例”作为基准的。原创的比例越大，你在这份工作中的能动性越强，就越能给自己带来成就感。

而你应该怎样迎来你的爆破点呢？

在没有原创力的时候，我每天都很焦虑。除了临摹，没有别的办法。所以每次能出稿，打开ps，我都很开心。因为只要练一次，就有一次的提升。这和积累积分是一样的。

这次原创的不好看？没关系，已经积下1分了。这次没有完全原创？没关系，下次多增加一点原创的配比。

用积分的心态去提升自己，就能部分消减掉无法原创的焦虑。所以，很多人说我勤奋，其实大概也就是与其刷剧看小视频，我更愿意在这里积分罢了。

不要害怕丑！

那天看综艺，听到一个人讲：“一个人只有摆脱自恋，才是真正成长了”。这句话特别能共鸣到我。

很多人之所以不能原创，只是因为害怕被人说不好看。所以，只能借鉴别人的作品作为设计的开始。这段经历是必经之路。

但是到了一定阶段，这样的开始就会带来限制。如果有天断网了，你就没办法创作。如果你的金主爸爸要你画一画APP的改版思路，你的下意识反应是“等我打开dribbble参考看看”。这已经很危险了。

虽然很多人已经习以为常，但我却感觉这不是正常的。设计师难道不应该是立刻抓起笔来就能画吗？之所以雷同的APP界面这么多，大家的习惯造就了我们的现实。

作为一个自由设计师，我最大的自由大概就是有时间表现得真实且不好看。作为一个在职设计师，这需要你挤出时间留给你的未来。

切换到boss的维度再来看原创的价值

当你拿着你的作品集准备简历的时候，如果你能原创作品，并且骄傲的打出原创二字，提出你的原创思路。你的作品集肯定是会比其他（或许看起来更高大上，但是没有原创力的作品）更有机会得到面试机会。

相同的薪资水平下，boss更青睐的是哪一种设计师呢？

如果你正在找工作，或者考虑跳槽，你永远要切换到boss的维度上，他请一个人是来做什么的？ 他为什么要招人？

他请的设计师如果只是按他的命令，他给的参考图片来画，他在心中给这个员工的分数最多就是一个及格分。当然，他不会随便炒掉你，但是一有机会，一定会想办法换掉你。而如果你能画出他没见过的更优秀的作品，情况肯定会完全不一样。

这里的Boss可能又会分为大公司和小公司，大小公司是相对不同的运作模式。大公司一般走得是概念风，他们花得起钱，所以更重视品牌的传递。小公司其实也分很多种类，但小公司一般都是Boss个人的人格化的体现，因此熟悉boss，摸清他的风格比较重要。

但不管怎样，原创力一定不止你的工作能力。而也是你的表达力的体现。表达，只有熟能生巧。自由的表达，能帮助这家企业输出其内在价值。这也就能更大带来企业的收益。这是金主们的最爱。

四、UI设计师的素材库

很多人对素材库的概念就是付费的图库。毕竟网上现在的付费图库已经手到擒来了。好照片，当然有。佼佼者却不多。

要用好素材，我们的UI设计就成功了一大半，可以说设计UI的过程，其实就是处理和组合素材的过程。下面我们可以把UI设计所需要的素材大致分为四类：

图标元素

其实现在UI常用的图标，是以简约的线体为主的图标。网上已经有很多免费的UI线体图标给大家下载。如果UI界面不是特殊的行业类图标的话，常用的，比如：用户、主页、推荐、购买、登录、邮箱、电话、客服……等这类图标的可选择量是非常丰富的。

但是一旦涉及到特殊的图标，网上就未必能找到合适的资源。如果直接拿别人的素材资源，一旦要 用到特殊的图标时，如果找不到同类风格的图标，这时就很棘手。这就需要你能自己根据原有的风格线索来画。

配图

配图我们可以分为两类，一类是Banner类的视觉比例偏大的图片。这类图片可以是摄影或者插画，通常，Banner的位置出现在头部，所以要求画质高清且层次丰富。

单纯靠一张摄影作品就做出头部Banner的时代过去了，取而代之的是插画或者对摄影做更进一步的视觉处理。而且为了传递信息的准确直达，也会添加相应的文字来丰富画面。

因此，光是对头部Banner的设计，就需要以对待广告设计的态度来承接它的设计。但又与此同时，需要和UI界面中其他的元素风格相呼应。

另一类是其他的图片信息中的配图，这类配图与可能是产品和服务的图片，如果是在介绍类的文字中出现，也需要准确的辅助表现信息。

还有一种配图的方向，也就是利用插画。直接创作插画就比去网上找图片素材来得简单，表现清楚概念就可以。

最后一种配图的风格就是C4D制作的质感特别高级的立体艺术，场景装置，在电商展示产品的时候用的多一些。

无论你是用哪一种方式表现配图，摄影、插画、立体……，都需要一门深入，表达得彻底。不是懂得越多越好，而是越深入越好。因此选好一个适合自己的方向非常重要。

字体

字体是很容易被忽略的元素之一，因为对于UI设计，尤其是中文字体更多依赖系统能提供什么字体，没有平面设计那么自由。

但是UI设计师对字体却要非常小心，尤其是大型的文字，比如Banner内的文字，可以以图片形式出现的文字以及英文，都要注意字形对整个界面的影响。

现在的字体商用版权也非常严格，因此大家在商用时要特别小心。比较保守的做法就是使用开源的字体，而想要特别一点的比较大的字体时，最好能自己设计。

视频

如果是比较简单的UI界面，很少会用到视频。毕竟敢把视频直接放到自己的服务器里给用户看，而不是引用外部资源的平台也不多。视频的流量真心是贵啊~（我自己的个人网站就用过视频，还好一直比较庆幸流量不大）

交互

UI的交互是交给代码实现的，但是UI设计师不会代码，那么就用动效的方式来展示。这样能把交互概念更完整的递交给前端。

所以UI设计师也需要对交互的体验多一些了解，尤其要对代码实现到哪个程度心中有数。否则你的界面只能是一张图片，只有审美功能，没办法实现成为真正的界面。

以上几个方向能拿下，基本上你的UI界面设计，就算不能登顶，也能在行业里被众星捧月膜拜好一阵了。

其实方向大家都知道，缺乏的只是日积月累。

五、为自己攒时间

很多人说，你说的都知道，但是我没时间啊，要加班啊……

记住，当你在说这句话的时候，你已经进入了一个恶循环，这个恶循环就是：重复工作无暇顾及自身成长，没办法成长所以更要努力重复工作……最后到了中年危机，加班加不动的时候，前面来了一大波比你能加班，还能接受低薪的小年轻，瞬间成为“被优化”的一员。

那么，如何为自己攒时间应对这一潜在危机呢？我这里有个办法就是：不做无谓的时间上的牺牲。

什么是时间上的牺牲呢？和别人无休止争论一个问题，一年换N家公司，反复无常找不到方向，闲聊无意义的虚幻的可能性……总的来说就是做无用功。这些零碎时间，完全有可能替换成你的学习成长的时间。

当你觉得自己零碎时间多，而整块时间不足的时候，你应该想想为自己做一套时间管理计划。让自己多一些自律。

比如我一直自由职业，所以有段时间每天都睡到9点起床，以为自己睡饱了才能工作效率更高，其实相反发现那段时间工作都没太多进展。后来改成7点起床以后，由于早起完成了很多工作，反而一天下来发现自己能完成的效率比之前高很多倍。

最后，你会发现，其实做一份好的作品，提高自己的作品视觉效果，这套方法，也能让自己变成一个更好的人。优秀不需要努力的，它只能是一个习惯。

原文地址：飞屋设计

作者：飞屋睿UIdesign

Neomorphic Form

Neuomorphic Checkboxes

Fingerprint Scan Neumorphism

Editable Neumorphic Text

Neumorphic Buttons

Neumorphic Playground

Neumorphic Toggle

Neuburger

Neumorphic Radio

Neumorphism Toggle

Web Op-1

Witchermorphism

Neumorphism Study

Soft Ui Music Player

Neuomorphic Keyboard

Neumorphic Design

Quite Realistic Buttons

Neumorphism Soft Ui Music Player

Neumorphism Weather App

A Bit Of Neumorphism

Neumorphism And Toggles

Neumorphism Card UI

Neumorphic Tabs

Yeumorphizer

Neumorphism Button

有关新拟物风格(Neuomorphism)的介绍和相关内容请访问：

]]> //www.laura-marie.com/52168.html/feed 0 //www.laura-marie.com/51942.html //www.laura-marie.com/51942.html#respond Fri, 06 Dec 2019 07:20:05 +0000

卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些APP中也会看到很多的卡片式设计的案例，卡片式设计也是UI设计中最常用的方式之一。

最近在新项目的设计中也尝试使用了卡片式设计，结合实际项目中的得到了一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望自己通过本次的总结进行知识沉淀，以及跟大家一起探讨下卡片式的设计。

来源于日常

在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器中承载着内容，并且具有“便携性、信息简洁和相对独立性”。

UI设计中卡片的使用场景

在项目设计之初我分析了一些使用卡片设计的App，并且从中整理总结了几个较为常见的卡片式设计的使用场景。

Feed流

卡片式的feed流设计是一种非常常见的设计，早在前几年Facebook、Google+等产品就使用了这一方式，Feed流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确每一块的内容。

实际案例-淘宝微淘

瀑布流设计

瀑布流的出现让单屏区域内显示了更多的内容，而内容较多的情况下，使用卡片式设计较好的对内容进行了区域划分，让左右上下的内容从整体中具有相对的独立性。

实际案例-Pinterest

左右滑动组合型内容

卡片式设计具有较强的层次感，相比于拉通平铺更能呈现内容可滑动感受，并且块状化的设计让内容具有较高的区域分割感。

实际案例-QQ音乐

Tips提醒

作为非界面固定内容，卡片式设计可以让tips提醒设计变得更自由，在符合用户体验的基础上，它可以出现在任何我们想要它出现的位置。

实际案例-淘票票会员提醒

结合手势的单块可互动内容

若页面中有且只有一个主内容，并且需要用户进行快速筛选时，可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。

实际案例-探探首页

卡券类设计

卡券类的设计实际上是一种物化映射的过程，我们在现实中看到的卡券造型，结合卡片式的拟物化设计，让用户在屏幕上可以更直观的感知，提升了设计的代入感。

实际案例-京东领券中心

集合型功能入口

集合型功能入口往往会有多个入口，使用卡片式设计让入口形成一个区域整体，可以做到既统一又相对独立。

实际案例-淘宝微淘关注账号
 

个人主页顶部内容卡片

个人主页的设计往往会在氛围上营造沉浸感，卡片式的设计可以把关键信息进行概括收归，让原本单个的内容形成一个整体。

实际案例-美团外卖会员

规则探讨

基础的卡片设计规则，相信大家在一些系统级别的设计指导规范中也或多或少都能了解到，不同平台的规范差异性其实不会有太多本质性的区别，更多的是处理技巧或方式的差异，而每个设计师对其理解的角度也会具有一些差异化，这里分享下我对于卡片式设计的一些基础想法。

1.卡片的质感打磨

同样的卡片设计，不同的人做出来的感受可能会有差别，而表达卡片质感的主要关键基础点在于：卡片形体、投影深度、卡片颜色对比，我们需要了解这些基础知识点之后，再结合实际的APP风格进行设计。

卡片形体

就像图标的图形设计一样，不一样的形体也能表达出不一样的气质，因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从造型上打破一些传统的处理方式，再结合一些IP人物元素可以更加深入的表达出具体的内容氛围。

投影深度

投影的视觉效果，会直接影响着整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例则可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是1:2或1:3，例如Y轴偏移10px，模糊度则设定为20或30px，这样成比例的数值出来的效果会较为自然，如下图：

卡片颜色对比

卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。这里有两点建议：1.卡片色与背景色不宜太过接近或使用同一颜色，因为会影响卡片整体的空间质感或使得卡片的边缘锐度下降；2.深色背景上，尽量让卡片与背景色在同一色系或者明度不要差异太大，避免过于突兀。

2.边距的设定

在使用卡片式设计时，经常会纠结边距的设定，宽边还是窄边？多少像素更为合适？经常我会带着这种疑问去设计。 

基于内容的简单规则

卡片式设计作为设计的表现形式，最终是为了承载内容，因此边距的宽窄也需要依赖于实际内容的判断。结合我在项目中的尝试分享以下几点： 

多窄少宽

卡片内容较多是使用窄边距，让卡片具有足够的空间来展现内容，内容较少则可以考虑采用宽边距来打造整体的视觉空间感，如下图app store和淘宝的设计对比。当然这只是一个建议，实际还得具体问题具体分析。

再如一些瀑布流、宫格、横滑模块较多的APP的设计亦是如此，在内容较多的情况下会把边距压缩到最小的合理间距。

内外成比例

以最外边为基础值往里设计，间距以固定比例进行缩减，虽然没有删格来得规范，但也可以让设计变得有迹可循。

基于栅格

栅格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。在设定卡片式的边距时可以适当应用删格系统，让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。

4.卡片的标题设定

标题的设定主要考虑以下几点：1.是在卡片内还是卡片外；2.标题的字号设定多少更合适；3标题是否加粗？

卡片内或外的对比

在项目设计中让我较为纠结的是：标题应该在卡片内还是卡片外？通过了一些案例的尝试之后，我总结了一个规则（需要依据内容的形态而进行设计）：当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内；当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外，形成最外层的主标题。

标题的字号设定

标题主要作用为2点：1.简短说明每个模块的内容；2.让用户在长页面浏览中起到引导、定位的作用。通过一些尝试发现：1.当内容较少时，并不需要太大的字号即可起到标题的作用；2.当内容较多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中难以发现，而导致信息获取缺失；3.标题应该与正文字号大小差异建议在6-10px，这样可以更好的拉开差异，让标题更具有标题感。

字体是否加粗

常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。我在项目之初都对标题进行了加粗，但后续在跟进还原时看到的效果并不理想，特别是Android的机型上，因为我们使用的是系统默认字体，android系统很多字体并未对系统进行优化，而是使用微软雅黑，微软雅黑在android系统上再加粗，就会显得整个系统的外轮廓特别粗糙，最后我们依据不同的机型进行了差异化的选择。

4.圆角的规则

圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。

圆角的规则设定

以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则，而非随意根据“经验”进行设定。

圆角大小差异对比

大小的差异化呈现出不同的视觉感受和风格差异，我们在设计时更多需要考虑我们设计的产品风格或气质是适合大圆角还是小圆角，而非依据一些设计网站上的流行趋势。因此基于不同的风格或者实际内容场景下进行设定才更为合理。

5.宽窄间距对比

卡片式设计相比拉通式设计更需要考虑设计中的透气感。在常规的规则下，对内容边距及四周边距进行调整，让内容之间具有较好的空间呼吸感，从而让设计得到留白的效果。如下图对比案例，在基础删格不变的情况下，每个间距都在原有基础上扩大了12px（接近1.33倍），从而让内容具有较为舒适的宽度进行阅读

优点分析

选择某一种设计方式的重点在于我们了解这种方式的优点，并且可以把这些优点融合到我们的设计当中。在项目设计中，我总结了几点卡片式设计的优点。

优化模块化，提升内容区域感

模块化的设计也是我们日常中会应用到的方法，结合卡片式的设计可以让模块化的规则变得更加简单，增加了模块之间的可复用性和延展性。而当内容较多的情况下，使用卡片式设计可以有效直接的形成区域分隔，从视觉感知上就对内容进行了分隔，提升用户获取信息的效率。

提升内容独立性

在组合型的内容设计上，使用卡片式设计可以让每个小块内容呈现相对独立的展现特性，结合模块化的设计，可以在一大片关联的内容中，做到既统一又相对独立。

增强视觉空间感

卡片式的设计可以提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感。

增强视觉表现力

在设计中我们可以对卡片进行异形设计，用来达到我们想要的风格表现。当然在一个页面内尽量不要太多，尽量使用页面中的首个卡片进行差异化处理，让整体表现出一点不同即可。

增强可点性

卡片式设计产生的空间感，让每个模块更加突出，相比扁平式的处理方式，卡片式从视觉感官上会较为突出，从感官上更具可点击感知。

缺点及建议

任何一种设计方式都会有其利弊，最终选择某一种其实不过就是当下最适合而已，而在尝试中我也总结了几点卡片式设计存在的一些缺点，当然只是个人的思考而已。

横向空间利用率降低

卡片式设计的存在左右边距，因此在有限的屏宽内内容横向区域相比于拉通式设计有所减少，在内容较多的情况下可以适当调小卡片左右边距。

避免过多的层级

从整体来说，卡片式的设计本身就是增加了基础背景的层级表现，其视觉层级相比拉通式更为丰富，因此不建议在卡片上再二次叠加块状式设计，避免造成层级复杂。在项目中也会遇到内容层级需要多层级的表现，从中总结了2种方式：1.利用不拉通分割线；2.利用浅色背景底色。

不适合长文或内容多的表达

若在设计上使用了卡片式的设计风格，但在一些长文表现的界面建议去除卡片。长文章的页面更强调阅读的沉浸感，用户需要更多的专注于文字，这时候无边的体验更适合。

把握好界面的分区，避免过于拥挤的排版

卡片设计具有独特的视觉空间感，但卡片与卡片直接也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现。

最后总结

无论是卡片式或者拉通平铺的方式，其最终的目的都是为了服务于内容，我们在做设计的过程中只是选择适合于呈现我们内容的一种方式。根据具体的内容情况给出合理/合适的设计判断才是我们需要不断提升的关键点，切莫流于形式而忽略了内容设计本身的重要性。

原文地址：IDfor（公众号）

1. 针对像素密度设计，而不是像素

在3dp或者4dp下的像素值

如果你不熟悉dp的概念，我也在这里先说明一下：像素密度是每一英寸的像素值也叫ppi，单位dp是单词“density-independent pixel”的缩写，有时也缩写为“dip”。
在设计界面时，建议不要针对像素而设计，而是针对设备的像素密度进行设计。这样能确保设计元素能在各个不同设备上很好的适配。

例如，如果我们设计一个按钮元素，大小是200x50dp，那么它在160ppi的屏幕上显示为200x50dp，在320ppi的屏幕上显示为400x100px，即原始资源的2倍。

在某些屏幕每英寸的像素要比其他屏幕多，但设计资源却不会在像素密度高的屏幕上显得更小，这是因为在这些屏幕上会以原始尺寸的2倍，3倍，4倍进行渲染。这样的机制可以确保所有设计资源可以在不同密度和设备之间保持同样大小。
例如，iPhone XS Max的屏幕尺寸是414×896，但这不是像素尺寸而是点的数量，以像素为单位时是1242x2688px。考虑到这一点，在设计iPhone XS Max时，我会将在414×896点下设计，然后交付@3x的设计资源。

2. 善用8dp增量

为什么设计中要用8dp这个增量规则？这里有一个简单的解释：我们使用8而不是5这个神奇数字的原因是，如果设备有1.5倍的分辨率，就很难被整除而出现锯齿。

此外，绝大多数的屏幕尺寸都可以被8整除，这就是使得我们的设计在这些屏幕上适配变得很简单。

通过在8点网格上以8为增量进行设计，也让设计变得更加统一。设计师不需要更多的猜测，就能快速做出决策，做到完美适配。

想要更全面地了解这个规则，可以去看看Bryn Jackson的8点网格文章（文章链接在 https://spec.fm/specifics/8-pt-grid）。

3. 去掉线和边框

在做设计的时候，应该时不时的停下来看看，确定下设计出的容器是否会使得UI变得混乱。通常，用于分隔内容的框和线可以用留白代替。

我们以前做设计的时候，喜欢将元素套在盒子里。所以，只需要把这些盒子去掉就能使页面看起来不那么密集，并给元素更多的呼吸空间，整个界面就能提升一个档次。

4. 关注对比度

合适的对比度不仅可以让用户看到页面上的相关信息，还可以提高产品的易用性。
设计一款产品就类似于建造一个公共建筑，比如图书馆或学校，它需要包容所有人：盲人，色盲或视力受损的用户。

网页可用性标准 (WCAG) （https://webaim.org/articles/contrast/ ）规定对比度至少要达到4.5：1。

为了确保你做的设计符合标准，建议下载一个叫“stark （ https://getstark.co/）”的插件，来检查设计是否OK。

5. 遵循用户习惯

某些元素被认为是标准的原因有很多。

例如，如果将按钮设计为圆形，那么当文本需要为“Start Free Trial”时，按钮就会占用不必要的垂直空间。
除此之外，用户已经开始期待类似的产品体验。如果你设计出来的网站，App，软件功能和用户所习惯的不太一样，那么它就是不直观的，用户就可能对这种体验感到失望。因此，最好是在现有的设计规范的范围内进行创新，而不是去重新发明轮子。

6. 用颜色深浅构建层次结构

每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。

这里的经验就是，如果一个元素比另一个元素更重要，那么它就应该具有更高的视觉权重。这能让用户很容易区分重要和不重要的信息，从而快速浏览页面。

更大，更醒目的信息会首先吸引用户的眼球，然后才会看向它下面的次要信息。

7. 避免使用超过两种字体

一个普遍接受的设计共识就是在同一张界面中使用的字体数量应该要有限制。一般来说，两种不同的字体就足够了。这不是说不能用更多的字体了，而是最好要有合理的理由，否则最好不使用。

解决这个问题的方法是使用字体族。
使用字体族，我们可以在设计中使用具有不同变体的相同字体，来自同一家族的字体被设计成可以一起使用，是灵活且一致的。
在选择字体时，优先选择具有各种权重的字体，如细体，标准体，中粗体，加粗体，超粗体，宽体，扩展体和斜体。这将给你更多的发挥空间，而不需要添加额外的字体。

8. 直接而不是让用户思考

直接是产品设计的一个很好策略，因为，为什么要让用户思考？

结账页面，电子邮件收件箱，搜索历史记录，后退按钮等都是很好的例子。

在付款页面上（如果设计得好的话），我不需要记住我买的是什么东西，也能够清楚地识别出我要买的东西，而不需要唤起我的记忆。

搜索历史

在我的Gmail收件箱里，我只需要扫一眼，就能确定哪些邮件我读过，哪些没有读过，而无需多想。或者，如果我登录到Amazon，我可以快速地从我之前浏览过的地方继续看，因为它能告诉我最近查看的条目。
“通过使对象，操作和选项可见来最小化用户的阅读压力。用户不必记住从对话的一个部分到另一个部分的信息。在适当的时候，系统使用说明应该是可见的或者易于搜索的。”——尼尔森诺曼

9. 别让用户慢下来

对于用户来说，速度和效率是唯一重要的事情。用户来用某个应用，目的就是为了解决他的问题。
“我想要更快一点” — Ricky Bobby
如果做了很多丰富的功能，那很好，但不要让你的创造力妨碍我作为用户的目标。
一个关于动画和微交互的经验法则是，如果体验增加了不必要的时间，那么它并不能真正改善体验。
有目的使用动画可以改善体验，但添加不必要的干扰和移动元素却不会。
我经常在Dribbble上看到着陆页设计，当用户在页面上滚动时，页面就会动起来。它往往过于活跃，所有的东西都在动，反而内容本身被忽略了。作为一个用户，当界面中发生了这么多事情时，很难让其应该注意什么。这简直是在浪费用户宝贵的时间。

Sorry to call you out Dribbble user 

大量研究发现，界面动画的最佳速度在200到500毫秒之间。这些数字是基于人类大脑的特殊品质。任何小于100毫秒的动画都是即时的，根本不会被识别。而超过1秒的动画会给人一种延迟的感觉，会让用户觉得无聊。”— The ultimate guide to proper use of animation in UX
所以，如果你在使用动画，一定要有目的。如果这些动画是有目的的，那么不要让我等待超过500毫秒。在2019年，惹恼你的用户只需要一毫秒。

10. 少即是多

每次我们想添加额外的信息到页面:按钮，文本，图像，动画，插图等，它都会与相关的信息竞争。如果页面上的内容太多，元素的重要性就会降低。
一个完美的案例就是著名的谷歌主页，而不是像Yahoo一样淹没访问者可能并不需要的信息里，设计仍然集中在核心任务上：搜索。

对不住了Yahoo，我不得不这么做了

我最喜欢的设计格言之一是：“完美，不是因为没有什么可以增加，而是没有什么可以减少。” — Antoine de Saint-Exupery

原文：https://uxdesign.cc/10-rules-of-thumb-in-ui-design-aa5f91885444

作者：Danny Sapio

译者：彩云sky