移動網際網路時代的悄然襲來改變著我們的生活方式,因此有大批設計力量湧入了移動端的設計領域中,這也說明了大家越來越重視使用者在各個裝置終端層面的體驗。在規劃產品時,往往會把PC端和移動端的產品放在同等重要的地位進行思考。然而,裝置的多樣性和產品形態的多樣性為設計師們帶來的既是更多的發揮空間,也同樣是更大的挑戰。這些產品在設計之間有何不同?如何規劃不同平臺上產品的功能?設計時有哪些差異?2014移動端的介面設計是非常值得探討的話題。

唯一主色調

2014年,追求極簡設計風格,主色調可能只是選定一種色彩,然後調整透明度或者飽和度,(說得通俗些就是將色彩變淡或則加深),從而產生新的色彩,這樣能夠很好的表達介面層次、重要資訊,並且展現良好的視覺效果。這樣的頁面看起來色彩統一,有層次感。當前上線的一些移動應用都採用極少的色彩,甚至放棄所有的顏色。僅僅用一個主色調就能展現良好的視覺效果。

 

多彩色風格設計

Metro 引領的多彩色風格是與唯一主色調形成對照關係的設計風格,多彩撞色更多的表現於多種純色塊的使用,就是很簡單的純顏色,只需要注意多彩配色的方式,就能得 到很好的視覺效果。多彩色拼接的設計風格,一屏式的頁面排版佈局,總體來說是時尚大氣簡潔的設計。“多彩撞色”的概念,在2014年手機端仍會繼續發展。

資訊框架扁平化

在設計的表現形式上我們追求介面扁平,注重通過弱化視覺效果來強化應用的功能。在移動裝置上,過多的層級會使使用者失去耐心而放棄對產品的使用。而且移動端上 頁面小,沒太多地方擺多層的tabs導航或者麵包屑導航,就只剩下左上角的一個“返回”按鈕作為導航了,可以一次接一次的深入,但跳轉了三、四次後,再看 左上角的“返回”按鈕,你已經很難判斷出將會返回到哪裡了。應該從資訊架構角度,再進一步的去應用扁平化的設計理念,資訊框架扁平化的目的是減少資訊層 級,追求資訊到達使用者的最短距離,從根本上解決上述問題。
扁平化思想是一種讓設計者在介面設計過程中減少資訊層級的思想。

動態資料視覺化

資料視覺化設計是將枯燥繁瑣的列表和文字轉換為直觀的餅圖、扇形圖、折線型、柱狀圖等豐富直觀的設計元素,提高使用者體驗。而且現今資料視覺化不只是靜態展現 資料,使用者希望通過互動及時獲取資料流,若以動態效果來呈現,能多維度呈現給使用者實時資訊,同時能與使用者形成互動,提高資料表現的趣味性。動態資料視覺化 將更加強調資料轉譯實時更新的圖形,以及動態的圖形化表達。

移動端的視差效果

視差滾動是時下比較熱門的網頁設計技術,通過讓多層背景以不同的速度移動來形成立體的運動視差效果,雖然純屬視覺效果,但不可否認在內容滾動時形成的視覺體 驗非常出色!視差效果在網站中的應用並不少見,若在移動應用中,是否也能運用一些精細的視差效果,為使用者帶來全新的視覺體驗。當使用者在傾斜和移動螢幕時, 視差能讓使用者在螢幕上看到如3D一樣的視覺效果,帶來非常出色的感官體驗。

分層結構

分層結構是通過動效擴充套件了螢幕空間,渲染出帶有縱深感的層次,將操作區和內容區劃分開,培養使用者使用習慣,使人印象深刻,達到意想不到的效果。這種設計更專注於內容,更多的暴露資訊,減少結構層級,操作高效。

迎合使用者的使用習慣

