2020年值得关注的手机设计趋势

相较2019年,2020年的手机设计趋势没多大变化,例如手势运用、色彩渐层、多层次的扁平设计、更大的粗体字等,这些在2020年都会持续存在,也更广泛地应用。

以下手机设计趋势摘自@mobilespoon<Mobile UX design trends to watch out for in 2020>,详细说明则多半换成我的换句话说:

1. Dark Mode 深色模式

2019年iOS 13推出深色模式后,当然就回不去了,毕竟Apple是设计界指标嘛。

一般设计师都知道「不要在白背景上使用纯黑色」,因为纯黑与纯白的搭配,太伤眼,在浏览及阅读并不是理想的体验,所以常改用深灰色取代黑色,让看起来的黑不是真的黑。

因此,同理来说,掌握好深色模式的重要原则是:

不要使用纯黑色当深底背景。

在深色模式越来越常见的趋势下,深灰色依然是个好选择。虽然我们现在偶尔还是会看到用纯黑配纯白的网页或APP,不过相信今年都会持续被改善。

Image for post

「眼前的黑不是黑,你说的白是什么白。」图片来源:@mobilespoon

2. Giant phones are the new standard 大萤幕手机是新指标

没错,大萤幕手机不再是「趋势」,它现在是「指标」。

台湾消费者对大萤幕手机的偏好更明显,在2019年12月的热销机种排行榜 中,前十名都是6吋以上的大萤幕手机包办。

不管你是不是大手机持有者或爱好者,介面设计及操控上都得为大萤幕多想一下。

Image for post

图片来源eprice.com.tw

3. Diversifiable design 更多样式的设计

大萤幕带来更大的画面,因此在同一屏内,就能搭配多种形式的图样,例如快捷键、限时动态、轮播照片、标签列…等。因为版面变大,即便不同元素同时存在,也比较不容易显得杂乱。

当老板或客户任性地说:「这些我通通都要放首页!」的时候,也绝对没有问题的喔。(并不是!)

参考案例:Yelp

Image for post

画面变大,排列不同元素时也不会显得杂乱。图片来源:@mobilespoon

4. The branding is gone, but the brand remains 品牌不见了,但品牌的元素还是随处可见

品牌识别色及图样逐渐被淡化、甚至隐藏,因为现在是「内容当道」。

大家熟悉的Instagram正是如此,他们逐步消去不必要的视觉主色和视觉效果,把色彩与空间释放出来,让用户更容易聚焦,把注意力放在对他们来说真正重要的— — 贴文内容。

Image for post

淡化品牌识别色与图样,帮助使用者更聚焦在内容主体。图片来源:@mobilespoon

5. Navigation controls go all the way to the bottom 导览控件跑到画面下方啦

手机萤幕越来越大,但是手没有变大啊!所以单手操作时,点击画面上方就变得很困难。在设计或开发上,如何维持操作的易用与手顺也就更重要。

呼应「大萤幕手机成为新指标」的现在,已经可观察出以下几个设计转变:

  • HOME键及主要导航列移到画面下方,或是由画面侧边开合
  • 重点操作功能如搜寻框,安排在画面中间或下方
  • 新资讯的揭示呈现是由下往上

Image for post

HOME键与主要控件移到下方,与由下往上的资讯揭示的案例。图片来源:@mobilespoon

Image for post

安排在画面下方或中间的搜寻框,与由下往上的资讯揭示的案例。图片来源:@mobilespoon

怎么思考操作易用?继续阅读:手机拿法也能影响介面设计,谈谈拇指法则

6. Stories are becoming a design pattern 限时动态正成为设计样式的一环

感恩Instagram,现在我们都很熟悉画面顶端的小横杠代表什么、怎么操作。

「限时动态」的最大优点,就是使用者拥有更自由的的操作手势,只要在画面任何一个位置「点击」就可往后浏览,不再受限于特定的图标或区域。

当然你还能针对「长按」、「上下左右滑动」等手势,做更多设计。

Image for post

图片来源:@mobilespoon

7. Is that skeuomorphism in your pocket or are you just happy to see me? 再次拥抱拟真设计吧

拟真设计似乎卷土重来了,左边多一点的隐影处理、右边加一点3D效果,相信都能使整体设计层次与浏览体验更加丰富。

不相信?iOS13 都改了,你说呢?

Image for post

iOS 13的备忘录,阴影跟3D都回来了~图片来源:@mobilespoon

杂杂的心得

  • 原文多数提出的案例参考,对于不在欧美市场的消费群或使用者(也就是我)来说,很难有共鸣。因此就姑且不放。
  • 案例中的IMDb介面,我透过手机浏览网站与app,搜寻框还是在上方,所以无法实际感受「把搜寻框移到画面下方」的操作差异。
  • 大尺寸萤幕带来的手势改变与操作挑战,是过去比较少思考的,所以自己今年最想实践的(并且说服客户买单的),就是迈向「在手机介面把导览控件移到画面下方」的这条路,让浏览时的操作顺畅度更好。