此外,我們之前的又是為了觸屏移動設備而設計一文也可以在觸控體驗設計方面為巨匠帶來一些參考。
響應式設計方案
市道上有良多關于這個話題的談判,不外它們年夜多是環繞著各類相關的開起身術來進行的。其實,“響應化”自己不是目的,我們真正需要的是一種機制,它能夠輔佐網站按照分歧的設備平臺對內容、媒體文件和結構結構進行響應的調整與優化,年夜而使網站在各類情形下都能為用戶供給一種最優且相對統一的體驗模式。
響應式方案離不開全局化的用戶體驗設計。正像我們在前文傍邊提到的,這類方案當然可以在必然水平上輔佐我們面向分歧的情形調整設計方案,但不是所有的UI元素或模塊都可以被賦予彈性,我們仍然需要在良多處所經由過程“好脾性”的設計思緒權衡出一種最優的全局化解決之道。在這方面,波士頓舉世報(Boston Globe’s)的網站就是一個不錯的例子。

列位可以試著使用分歧類型的設備來訪謁這個站點,或是直接在桌面設備中不竭調整瀏覽器窗口的尺寸,以不雅察看頁面的響應化調整軌則。
響應式策略可以使統一套設計方案順應于各類類型的顯示設備,用戶甚至可以經由過程老舊的蘋不美觀Newton掌上電腦來瀏覽波士頓舉世報的頁面。不外,這不只是前端開發方面的成就,現實上,這種策略所浮現出的具有高度順應性的設計思緒步崆最主要的。
我想,如不美觀我們只需要面向桌面設備進行設計,那么最終的方案應該是加倍純粹的,搜羅視覺效不美觀及交互體驗等方面。事實?下場,在這種情形下,我們擁有足夠的時刻和資原本使一種設計方案盡量趨于完美。一旦要考慮到分歧類型的設備情形,我們就必需做出某種水平的權衡,以便“彈奏出全數調式”。
有樂趣的同窗不妨參考我們之前的相關文章,對響應式Web設計的概念及實踐體例進行深切體味:
什么是響應式Web設計?若何進行?
經由過程CSS3 Media Query實現響應式Web設計
走出移動互聯網的迷宮 - 網站移動化的體例策略
案例進修 - 響應式網站的產物需乞降設計流程詳解
移動優先的設計
之前的話題首要傾向于頁面的視覺設計。其實,“好脾性”的設計思緒同樣可以表此刻產物設計、用戶體驗、信息架構等諸多方面。接下來讓我們來看看產物設計傍邊的移動優先策略。
在這個概念里,我們會年夜移動的角度入手起頭產物設計工作,并始終環繞著移動平臺的軟硬件特征來打造最合適移動設備上下文情形的產物根基功能。正如Luke Wroblewski在《移動優先》一書中所說:
如不美觀一個團隊以移動優先為策略原則開展設計工作,其產物最終所帶來的體驗將是具有高度的使命驅動性的。用戶可以將注重力聚焦在需要完成的關頭使命傍邊,而不會被傳統氣概的桌面版本網站產物傍邊過多的無關身分所干擾。這對于產物的用戶體驗及營業成長都是有益處的。
對這種設計策略進行擴展,使其超越移動體驗典型疇,并上升到整個產物的層面,我們就可以在它身上發現很較著的“好脾性”特征。Twitter比來的一次改版傍邊就很好的浮現出了這方面的概念。

Twitter這輪改版的一個首要目的就是在分歧類型的設備傍邊實現具有一致性的體驗模式。連結界面外不美觀的統一只是其中的一個方面,更主要的是能否在整個產物體驗的層面上實現這一方針。移動優先的設計策略可以保證相關的工作能夠朝著正確的標的目的前進。
我們可以在Twitter的此次改版傍邊很較著的感應感染到移動化的體驗模式對于整個產物設計方案的影響浸染。例如其客戶端底部的“Home”、“Connect”、“Discover”、“Me”這四個導航標簽,年夜數目上來嗣魅正罕梢拿于移動設備的小尺寸屏幕規格,這正浮現出了產物的信息架構針對移動情形所進行的優化調整。而同樣的導航結構也呈此刻了Twitter桌面版的網站傍邊。我們可以在膳縵沔的截圖傍邊看到,雖然桌面情形相對于移動設備來說擁有更年夜的界面顯示空間,但這些導航元素的尺寸及外不美觀效不美觀卻幾乎與客戶端傍邊的完全一致,只是在整體結構方面進行了調整。可以說,整個桌面版的設計方案在某種水平上就是為了能夠連結與移動版本的體驗一致性而稱心受限的。
留心狼
在巴赫平均律之前的自然律系統中,那些不在當前調式傍邊的音符被彈奏出來的時辰,凡是會發生一種很是難聽的效不美觀。那時的音樂家們喜歡將這種情形例如成狼叫。
借鑒這個兇殘的概念,我們可以將用戶界面傍邊那些在某些平臺傍邊合用,但在其他情形中就會破損產物體驗的視覺或交互元素稱之為“狼”。當你使用手機瀏覽Web頁面的時辰,那些本是為了鼠標指針而設計的難以經由過程手指切確觸摸到的鏈接,那些細小到幾乎無法辨識外形的文字,那些依靠鼠標懸停而觸發顯示的UI元素...這些都是移動設備上下文情形傍邊的Web界面之狼。

紐約時報的單篇文章頁面中,正文右側凡是是一組分享鏈接,其中每個鏈接單元的高度是12像素。當我們在iPhone中瀏覽這個頁面的時辰,會發現這樣的尺寸確實很輕易造成誤操作,你幾乎難以切確地觸摸到正確的方針對象。對于這些功能性質的鏈接單元,最好可以按照蘋不美觀在iOS人機界面設計規范傍邊所要求的那樣,在寬度和高度上都至少給到44像素。
對于下圖所示的導航結構,移動設備用戶普遍暗示壓力很年夜。這種下拉菜單形式的UI組件在傳統設備傍邊長短經常見的,可是因為它需要經由過程鼠標懸停的體例來觸發彈出,所以在觸屏移動設備傍邊,這種形式凡是無法正常的工作。
推薦閱讀
<b>效仿者蜂擁而至 解讀Birchbox網站模式的獨特魅力</b>
紐約有一個神奇的網站,它名叫Birchbox。2010年秋天成立的它,在這一年半來急劇擴張:擁有10多萬會員;與130多個品牌成立合作關系;融資額達到1190萬美元;員工年夜最初的3名增添到現在的50人,公司地址搬遷了四次;其怪>>>詳細閱讀
本文標題:<b>網站設計心理學與音樂研究:設計好脾氣的Web頁面</b>
地址:http://www.xglongwei.com/a/22/20120314/40360.html