在考慮運用哪些用戶體驗相關技術的時候。它們的美學特征可能是相當值得我們深思的。目前我們所看到的許多網站上所使用的設計理念和技巧。其實也可以很好地投入到App設計中。只不過細節(jié)和樣式可能需要稍作調整。以適配更小的、高清的屏幕。對于熟知桌面端網頁設計的設計師而言。接下來的7個設計要點能幫你快速轉向移動端設計。網頁設計讓你看起來像是的移動端UI/UX設計師。

1、大膽鮮明的排版

更簡單的字體排版在小屏幕上具有更強的易讀性。尤其是在光線較暗或者逆光的情況下。這也是推動非襯線字體在移動端上廣泛運用的重要原因之一。

幾年前。隨著設計趨勢的大幅轉變。設計師們更加傾向于選取筆畫更加厚重、風格更加大膽的字體類型。此外。字體的尺寸也很重要。越來越多的移動端頁設計開始借用尺寸超大、極具表現力的字體。營造出前景和背景的明顯對比。打造炫目的效果。以便于用戶瀏覽、導航。

這種趨勢的優(yōu)勢在于。大家開始更加注重于界面內容的可讀性。不過在英文界面中。有一個問題需要注意。就是要盡量克制地使用大寫字母。以 The Weather Channel 為例?！癝UNNY”這個詞只有5個字母也就算了。但是如果去是其他的天氣所用字母數量較多。視覺上可能會相當的累贅。在中文的字體設計中也要盡量避免文案過長、過于復雜的問題。

所以。此處應當注意兩件事：

·排版和內容應當盡量保持簡單

·背景和文字的對比度應當盡量明顯。保持大可讀性

2、圖層和深度

Material Design 作為當前重要的設計趨勢而言。已經被反復強調和提及了。這并不是沒有道理的。

先。它是Google 所推出的設計平臺。作為一個實力型巨頭推出的產品。無疑會吸引大量的相關從業(yè)者跟進。并且目前狀況就是這樣。Material Design 本身的設計理念也相當的直觀易懂。不論是用來設計還是對于用戶而言。都相當的不錯。

Material design 引人矚目的地方在于。其中的圖層創(chuàng)建對于用戶使用和交互設計都有極大的幫助。今天。Material design 風格的界面已經遍地開花。許多iOS平臺的應用都開始遵循這一設計規(guī)范。

真正讓這些圖層發(fā)揮作用的技巧非常的微妙。圖層之間的區(qū)分靠的是曾經“被大家所嫌棄”的陰影。它們非常淺但是很自然。同時它們還是視覺和交互的線索。下面的圖層是信息的入口。而頂層的圖層則是交互的工具和元素。

看看Uber的設計。地圖圖層位于整個屏幕的下層。通過移動底部圖層來設定上車位置。頂層的按鈕則用來下單。不同的層承擔著不同的功用。提供不同的交互方式。

3、單色配色方案

在小屏幕上使用純粹的黑白配色是吸引用戶注意力的好辦法。此外。還可以使用相對少見、大膽的配色。這樣也容易脫穎而出。又或者使用添加其他的配色方案讓用戶選擇他們自己喜歡的配色方案。

單色配色方案的好處在于更容易營造一致、統一的視覺體驗和感覺。正如同 Streeks 這款應用的設計。用戶可以設定目標。然后App會提醒你完成任務。用戶可以基于任務類型來設定色彩。并且推送簡單的信息來告知你需要完成的事情。

單色配色、圖標和簡約的字體在一起形成了令人驚艷的組合。易于閱讀也便于交互。這種設計已經足夠完備順滑。吸引用戶在待辦事項中添加更多的事情來完成。

4、專注于微交互

那些足夠優(yōu)秀的App當中。通常都會包含著許多順滑無縫的優(yōu)秀微交互。來溝通不同的界面、動作和交互。微交互通常會很容易被忽略。但是在許多App當中。他們會作為必須的過渡、交互引導和效果提示而存在。所以相當的重要。

微交互的存在。主要還是幫助用戶完成一些事情。從文本消息通知、消息推送到微博上點贊的提示。近乎無處不在。它們還有一個主要的功能：取悅用戶。

微交互的主要功能可以這樣總結：

·提供信息反饋。比如在Instagram 中點贊之后出現的提示特效

·呈現動作。比如點贊之后心形會從透明鏤空變?yōu)榧t色

·幫助用戶操作或者發(fā)現某些東西的存在。比如點贊之后。會有推送信息出現在通知欄?；蛘邚棾隹蛑苯痈嬷?/p>

5、卡片式設計

卡片式設計早見于pinterest 。隨后在Facebook、SoundCloud等網站上流行開來。成為了真正意義上的主流設計。不過今天的卡片式設計很大程度上受到了Material Design 的影響。

不論是對于設計還是對于開發(fā)而言?？ㄆ际谴罅績热莸目煽枯d體。每個卡片都可以承載不同的元素。作為不同的模塊。實現不同的功能。

所以。你可以讓一個卡片播放視頻。緊接著的卡片則鏈接到另外一個應用。而下方的卡片則直接放置了一段長長的文字?？ㄆ皆O計在移動端上的另外一個優(yōu)勢就是非常的易用。尤其是在有App之內。絕大多數的應用會在一個屏幕內承載兩個卡片。就像 SoundCloud 這樣。又或者一屏就是一個卡片。這樣一來。即使用戶的手指再粗也不會錯過任何內容!

6、簡單的導航

隱藏式菜單、彈出式導航和大按鈕是不容忽視的設計要點。如今App屏使用的菜單數量正在逐步減少。寸土寸金的App頁上不再放置大量的菜單按鈕。隨之而來的是隱藏式菜單的流行。

有趣的是。越來越多的用戶并沒有被隱藏式設計惹惱。他們已經熟知漢堡菜單中隱藏著更多的選項。當然。使用漢堡菜單的技巧在于。其中隱藏的菜單應當是非常實用的功能和選項。而菜單按鈕本身也應當顯眼而靈敏。

Slack 絕對是導航菜單設計中的典范。它的菜單可以從屏幕的左右兩邊彈出顯示。而主要功能菜單是從右側彈出的。而特定頻道的菜單則是從左側彈出。

7、用動畫來潤色

有趣而漂亮的動畫。是讓你的應用令人感覺非同凡響的另一手段。合理的動畫能提高應用的易用性。能讓用戶更容易注意到重點。甚至能更加直接的給他們帶來快樂。

你無法確知用戶將在何時何地訪問你的應用。更無法確知用戶使用的是哪種網絡連接。所以使用體積小、輕量級、不依賴于網絡的動畫是非常有必要的。

Strava 就是這樣一個包含了大量有趣的小動畫的應用。其中許多有趣的動畫小到你可能會一不小心忽略掉。不同界面之間的切換會有有趣的過渡動效。比如上面的挑戰(zhàn)頁面就是。加載地圖的時候會有一個脈沖特效。當你運動的時候。會看到沿著運動路徑變幻的小點。

網站建設結語

當你打算讓你的移動端App不再停留于構思的時候。不妨先看看當前網頁和數字設計都有哪些設計趨勢。看看它們當中有哪些可以通過調整可以運用到移動端設計上來。許多意想不到的小點子?？赡軙删鸵粋€非常了不得的設計趨勢。

分享文章：移動端網頁設計方式有哪些--網站建設推薦如何做好移動端網頁設計
本文地址：http://jinyejixie.com/news8/294758.html

成都網站建設公司_創(chuàng)新互聯，為您提供商城網站、響應式網站、靜態(tài)網站、全網營銷推廣、App設計、服務器托管

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