UI設計:觸摸優先設計、響應式設計、移動優先設計

來源:互聯網
上載者:User

文章描述:UI應遵循的三大網站設計原則。

觸摸優先設計、響應式設計、移動優先設計是UI設計師設計網站應遵循的三大原則,以使網站最大範圍地適應各種裝置。外文《Designing The Well-Tempered Web》中詳細闡述了這三大原則。CSDN對該文進行了編譯,內容如下:

隨著技術的進化,Web設計的藝術和技巧也在不斷進化。新的技術創造了新的挑戰,而新的挑戰要求新的解決方案。我們通常工作在未知領域,需要給出全新的解決方案。

考慮到有限的Web設計曆史,我們必須超越當前的領域去回答更有挑戰性的問題。為此,我們可以通過借鑒其他不相關領域的發展曆史,如音樂,從中尋求可以協助我們問題的解決方案。下面將列舉一個18世紀早期關於巴哈的一個小故事。

巴哈和《The Well-Tempered Clavier》

1972年,巴哈完成了一部著作《The Well-Tempered Clavier》(《十二平均律鋼琴曲集》),分上下兩卷,每卷各有24首前奏曲與賦格曲。現在它已被譽為西方音樂曆史中最重要作品之一。

在當時,為12個主要的琴鍵分別譜曲是完全不可能的。而巴哈卻從整體上為全部的12個音作曲。正是他的這套《十二平均律鋼琴曲集》,最終向人們證明了"十二平均律"是可以用來作曲的,而且其效果之美妙,以前的人們從未曾領略過。

在這個過程,所採用的解決方案是重新定義了"合調"的概念。通過修改一定的間隔,使每個琴鍵稍稍偏離完美的音調,從而產生一種調音系統,允許人們在所有的琴鍵上演奏出合調的琴樂。犧牲少量的個體品質以達到更完美的整體效果,被稱為"平均律"。

該案例雖與網站設計不相關,但目的是一樣的:使每個琴鍵都稍有缺陷,以便鍵盤整體表現完美。

UI設計師需要做什嗎?

最近幾年,針對多裝置進行設計已成為Web設計領域最令人興奮的開發工作。以前主要關注網站是否可以在兩個不同瀏覽器上運行正常,現在則轉移到它是否可以在具有完全不同特性的多種裝置上正常運行,這些裝置具有不同的螢幕尺寸、不同的效能、不同的使用環境及不同的介面。

雖然響應式設計和針對裝置定製網站可以協助我們製作出針對不同體驗的設計,但仍有很多時候我們必須做出統一的決策。這時,"平均律"的概念或許有些協助。

該概念在UI設計中的應用一個簡單的過程:為了針對一系列不同裝置設計出好的體驗,我們必須允許某些介面出現偶爾的不完美。我們必須做出小小的妥協,以保證我們的設計可以很好地適應其他的環境。

觸摸優先設計

具有"平均律"特性的網站已經將觸摸式介面應有到了最近的案頭網站設計中。

在佔用面積上,手指要大於滑鼠指標,所以手指需要更大的觸控地區。為了確保可用性,互動元素需要更大。當互動元素的面積增大後,其他元素也需要相應的增大以保持平衡。這就需要通過margin和padding兩個屬性來設定。

新版Gmail設計有大量的空白地區,對按鈕設定了額外的Padding。雖然它只是針對案頭的設計,但也可以很好地相容觸摸裝置。

iPad在觸摸介面和不同大小案頭螢幕之間搭建了橋樑。而iPad的流行加速了觸控螢幕在案頭介面設計中的影響。如果你觀察一些剛經過重新設計的著名產品,如Gmail,Twitter,你就會發現Web設計已有明顯的不同。他們看上去更"豐滿"。有更多的空白地區,按鈕有更多的Padding,上面的元素整體看來增大了不少。當然,其他的因素也在發揮作用,比如案頭螢幕尺寸的穩定增長。

當為滑鼠提供了"過多"的空間,而對於手指來說,空間剛剛好時,我們的設計就算完成了。我們允許與某體驗的標準有稍稍的偏差,以獲得對所有可能體驗的更好支援。

有一點值得提出,對觸摸友好的UI對於使用案頭滑鼠的使用者來說,更易用。容易觸摸操控的按鈕,更容易被點擊。

微軟Metro風格的設計受到了觸摸優先思想的影響

響應式設計,達到統一設計的目的

雖然關於響應式設計的很多討論都是關於響應式設計技術的,但響應能力本身並不是最終目標。它是達到目的的一種手段。設計具有響應能力,是為了達到其他的一些目的。可能為了支援不同的內容,服務於低寬頻中傳輸的圖片,在更小的螢幕中更好地展示布局。也可能為了在大範圍不同的裝置上提供統一的體驗。

搭載響應式設計的火車,可以到達統一的使用者體驗設計的目的地。 Boston Globe網站在這方面做得很棒。

Boston Globe出色地將響應式設計應用到了大型網站中

響應式設計策略可以使一個簡單的設計適應使用者閱讀Boston Globe所使用的任何裝置(即便是Apple Newton)。這不僅僅是前端工程師的功勞。配合使用Media Queries和JavaScript兩種技術,也可以達成這種效果。

移動優先設計

之前的案例主要針對圖片設計,但"平均律"的概念應該應用於產品設計、使用者體驗、資訊架構中——幾乎設計的其他任何領域。讓我們看看產品設計及移動優先的設計思想。

從行動裝置角度出發開始設計過程,構建可以滿足移動環境中各種限制的產品,你需要專註於產品的最重要元素上。正如Luke Wroblewski所表述的:

"當團隊進行移動優先設計時,最終是要打造一種體驗,該體驗主要專註於使用者希望完成的最主要任務,沒有任何的繞彎子與介面片段。這對於使用者體驗和商務都是有利的。"

[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。