移動設計之視覺設計

移動設計之視覺設計

更新時間

2018-08-11

QQ截圖20180806161657.png

圖片版權所屬:站長之家

作為一個直接響應式的功能平臺,第一個手機網站只是一個“試驗品”,而不是“成品”。在今天,如此多的智能設備的確給了我們機會去做更多的視覺設計,但這不僅能激發和吸引用戶,并且增加了用戶體驗。當然伴隨著機會就以為著更多的挑戰。

本文是做出總結,即通過探索視覺設計解決方案和相關的最佳實踐來研究移動設計,從而做出既美不雅又好用的應用。

首先我們來看看移動端設計上的物理限制,其中包羅最佳實踐案例;然后我們將著眼于通信設計,用視覺設計為移動站和應用的內容提供支持。

在束縛下做設計

移動設備和平板設備的外形和可觸控性,給我們帶來了一些基本的可用性方面的考慮。在桌面端,用戶所面對的是更大的顯示區域和更多的內容(相對于移動端),或者將鼠標懸浮在某個元素上時能夠獲得更多的信息。

但是移動端的用戶則只能將視線集中在一塊較小的屏幕上,并且必需以各種不同的方式來與設備進行交互。通過記住定義一個移動端布局和移動端交互規范的細節,我們可以在移動端上創造一個直不雅的體驗。

1. 可用的布局

移動端屏幕的空間局限性,給設計工作帶來了一個有趣的限制——如安在有限的屏幕上以最優的方式,顯示內容以及提供最好交互方式。具體來說,布局要既精簡又能讓用戶集中注意力。

(1 )布局的結構

為了給設計打好基礎(造房先打地基,設計頁面先設計布局),我們需要考慮如何最有效地使用屏幕空間。”柵格系統” 1(Grid System)有助于設計師做到這點:均勻分布的垂直線結構可以作為放置內容按照。

用這個方法,能讓設計師更容易將按鈕、標題或圖像放在最有效的地方。將頁面組件放在網格上有助于引導正在“使用”頁面的用戶,同時創造一個干凈美不雅的視覺體驗。

滾動和滑動的空間:用戶在瀏覽頁面內容時,不該該有任何與瀏覽頁面無關的操作被用戶“激活”,在用戶嘗試滾動頁面時不該該“打開一個鏈接/頁面”,這一點很重要。

換句話說就是,元素之間要有足夠的間距來允許用戶輕松地瀏覽頁面。

2. 人性化的交互

在移動設備上的觸摸屏界面,也意味著視覺設計必需加強交互。換句話說,元素的大小和位置應確保其易用性,并指出動作之間的重要性和相關性。

按鈕點擊區域:足夠的按鈕尺寸和間距將確保它們可以被輕松地激活。,抱負情況下,標準屏幕上的按鈕應該在44px到57px之間,在高密度(視網膜)屏幕上按鈕應該在88px到114px之間。 這允許均勻的指尖有足夠區域去更容易地激活一個按鈕。

可觸及的和顯著的控件:如果相關連的交互模塊彼此之間很容易點擊,它將允許用戶更快地在它們之間轉換。 這將有助于減少用戶在交互連接方面的困惑,并加快更復雜的流程。

為通信而設計

物理條件限制這方面只是我們為移動設備設計時所面臨挑戰的一半,另一半則是在信息傳達方面。“移動第一”(mobile first),這個理論提示我們,移動用戶應該從網站上獲得與桌面用戶相同的信息價值。考慮到這一點,為移動通信而設計影響了這個方式——所有設計師需要接觸他們正在交流的消息。

為了加強通信,我們需要充分利用我們對信息的理解和解讀。人腦解讀視覺信息要比文字信息快得多,這就意味著使用視覺和圖像來加強通信是非常有價值的。 良好的視覺樣式能夠增加價值,支撐內容或者交互的主體,并改善整體的用戶體驗(移動端和桌面端)。

垂直排版規律

我們優先考慮使用垂直排版來傳達信息,信息結構創建了一個合理的內容流,而可視化設計可以進一步明確區分內容的層級。在內容排版上使用合適的尺寸和間距,可以創建一個良好的垂直標的目的的視覺流,更清晰的傳達不同層級的內容。

除了前面提到的垂直網格系統,基線網格(baseline grid)可以在垂直標的目的上創建一個良好的的排版,使用戶更容易閱讀和理解內容。

具體來說,基線網格是通過行高的規范來創建的一種網格結構。它在排版上明確的規定了行距和尺寸,同時也有助于確定垂直標的目的上不同的內容組之間的間距。遵循這些規則可以確保內容段落的可讀性,并且可以使用戶清楚地區分一段內容和整體內容的不同。

基線網格在HTML和CSS中很難精確地實現(implement accurately) ,但是它在設計過程中可以為開發尺寸和確定間距提供良好的指導。


相關標簽
埃及女王APP