<progress id="rb7v6"></progress>
<div id="rb7v6"></div>

    <div id="rb7v6"></div>
    <dl id="rb7v6"></dl>

      <dl id="rb7v6"></dl>
      <div id="rb7v6"></div>

            <dl id="rb7v6"></dl>

              <progress id="rb7v6"></progress>

                深色界面下你需要注意的细节

                作者:姜永超 网易UEDC
                分类: 观点/经验
                2019-03-01
                6798

                习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面在普遍的浅色系界面下脱颖而出,展现个性。

                习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面在普遍的浅色系界面下脱颖而出,展现个性。

                前文

                去年的 WWDC 上苹果发布了 macOS Mojave 系统,提供了一种 Dark 模式(暗色模式),相信?#34892;?#23567;伙伴已经开始在体验了。

                至于什?#35789;?Dark 模式?简单地说它是 macOS Mojave 系统的一种全新界面外观,把所有 UI 换成黑色或者深色的一个模式。它强调内容为核?#27169;?#35753;用户更加聚焦内容本身,对于从事创作工作的专业人士很有帮助,同时它也适合每个想要集中精力完成工作任务的用户,所以无论你想专注的写一篇文章,还是读一部小说, Dark 模式都将是种不错的选择。

                1.jpg

                2.jpg

                这也是这次主题的由来,关于深色界面的设计,深色界面它有着明显的优缺点,不太普适,设计合理能彰显高端、优雅、奢华的氛围;相反,它又可能毁掉页面中你所有精心设计的 UI ,甚至影响使用效率,体验上大打折扣。

                以下是我在设计网易邮箱大师 Mac 版 Dark 模式时,整理得一些视觉上需要注意的小细节,希望对大家在设计深色相关的界面时有所帮助或启发。


                文字颜色

                在深色界面下,文字颜色尽量不要使?#20040;?#30333;。对于黑?#35013;?#23383;的形式,白色文字更加容易吸睛,视觉刺激更加强烈,但强烈的同时会带?#35789;?#35273;疲劳,造成不适的阅读体验,甚至极端情况下的对比会使白色产生眩光,不利于文字的识别。

                3.jpg

                4.jpg

                文字间距

                大多数研究表明,在可读性方面深色界面相比浅色界面略差,所以适当的增加文字的段落间距,行高等,是在深色界面下增强文字可读性的重要途径。

                5.jpg

                6.png

                文字字体

                在深色界面下,无衬线字体相比衬线字体可读性更强,但?#27973;?#32447;字体相?#20219;?#34924;线字体在深色界面下更显优雅,前提是字体需要放大,留足空白。

                7.jpg

                8.png

                图标形状

                我们应该仔细地观察图标,做出艺术性的反转,让它在浅色和深色界面下都能很好的传递表意。例如下图的笑脸图标,一般在深色界面下做法可能就?#25442;?#20102;颜色。

                9.png

                初看似乎没有什?#21019;?#30340;问题,但是仔细观察就会发现,浅色界面下使用边框形式来设计图标,中间是空白的,这样做是因为可以利用白色背景来更好展现它的形状;但是,如果把它同样放在深色界面下,它的形状感和体积感好像都消失了,变得有点奇怪,此时我们要反转下,强化它的形状和体积(如下图)。

                10.png

                再比如,下面这些图标。

                11.png

                12.png

                ?#27604;唬?#26377;的时候你可以根据实际情况去衡量要不要把图标反转,比如考虑到图标风格、统一性等。


                按钮?#21050;?/p>

                按钮的点击?#21050;?#22914;果在浅色界面下,一般的做法是加深按钮背景(如下图左),但是在深色界面下面也采用这?#22336;?#24335;,就会发现点击?#21050;?#19979;的按钮颜色跟背景更加接近,模糊了按钮的边界和轮廓(如下?#21152;遙?/p>

                13.png

                所以在深色界面下,一般建议用加亮背景色的方式?#21019;?#29702;(如下?#21152;遙?/p>

                14.png

                分割线

                分割线也是我们设计中常用到的元素之一,用?#21019;?#24314;内容间的视觉分割。然而,在深色界面下如果只是简单的反转,黑底上用白线来做视觉分割,效果并不是那么理想。我?#24378;?#20197;看个例子,下?#38469;?#20889;信界面,直接反转分割线颜色,用白线来做分割,会感觉线特别多,很干扰。

                15.png

                那如果我们都用黑线来做分割,这样又会觉得比较?#30130;还?#31934;致。

                16.png

                所以我觉得用于不同区域之间的分割,可以用黑线,同一区域之间的区分可以是比较弱的白线,这样显得画面更加细腻,而且语意明确,?#29616;?#31616;单。

                17.png

                色彩

                相比浅色界面,深色界面下色?#35270;?#35813;更亮,更饱和些。举个例子,看下?#21152;始?#21015;表的焦点色,相同的蓝色在深色界面下显得有点泛白;优化后,蓝色更纯正,跟深色界面也更加匹配。

                18.jpg

                19.jpg

                再比如,按钮的颜色。

                20.png

                21.png

                色?#26159;?#21521;

                在深色背景中加入有彩色点缀,可以是品牌色或者其他颜色,这会使设计显得更加优雅、高级。

                22.jpg

                23.jpg

                色彩感知

                从色彩心理学上来说黑色会传递出高端、正式、名望、权力的感觉,这也是为什么许多大品?#33529;?#22260;绕黑色来做视觉设计,并且使用黑白来做主要的配色方案。

                24.jpg

                25.jpg

                黑色

                自然界中没有百?#32844;?#30340;黑色,我们日常生活中看到黑色其实是深灰色,如果设计中使用了纯黑色,会显得不自然。因为纯黑色可以压倒一切,盖过一切其他元素。

                26.jpg

                视觉层次

                在深色界面下面更应该注重视觉层次,每个版块之间的对比要清晰明了,层次分明,否则用户会很容易在布局间迷失,造成不好的体验。

                27.png

                28.jpg

                29.jpg

                留白

                深色界面给人沉重的感觉,?#23548;?#30340;布局会加重这种感受,所以在深色界面下我们更应该使用留白,或者说是“留黑?#20445;?#36825;样才能平衡布局,使元素更清晰的呈递,从而吸引用户注意。

                30.jpg

                31.jpg

                结语

                以上这些就是我在设计深色界面时,对一些小细节的梳理。其中有几点在浅色界面下也同样适用,只是在设计深色界面时更应该把握好那个“度?#20445;?#26469;弥补深色界面的缺点,扬长避短,使深色界面在普遍的浅色系界面下脱颖而出,展现个性。


                1
                11
                分享到:

                0

                ?#19981;?#20182;,就推荐他上首页吧^_^

                最新推荐

                ×

                赛事服务联系方式

                0371-86068866

                4008887269

                [email protected]

                好的,我知道了

                官方微信

                联系我们

                • QQ:
                • 电话:0371-86068866
                • 投稿:[email protected]
                • 地址:郑州市国家大学科技园东区9号楼2层

                版权信息

                  移动 Android 版 豫 ICP 备16038122号-2 豫公网安备 41019702002261号

                福建十一选五现场 浙江快乐12选5开奖结果 福彩3d012路分析图 山东群英会开奖视频 内蒙古快3 六肖中特公式合彩 北京赛车机器人官网 福彩欢乐生肖游戏上市 长城网体彩频道 三分彩计划网页版 2019年七星彩走势图表 双色球单挑一注 快乐12中5个号多少钱 快3二不同投注技巧 梦别人说重奖号码 胜分差是什么意思啊