Redesign之移動界面風(fēng)格設(shè)定(20150803-20150807)

redesign工作還在繼續(xù),原型圖也畫的差不多,馬上要進(jìn)行的工作就是UI設(shè)計(jì)了,找設(shè)計(jì)參考的事情我是感覺屬于未雨綢繆,工作從來是喜歡有計(jì)劃有彈性的進(jìn)行。移動界面風(fēng)格的設(shè)定一定是要緊跟潮流,2015年度移動界面的趨勢是什么?發(fā)展方向?在知乎里搜了一下類似的總結(jié),同時也在設(shè)計(jì)網(wǎng)站上看了其他設(shè)計(jì)師分享的作品,根據(jù)自己對潮流趨勢和redesign工作的理解,分享一下自己的觀點(diǎn)

關(guān)鍵字:Material Design、扁平、沉浸、縱深、卡片式、統(tǒng)一


Material Design

2014年6月谷歌I/O大會發(fā)布的設(shè)計(jì)語言,當(dāng)時對于自己的感覺就是谷歌各個平臺設(shè)計(jì)操作趨向統(tǒng)一、交互小動態(tài)的融合在扁平化當(dāng)?shù)赖脑O(shè)計(jì)上融入了一些趣味性(或許是對當(dāng)時扁平化出入的一個回答?)卡片式的流程操作,讓我在當(dāng)年年底就購買了MOTO G更新到了5.0版本體驗(yàn),事實(shí)感覺也是很不錯的,耳目一新的操作方式,交互動效也是對于現(xiàn)實(shí)物理動作的延伸,不會感覺到有所突兀并也享受其中。

Material Design動畫

扁平明亮

扁平化從iOS7發(fā)布以來就開始普及,之前的擬物化我感覺就是現(xiàn)在material design的前身,這么說的理由就要從擬物化設(shè)計(jì)的初衷開始而談。當(dāng)年喬布斯在iPhone上開始擬物化設(shè)計(jì)的初衷,應(yīng)該就是讓用戶在使用智能手機(jī)的時候,不會在這個新的平臺感覺到陌生反而能找到生活中的一些熟悉的物品也就是日常生活的相關(guān)隱喻,典型的例子有passbook、日歷、時鐘等等等很多,完全把現(xiàn)實(shí)的物品拿到了屏幕中,高光、陰影、材質(zhì)這些都是為了完美的偽裝現(xiàn)實(shí)中的物品,也做到了,不是嗎?我們接受了智能手機(jī),因?yàn)樯鲜挚?,學(xué)習(xí)陳本低。但這種完美的虛假畢竟也是假的,在我們適應(yīng)了智能手機(jī)后,還能對這樣過分的光影能容忍多久呢?我想也是這時候扁平化應(yīng)運(yùn)而生。



擬物化設(shè)計(jì)


扁平化設(shè)計(jì)

至于為什么說明亮,我出發(fā)點(diǎn)只是基于Material Design,風(fēng)格的定義問題還是要依據(jù)自己產(chǎn)品的氣質(zhì)。不過明亮簡潔的設(shè)計(jì)會給到用戶操作簡單的心理暗示,視覺負(fù)擔(dān)也會減少。


明亮的扁平化設(shè)計(jì)

活潑的色彩點(diǎn)綴是不是讓你感覺更輕松呢?白色的主色調(diào)配以黑灰色的文字信息,漂亮的清晰大圖,明度亮度都很高的色彩點(diǎn)綴是對以上靜態(tài)頁面的視覺語言的小小總結(jié)。

沉浸

沉浸就是讓人專注在當(dāng)前的目標(biāo)(由設(shè)計(jì)者營造)情境下感到的愉悅和滿足,而忘記真實(shí)世界的情境

沉浸式設(shè)計(jì)意在減少用戶所關(guān)注內(nèi)容外的干擾,讓用戶可以集中注意力去執(zhí)行其預(yù)期的行為,并且可能會利用用戶高度集中的注意力來引導(dǎo)其產(chǎn)生某些情感與體驗(yàn)。

在《iOS7人機(jī)交互準(zhǔn)則》中沉浸式體驗(yàn)是指游戲產(chǎn)品,類似于雅虎天氣這樣全屏精選高清背景圖、UI輕量極簡的設(shè)計(jì)我也把它歸類為沉浸式設(shè)計(jì),讓用戶專注于天氣本身,而不至于被其它視覺設(shè)計(jì)元素所打擾。


雅虎天氣

縱深(分層界面)

新學(xué)到的詞,原作者在他的觀點(diǎn)中具體的闡述了這一項(xiàng)(原文地址:Mobile:2015 UI / UX Trends)在虎嗅上有中文翻譯,這個概念作者稱作分層界面。利用Z軸的分層幫助用戶理解不同條目之間的主次關(guān)系,將注意力集中到用戶需要關(guān)注的地方。

感覺也是今天的扁平化向昨天的擬物化的致敬,由強(qiáng)寫實(shí)的3D縱深到扁平化的分層界面,都是為了給用戶提供一種更直觀的體驗(yàn),而落實(shí)到扁平化設(shè)計(jì)中表現(xiàn)出來的就是分層界面。


Mobile:2015 UI / UX Trends


Hotel Tonight

卡片式

卡片式設(shè)計(jì)是從Material Design中最具代表性的設(shè)計(jì)風(fēng)格之一。Google將其稱為"Inside Out Design (由內(nèi)而外式)"。 而卡片式設(shè)計(jì)的本質(zhì), 是更好的處理信息集合


谷歌卡片式設(shè)計(jì)1
谷歌卡片式設(shè)計(jì)2

卡片式設(shè)計(jì)有一個很明顯的優(yōu)勢,單獨(dú)出現(xiàn)的時候靈活,大批量出現(xiàn)的時候又能連續(xù)統(tǒng)一,也被稱作谷歌設(shè)計(jì)的“狗皮膏藥”,哪里需要貼哪里,卡片的適用性也廣泛應(yīng)用各個屏幕平臺,在不同屏幕上同時也保證著用戶體驗(yàn)的的一致??ㄆ皆O(shè)計(jì)的框架有效的約束了頁面的信息布局,卡片的周邊留白微弱投影更加凸顯當(dāng)前信息。

交互

交互在使用場景中的應(yīng)用為扁平化設(shè)計(jì)增添了不少操作的樂趣和參與感,也能夠區(qū)分出來不同的操作目的并加以記憶。例如刪除一個app的時候晃動的框體;網(wǎng)上購物時被添加的商品會隨著軌跡掉落到購車的圖標(biāo)中;下拉手勢的刷新中意外出現(xiàn)的品牌的動態(tài)形象,并會隨著拉動的程度不同表現(xiàn)等等這些有趣的動態(tài)交互為界面加分不少。


dribbble

最后PO一張正在做的Redesign移動界面效果圖,過程稿。下周繼續(xù)咯!


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容