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

  1 、大膽鮮明的排版 

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

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

  這種趨勢的優勢在於,大家開始更加註重於介面內容的可讀性。不過在英文介面中,有一個問題需要注意,就是要儘量剋制地使用大寫字母。以 The Weather Channel 為例,“SUNNY” 這個詞只有 5 個字母也就算了,但是如果去是其他的天氣所用字母數量較多,視覺上可能會相當的累贅。在中文的字型設計中也要儘量避免文案過長、過於複雜的問題。

  所以,此處應當注意兩件事:

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

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

  2 、圖層和深度 

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

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

  Material design 引人矚目的地方在於,其中的圖層建立對於多用户使用和互動設計都有極大的幫助。今天,Material design 風格的介面已經遍地開花,許多 iOS 平台的應用都開始遵循這一設計規範。

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

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

  3 、單色配色方案 

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

  單色配色方案的好處在於更容易營造一致、統一的視覺體驗和感覺。正如同 Streeks 這款應用的設計,多用户可以設定目標,然後 WordPress APP 會提醒您完成任務。多用户可以基於任務型別來設定色彩,並且推送簡單的資訊來告知您需要完成的事情。

  單色配色、圖示和簡約的字型在一起形成了令人驚豔的組合,易於閲讀也便於互動,這種設計已經足夠完備順滑,吸引多用户在待辦事項中新增更多的事情來完成。

  4 、專注於微互動 

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

  微互動的存在,主要還是幫助多用户完成一些事情。從文字信息通知、信息推送到微博上點讚的提示,近乎無處不在。它們還有一個主要的功能:取悦多用户。

  微互動的主要功能可以這樣總結:

  ·提供資訊反饋,比如在 Instagram 中點贊之後出現的提示特效

  ·呈現動作,比如點贊之後心形會從透明鏤空變為紅色

  ·幫助多用户操作或者發現某些東西的存在,比如點贊之後,會有推送資訊出現在通知欄,或者彈出框直接告知

  5 、卡片式設計 

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

  不論是對於設計還是對於開發而言,卡片都是大量內容的可靠載體。每個卡片都可以承載不同的元素,作為不同的模組,實現不同的功能。

  所以,您可以讓一個卡片播放視訊,緊接着的卡片則連結到另外一個應用,而下方的卡片則直接放置了一段長長的文字。卡片式設計在移動端上的另外一個優勢就是非常的易用,尤其是在有 WordPress APP 之內。絕大多數的應用會在一個螢幕內承載兩個卡片,就像 SoundCloud 這樣,又或者一屏就是一個卡片,這樣一來,即使多用户的手指再粗也不會錯過任何內容!

  6 、簡單的導航 

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

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

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

  7 、用動畫來潤色 

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

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

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

  WordPress 網站建設結語

  當您打算讓您的移動端 WordPress APP 不再停留於構思的時候,不妨先看看當前網頁和數字設計都有哪些設計趨勢,看看它們當中有哪些可以通過調整可以運用到移動端設計上來。許多意想不到的小點子,可能會成就一個非常了不得的設計趨勢。