如何设计更好的UI深色模式.docx

《如何设计更好的UI深色模式.docx》由会员分享，可在线阅读，更多相关《如何设计更好的UI深色模式.docx（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、通过一些案例进行比拟与实验，探索如何将UI深色模式设计的更好。iOS作为UI/UE设计的风向标，一直是行业的引领者，不管你愿不愿意承不 成认，他的每一次更新变化总能带动UI设计行业的一些大大小小的变革，并 且产生更多的追随者，比方当年的iOS7开始的扁平化设计风格，对后续设计 风格的影响直到现在已经7年了。. Orange- 3G 10：3171 %*_Messages Calendar Photos CameraApps Clock Weather Settings在最近半年，iOS在UI设计风格上最大的变革莫过于DarkMode （深色模 式），在DarkMode之前，我们熟悉的UI界面往

2、往都是浅白色界面为主，而 从iOS13开始正式使用了 DarkMode,界面突然可以变深色了，苹果官方说 这样设计可以让眼睛更舒服的长时间阅读，为革命保护视力，而且更加省电 增长续航，具体结果我们不得而知，需要科学家们去验证了，但是对于我们 设计师来说带来的挑战就是要“黑白无常”了。除了图标外框和形状的区别外，我们注意下 iOS图标的集合排列方式，你会发现iOS会把相 似颜色的图标尽量的放在一起，甚至是按照光 谱色排列，这当然不是巧合，让图标色彩阶梯 排列，界面自然就会整齐很多。iOS图标设计分析中国修通令23：3514%匚设置A刘佳Apple ID. iCloud. iTunes5 App

3、Store）飞行模式学无线局域网 ABOX-HOME-1152-150M蓝牙翻开，蜂窝网络电个人热点关闭vpnVPN未连接C?通知G）声音与触感C勿扰模式X 屏苒使用时间中国以通令13：10 40% 设置O通用名控制中心辅助功能翻墙纸iOS设计师的小心机你学会了吗A Siri与搜索带触控ID与密码SOS SOS紧急联络电池t隐私A iTunes Store 与 App Store 钱包与Apple Pay? 密码与帐户我们按照这个思路把刚才微信替换图标界面再排序一下!微信替换图标并光谱排序“II中国联通合) 朋友圈个视频号* 扫一扫摇一摇G 看一看VPN 搜一搜Cj附近的人3)购物C 游戏X

4、小程序cF 6通讯最“II中国联通合) 朋友圈个视频号* 扫一扫摇一摇G 看一看VPN 搜一搜Cj附近的人3)购物C 游戏X 小程序cF 6通讯最23：34卷 15%1二发现热门推荐 敝年鼓典，发车！ 目界面视觉体验明显整齐了很多是不是！疑问：为什么细线图标和无框图标会在深色背景表现不够好，而在浅色背景下就没 问题呢？是不是所有的UI都会存在这样的问题呢？我们再来看一些例子：你想看的电影吹唠人可以在线没看了口看电影,我的发布0我的关注国相册 豆列/收藏“富洪”过的内容在这里0订单国钱包W购物车a 1同书岳*小小修收的你想看的电影吹哨人可以在线观看了Q看电影,我的发布0我的关注国相册 豆列/收藏

5、欢”过的内容在这中叵（订单国钱包2购物车3,1 9)书毋小本我的豆辫我的豆辫我的豆瓣我的应用国贺卡B在线文档88QQ邮箱.ill中国联通令13：01 44%C邮箱+Q搜索编辑Ga Hotmail的收件箱1 Q bigdcc的收件箱4 帐户17713 23 QQ邮箱看来结论是一样的，线性图标在深色背景下的表现都是差强人意，反观带框 图标适应性很强，浅色和深色模式下均能良好的适配，我来分析一下原因。当年伽利略用望远镜往天上看，发现木星比金星大，换成肉眼看后金星那么 比木星大。他认为是眼睛的某种视觉特性造成了这种现象。德国物理学家赫尔曼把这种错觉称为辐照错觉，就是说在黑暗背景下，亮 度越高的物体看起

