Redesign之移動界面風格設定(20150803-20150807)

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

關鍵字:Material Design、扁平、沉浸、縱深、卡片式、統一


Material Design

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

Material Design動畫

扁平明亮

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



擬物化設計


扁平化設計

至于為什么說明亮,我出發點只是基于Material Design,風格的定義問題還是要依據自己產品的氣質。不過明亮簡潔的設計會給到用戶操作簡單的心理暗示,視覺負擔也會減少。


明亮的扁平化設計

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

沉浸

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

沉浸式設計意在減少用戶所關注內容外的干擾,讓用戶可以集中注意力去執行其預期的行為,并且可能會利用用戶高度集中的注意力來引導其產生某些情感與體驗。

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


雅虎天氣

縱深(分層界面)

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

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


Mobile:2015 UI / UX Trends


Hotel Tonight

卡片式

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


谷歌卡片式設計1
谷歌卡片式設計2

卡片式設計有一個很明顯的優勢,單獨出現的時候靈活,大批量出現的時候又能連續統一,也被稱作谷歌設計的“狗皮膏藥”,哪里需要貼哪里,卡片的適用性也廣泛應用各個屏幕平臺,在不同屏幕上同時也保證著用戶體驗的的一致。卡片式設計的框架有效的約束了頁面的信息布局,卡片的周邊留白微弱投影更加凸顯當前信息。

交互

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


dribbble

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


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,833評論 25 708
  • [設計思維] [用戶體驗] 封面用研整編文章(附視頻) 目前全球的主流界面設計語言為蘋果、谷歌、微軟三家 ,它們在...
    CoverUER閱讀 4,317評論 0 5
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,871評論 22 665
  • Emacs tutorial. See end for copying conditions.Emacs教程。可以...
    ShualLiu閱讀 359評論 0 0
  • 透過的天空的黑 是最美的精靈 情人的肩膀上 他們在畏畏縮縮 輕輕拍打 又似凡塵下落 如花綻放
    青山白鷺閱讀 196評論 0 0