20年IT培訓經驗
累計20000人高薪就業

學全網優化 100%推薦工作

400-0431-885

學全網優化 畢業100%安置工作
世紀首頁 > 全網營銷 > UI設計 > 長春UI設計學校_8個手機端網站案例

長春UI設計學校_8個手機端網站案例

  • 發布時間:2020-07-26
  • 文章作者:長春全網優化培訓
  • 文章來源:長春UI設計學校

  2011年,Luke Wroblewski大神提出了移動優先的設計理念。在當時看來這無疑是一個打破行業常規的新型設計原則。而在移動互聯網大行其道的今天,誰遵守移動優先的設計理念,設計出最好的移動端網站,誰就能贏得用戶和商機。由此,移動端網站設計的重要性對各大商家來說,毋庸置疑。今天長春UI設計學校就和大家分享一些UI設計中的非常不錯的界面效果,以及如何設計好移動的界面的一些技巧。

  “先完成web設計再移植移動設計”的常規模式已經不再適用, 移動化必將是未來互聯網行業的發展趨勢。所以移動優先的網站設計將會變成一個新的潮流,即便這個理念已經存在了好幾年。

為什么移動優先設計理念如此重要?

  1. 據《全球互聯網報告》,截至2016年,全球智能手機用戶已達28億。

  2. 與此同時,人們每天在移動端使用網絡的時間越來越長。

  3. 早在2012年,全球智能手機的銷量就超過PC電腦的銷量。

  移動端需求的爆炸式增長,要求設計師在進行產品設計時,重視產品的移動端版本,遵從移動優先的設計原則。我相信,這些理由已經足夠讓設計師和商家們好好研究移動端網頁設計,并從中獲益。

有哪些優秀的移動優先設計案例?

  今年YouTube的改版就已經體現了“移動優先”設計的權威。Material Design 體現出“桌面版是移動版的從屬”這一設計思想。正對應了微軟現任 CEO 納德拉喊出來的口號——“移動優先”。

  對這句話的最通俗的解釋就是:以前,手機版是“縮小了的桌面網頁”,而現在桌面版是“放大了的手機 App”。那么,借此機會,我們列舉了8個遵循移動優先設計理念的網站案例供大家學習和參考。

  1. YouTube

 

  設計亮點:按鈕、文字顯示留白

  夜間模式

  YouTube桌面網頁版的Material Design設計語言,也體現出了強烈的優先照顧移動設備的特征。響應式設計自然是應有之義,按鈕以及文字顯示的大量留白,無疑是為了適應小屏幕觸屏的使用。

  新采用的夜間模式也顯示其對移動設備的臣服。桌面版設備界面大多是白色背景,而在移動端更好的方案則是使用屏幕偏黃光的夜燈模式,而不是整體界面都變成黑底白字。在所有光源都取消,且屏幕尺寸不大的情況下,手持設備用黑底白字的界面同時降低亮度,才會讓眼睛更舒服。

  2. Apple

Apple

 

  設計亮點:便捷的滾動式導航

  根據Nielson/Norman Group,它所發表的一篇用戶體驗調查研究顯示,隱藏導航(如漢堡導航)會減少21%的內容可發現性,并平均增加使用導航2秒。而蘋果網站的內容被布局的非常棒,所以我并不需要使用導航按鈕,我可以通過滾動頁面,十分便捷地獲取信息。一個購物袋的圖標按鈕通常是有必要且一目了然的,以符合用戶的購買需求。如果瀏覽頁面后仍獲取不到所需信息,我可以在底部導航中深度檢索得到想要的信息。

  3. Pitchfork

 

 

  設計亮點:拇指化設計

  雖然現在有許多拇指化區域的研究,但仍有許多網站與應用將導航放至屏幕頂部。因為大家都是這么做的。但如果你留心拇指觸及區域,你會發現手機越大,屏幕外部邊緣區域的內容越難以被用戶接觸到。而類似Pitchfork這樣的移動網頁則是將網站主導航欄放在屏幕最底部,拇指最容易觸及到的地方。隨著移動設備持有量的不斷增長,這樣的設計也將是未來所向。

  4. Typeform