6、来面积越大。再来看一张图片哪个圆圈看起来更大，显然是黑色背景下的白色圆形，实际上这只是一种错觉，所有圆圈是一样大。光亮刺激会使得神经元产生非线性放大作用，导致刺激比实物本身看起来更 大，白色圆形更亮，所以看起来更大一些。线性图标是用线条勾画图案到达隐喻效果，一般线粗是2Px6Px像素。设计师在设计时候都是以最终视觉作为参考，而设计稿本身多是浅色背景， 所以在浅色背景的映衬下列图标视觉会显得稍大，视觉基本是平衡的，假如设 计是4px而呈现出的效果其实是6px左右。是不是觉得哪里有点不对了？按照这个逻辑黑色背景下白色线图标不应该是 视觉更大、更明显吗？我们还需要考虑一个因素，那就是色彩，之前的几个

7、界面案例的线性图标都 是彩色的，特别是黑色背景下，不同色彩的图标放在一起，会有明显的忽大 忽小的感觉，会让界面感觉非常凌乱。是不是感觉黄色最大，红色的最小？但是其实是一样的，这还是相同形状的，要是图标形状不同感受会更明显看一个实际中的例子:ill中国修通令12：58 45% 0g 。 日我要录= 我要相的作品创作中心婚作话翩 洛侬的洞I你在疫情结束后最悉俄的事我的服务我的订我的建包ffi指存有礼收系害也我的尊级我的听友施超级听友必备工具rnLJ扫一日O塞时关闭定时播放驾渡模式fi少年模式员WHr、质信.di令12：58 46% 0我要录我要直播援的作品创作中心狎作后加好生活劳动创造在线朗调活动

8、我的服务后$，、 0-0我的钱包我的订单我的尊圾我的听友由Q指再有礼色系喜照超级听友必备工具rji lTjGe扫一扫定的关闭定时播放制UN式少年式沔J KB L J喜马拉雅喜马拉雅由于都是单色线性图标，在浅色和深色下表现还都不错的，但是单色图标略 显界面单调，并不太建议这么设计。r1苧LJa 2hl 00毫无疑问，未来的UI场景需要适配多背景色风格，图标除了具备好看隐喻之外，更需要具备抗干扰性带框图标是一个不错的解决方法，大胆预测带框图标会将成为未来一段时间图标设计主流！结论1:深色模式中灰度色阶在一个界面最多可分为四层。2：为了适配深色模式，今后有框图标将会成为图标设计风格主流。3：同样为了

9、适配深色模式，细线图标将会被淘汰，剪影和粗线图标会流行起 来。4:图标除了个体设计上用心，在排列上也会极大影响到页面的整合视觉，光 谱排列法是个不错的选择。其实DarkMode从测试版算起已经差不多推出了有半年的时间了，一些知名 的APP产品早已经有了自己的兼容方案，同时iOS原生界面也给了我们很多 最正确实践案例，按道理大家对于DarkMode的设计方式方法应该已经掌握了 差不多了，但直到这几天微信正式推出了自己的DarkMode兼容方案，才发 现对DarkMode的探索还需要设计师们多多努力。谨以此文表达一下自己的 观点，不妥之处敬请海涵。从一个“列表页面”说起：列表试图(TableVie

10、w)是iOS中最常见的界面组件，一般常见于设置与栏目列表页面.III中国联通令设置刘佳Apple ID. iCloud、iTunes与 AppStor。g）通知09声音与触感B勿扰模式B屏幕使用时间ill中国联通台23：3514% 匚=.至I又直A刘佳Apple ID, iCloud. iTunesApp Store/飞行模式台无线局域网 ABOX-HOME-1152-150M*蓝牙翻开用蜂窝网络电个人热点关闭vpnVPN未连接。通知凶声音与触感1勿扰模式X 屏幕使用时间iOS设置iOS设置iOS设置iOS设置界面的浅色模式和深色模式看起来都非常协调。下面我们看看微信发现页面，这个页面和iOS