迎合使用者的使用習慣,主要為了讓使用者在操作中簡單到極致。使用者不喜歡經常重複性輸入一些資訊,如個人賬號,安全資訊,操作習慣,下次操作行為等,這些佔用了使用者完成其他重要任務的時間。儘量減少使用者的輸入,並且使用者在輸入時可以給出適當的參考。
根據使用者的行為習慣,對移動應用的整體佈局進行重新策劃,使得簡單、簡單、再簡單、簡單到極致,通過清晰的流程和介面,讓使用者減少對應用的思考以及尋找的時間;讓準確的色彩和表述減少使用者心理鬥爭的時間。

提供明確的導航

導航在移動介面設計中是至關重要的,導航的主要作用在於:告訴使用者,我在哪?我去過哪?我可以去哪?我怎麼去哪?我去哪能幹什麼?等等,這些都是導航的作 用。明確的導航設計,可以增強使用者的體驗,讓使用者直接在主介面就可以看到對應子介面中的資訊,減少使用者盲目的操作。在任何地點都能回到主介面或退出應用, 因此導航上的每個操作對使用者來說應是符合邏輯的,使用者能夠較容易瞭解它要表達的資訊與情感。

主操作欄的內容不易過多

主操作欄的作用是為了把最重要的內容展示給使用者,一般不超過三項。過多的內容會對使用者造成干擾。因此簡潔的主操作欄便於使用者的使用和了解,並且減少使用者發生錯誤選擇的可能性。操作欄上的操作按鈕一般用來展示最重要、常用,而且頻繁使用的功能操作,比如移動端介面左上角的返回按鈕。

以使用者為中心

使用者總是按照他們自己的方法理解和使用移動端,所以從使用者的觀點考慮,想使用者所想,做使用者所做成了設計師們的設計考量標準之一。比如使用者在沒聯網的情況下傳送資訊或發表評論,相應的內容會自動儲存在手機端,聯網後只需重新傳送即可,不需要重新輸入內容。

合理的使用者引導

由於手機介面的承載能力有限,產品功能的不斷膨脹,必須要在使用者開啟應用之後告知他某些新奇的功能,引導他完成某些主要任務流程,幫助使用者快速掌握應用的使 用方法,讓使用者快速體驗到應用的樂趣,激起使用者對功能的嘗試慾望。引導語句必須簡短,聚焦在最重要的任務上,減少使用者的思考時間,讓使用者不至於迷失在陌生 應用中不知所措。同時也要避免接連不斷的展示引導資訊,這樣不僅會產生短期加重記憶方面的問題,而且會讓新使用者覺得你的應用過於複雜,望而生畏。

擬真動態

將現實中的運動現象簡化抽象,形成了移動端中一些蠻有特色的動畫效果。比如天氣應用中,全屏的氣象動畫優雅而逼真,洋洋灑灑的雪粒、悠然飄浮的雲朵、劃破天際的閃電傳達出一種獨特的表現力,給使用者更完整,更真實以及更具趣味的感官體驗。

儘量使用圖形元素

眾所周知,圖形相較於文字更易於記憶和了解。最合理的方式是:“恰當的圖形元素+簡短的文字”,並整合到一個展示層面上,這種方式既有利於使用者閱讀,也可以 使多步驟的流程更直觀、易懂、易記憶。採用的圖形儘量簡單易懂,形象具體。避免讓人產生歧義的圖示,因為這樣反而會誤導使用者,損失設計互動體驗。比如圓形 是最容易讓人覺得舒服的形狀,尤其是在充滿各種方框的手機螢幕內,增加一些圓潤的形狀點綴,立刻就會增加活潑的氣息,徒增好感。移動介面運用圓形選項按鈕 來設計,讓選擇變得專注而明確,又不刻板老套。

總結:

移動端的設計根據不同產品的戰略和具體情境,設計要進行靈活變化。其提倡的核心原則就是從使用者出發,充分考慮使用者的使用體驗。本文對移動端介面設計進行粗淺的分析,希望給大家帶來一些思考和幫助,有不足之處歡迎指正,也與諸君共勉。

作者:Anyforweb UDC中心