Typeform

 

  設計亮點:大菜單按鈕–非常適合觸屏操作

  Typeform的桌面網站設計非常精美,簡潔的副本,高清視頻,動畫等設計元素。但是復雜的設計組件對移動端用戶并不友好,比如視頻和動畫可能會顯著影響頁面加載時間。因此,他們在移動端網頁上刪減了許多不必要的設計元素,但保留了適合在移動設備上操作的大菜單按鈕,簡單卻不失精美,簡化了整體移動體驗。

  5. Airbnb

  

 Airbnb

 

  設計亮點:卡片式設計

  卡片式設計更易在有限時間內讓用戶與信息相互聯系。這也是谷歌選擇卡片式設計作為他們設計標準的原因。其他互聯網公司例如Airbnb也逐漸認同并采取這個做法。每張卡片的信息傳達簡潔而有效,通常由一個標題、圖片、圖表或是一段簡介文字組成。這種設計為用戶提供了足夠的信息并且方便他們決定是否想要繼續更深層次了解更多信息。

  6. Smashing Magazine

  

 

  設計亮點:重視用戶,合理優化屏幕使用空間

  數據顯示,越來越多的互聯網用戶選擇阻止他們不想要的內容,尤其是移動端用戶近年來攔截廣告的趨勢直線上升。不變的導航設置、滿屏幕的廣告宣傳、過度的市場術語使用,這些并不能為用戶帶來良好的用戶體驗。如果你想推送用戶廣告或引導用戶繼續閱讀,可以循序漸進地根據用戶瀏覽的內容選擇性推送。經過策略性排版的內容也更容易讓用戶主動點擊,從而提升用戶體驗。如果只是單純的為了獲取利潤而打破用戶體驗或者讓他們跳轉頁面,逐漸的用戶會越來越少,利潤也會隨著用戶的流失而減少。

  7. Facebook

  

Facebook

 

  設計亮點:有效的動畫效果

  在網頁中出現的動畫是輔助用戶形象地了解當前事物,賦予用戶體驗更強的表現力與人性化,而不是娛樂大眾。例如Mailchimp將其運用為寄信成功后的擊掌,Twitter在轉發或喜歡功能上使用的小動畫,再比如Facebook制做的形象生動的表情包。但如果你想在頁面上制作動畫,請確保它是雅致而得體的。

  8. Evernote

  

 Evernote

 

  設計亮點:干凈清爽的手機UI界面

  Evernote主要是提供筆記存儲服務,允許用戶在全平臺的設備上訪問。因此Evernote也必須獲得正確的移動體驗。和桌面版的網頁設計一樣,Evernote的移動端網頁設計也是同樣的保持了干凈清爽的UI界面設計。此外,網頁上恰到好處的CTA按鈕對用戶來說是非常有用的。

如何遵循移動優先設計原則?

  打造一個符合移動優先設計原則的移動端網站,首先需要借助原型工具,例如Mockplus。

  第一步:登陸已有的Mockplus賬號或申請一個免費的Mockplus賬號;

  第二步:新建一個手機項目;

  

如何遵循移動優先設計原則

 

  第三步:思考布局。

  “移動優先”設計方法與“桌面優先”有所不同。移動設備中,我們需要考慮在小屏幕布局中呈現足夠有效的信息,并不是隨著頁面布局的改變而減少信息。

  在這個例子中,我們知道主頁應該具備的某些元素,比如網站的名字和應用logo。但并不是所有的桌面端網頁設計元素都適合運用到移動端設備上,所以我們首先根據旅游網站的目標來確定優先事項:

  啟動頁面、登錄注冊頁面、歡迎頁面、城市列表頁面、主頁、詳情頁面、搜索頁面、活動頁面、個人信息頁面等。

  第四步:效果呈現。

  

效果呈現

 

  Gogobot在線預覽地址:https://www.mockplus.cn/sample/post/656

  卡片式設計和滾動式內容展示符合移動端用戶的信息獲取和操作方式。既不會因為圖片過大搶占了有限的屏幕資源,上下滾動的內容獲取方式也樂于被用戶所接受。因為比起漢堡菜單,用戶會更樂意去滾動頁面。

  桌面端效果展示:Gogobot

  

桌面端效果展示

 

長春UI設計學校結語:

  通過今年Youtube的改版,相信今后會有更多的商家重視起移動優先的設計理念。也希望以上列舉的8個移動優先設計的案例能為你的新產品或新網站的建設提供一些參考思路。移動版受限于流量必須簡單粗糙,而桌面版則極盡華麗之能事。但現在“移動優先”幾乎成為一句“正確的廢話”,因為它變成了幾乎所有硅谷主流企業的常識。

上一篇:長春UI設計學校_平面如何轉UI?
下一篇:長春UI學校_巧用音量原理,打造優秀的引導體系

美工設計干貨分享:幾種常見的字

美工設計干貨分享:幾種常見的字

長春網頁設計學校_網頁設計過程

長春網頁設計學校_網頁設計過程

長春UI設計學校_2018年春夏流行色

長春UI設計學校_2018年春夏流行色

怎么為你的產品選擇最合適的顏色

怎么為你的產品選擇最合適的顏色



色五月色开心色婷婷色丁香_色狠狠色婷婷丁香五月_国产婷婷综合在线视频