11、设置是很相似的。.III中国联通令23：36发现朋友圈热门推荐 力扫一扫性摇一摇大搜一搜55附近的人游戏年土典.发车！微信发现微信发现如果单独看微信发现页面的浅色模式实际效果还是不错的。但是直接转换到深色模式下就感觉突然差的很多了，甚至可以说是有点难 看，这次微信真的做了一次黑天鹅?到底是什么原因让微信发现页面在深色模式下视觉体验如此之差呢?我们不妨将两个功能布局都相似的深色进行放在一起进行一下比拟.III中国联通 令23：34发现朋友圈视频号热门推荐 扫一扫摇一摇搜一搜85附近的人购物游戏国年母典，发车！曰小程序通做餐发娱ill中国联通台23：3514% 匚=.至I又直A刘佳Apple ID

12、, iCloud. iTunesApp Store/飞行模式台无线局域网 ABOX-HOME-1152-150M*蓝牙翻开用蜂窝网络电个人热点关闭vpnVPN未连接。通知凶声音与触感1勿扰模式X 屏幕使用时间微信发现iOS设置组成色彩分析:与浅色模式相似，一个页面中除了彩色 灰度一般分为四个级别，通常应用场景A:背景色B:选项背景色C:文本色D:分割线A与B可相对大面积使用，C与D占比拟低.Il中国联通令23发朋友圈M视频号电扫一扫卷报一摇大搜一搜50附近的人0购物今游戏小程序会出信通义景。1中国联通令23I又直公刘佳 Apple ID、iCloud.；A飞行模式个无线局域网 ABI* 蓝牙州

13、）蜂窝网络口个人热点 VPNCj通知3）声音与触感V勿扰模式X 屏幕使用时间在色彩这块在这两个页面中微信和iOS基本保持一致，四层灰度设计能更好 的保持页面整体干净整洁且层次清楚，但是被A背景色上，微信的背景色选 择了黑色偏绿的颜色，应该是微信设计师还是想表达出产品的标志色原色。文字的颜色也较iOS略微深一点，但是在整体上影响并不大。#171917RGB:232523看来在主要色彩上并没有什么问题，那么为什么微信这个界面与iOS界面比 起来视觉上要感觉差一些呢？下面来看一下列图标图标设计分析:微信M照旧iOS 令* （丫） ?图标上的差异主要在于线宽与外框，微信采用无外框统一线宽的线形图标,

14、iOS采用的是有外框剪影图标。我们我们把图标进行互换会怎么样呢？峙示替换后的比拟.II 中DD联通令23：35 14%口I又直刘佳Apple ID、iCloud、iTunes与 App Store飞行横式W无线局域网 ABOX-HOME-1152-150M叨蓝牙翻开修窝网络个人热点关闭大VPN未连接他通知6声音与触感勿扰横式屏幕使用时间ill 中DD联通令23：34发现朋友圈个视频号热门推荐 *扫一扫州摇一摇Cj看一看VPN搜一搜附近的人3)购物 游戏，年经典.发车！ X噌序 公。a0信通由豪我iOS设置微信发现观察到了吗？别看错了！是的，我把故意位置做了对调，左边是iOS,右边是微信。替换图标后的微 信明显加分不少，整个界面都整齐多了，而iOS换了图标后明显变得不够整 齐了，潦草很多。那么结论是微信的无框线性图标在深色模式下兼容有问题？是的确实如此。但是等一下，还有一些细节你注意到吗？换了图标的微信界面和之前的iOS 界面比起来明显还是有点不够整齐，为什么呢？来我们回过头来从细节再看一下iOS界面。