此外，我們之前的又是為了觸屏移動(dòng)設(shè)備而設(shè)計(jì)一文也可以在觸控體驗(yàn)設(shè)計(jì)方面為巨匠帶來(lái)一些參考。
響應(yīng)式設(shè)計(jì)方案
市道上有良多關(guān)于這個(gè)話題的談判，不外它們年夜多是環(huán)繞著各類相關(guān)的開起身術(shù)來(lái)進(jìn)行的。其實(shí)，“響應(yīng)化”自己不是目的，我們真正需要的是一種機(jī)制，它能夠輔佐網(wǎng)站按照分歧的設(shè)備平臺(tái)對(duì)內(nèi)容、媒體文件和結(jié)構(gòu)結(jié)構(gòu)進(jìn)行響應(yīng)的調(diào)整與優(yōu)化，年夜而使網(wǎng)站在各類情形下都能為用戶供給一種最優(yōu)且相對(duì)統(tǒng)一的體驗(yàn)?zāi)Ｊ健?/p>
響應(yīng)式方案離不開全局化的用戶體驗(yàn)設(shè)計(jì)。正像我們?cè)谇拔陌吿岬降模@類方案當(dāng)然可以在必然水平上輔佐我們面向分歧的情形調(diào)整設(shè)計(jì)方案，但不是所有的UI元素或模塊都可以被賦予彈性，我們?nèi)匀恍枰诹级嗵幩?jīng)由過(guò)程“好脾性”的設(shè)計(jì)思緒權(quán)衡出一種最優(yōu)的全局化解決之道。在這方面，波士頓舉世報(bào)(Boston Globe’s)的網(wǎng)站就是一個(gè)不錯(cuò)的例子。
列位可以試著使用分歧類型的設(shè)備來(lái)訪謁這個(gè)站點(diǎn)，或是直接在桌面設(shè)備中不竭調(diào)整瀏覽器窗口的尺寸，以不雅察看頁(yè)面的響應(yīng)化調(diào)整軌則。
響應(yīng)式策略可以使統(tǒng)一套設(shè)計(jì)方案順應(yīng)于各類類型的顯示設(shè)備，用戶甚至可以經(jīng)由過(guò)程老舊的蘋不美觀Newton掌上電腦來(lái)瀏覽波士頓舉世報(bào)的頁(yè)面。不外，這不只是前端開發(fā)方面的成就，現(xiàn)實(shí)上，這種策略所浮現(xiàn)出的具有高度順應(yīng)性的設(shè)計(jì)思緒步崆最主要的。
我想，如不美觀我們只需要面向桌面設(shè)備進(jìn)行設(shè)計(jì)，那么最終的方案應(yīng)該是加倍純粹的，搜羅視覺(jué)效不美觀及交互體驗(yàn)等方面。事實(shí)?下場(chǎng)，在這種情形下，我們擁有足夠的時(shí)刻和資原本使一種設(shè)計(jì)方案盡量趨于完美。一旦要考慮到分歧類型的設(shè)備情形，我們就必需做出某種水平的權(quán)衡，以便“彈奏出全數(shù)調(diào)式”。
有樂(lè)趣的同窗不妨參考我們之前的相關(guān)文章，對(duì)響應(yīng)式Web設(shè)計(jì)的概念及實(shí)踐體例進(jìn)行深切體味：
什么是響應(yīng)式Web設(shè)計(jì)?若何進(jìn)行?
經(jīng)由過(guò)程CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)
走出移動(dòng)互聯(lián)網(wǎng)的迷宮 - 網(wǎng)站移動(dòng)化的體例策略
案例進(jìn)修 - 響應(yīng)式網(wǎng)站的產(chǎn)物需乞降設(shè)計(jì)流程詳解
移動(dòng)優(yōu)先的設(shè)計(jì)
之前的話題首要傾向于頁(yè)面的視覺(jué)設(shè)計(jì)。其實(shí)，“好脾性”的設(shè)計(jì)思緒同樣可以表此刻產(chǎn)物設(shè)計(jì)、用戶體驗(yàn)、信息架構(gòu)等諸多方面。接下來(lái)讓我們來(lái)看看產(chǎn)物設(shè)計(jì)傍邊的移動(dòng)優(yōu)先策略。
在這個(gè)概念里，我們會(huì)年夜移動(dòng)的角度入手起頭產(chǎn)物設(shè)計(jì)工作，并始終環(huán)繞著移動(dòng)平臺(tái)的軟硬件特征來(lái)打造最合適移動(dòng)設(shè)備上下文情形的產(chǎn)物根基功能。正如Luke Wroblewski在《移動(dòng)優(yōu)先》一書中所說(shuō)：
如不美觀一個(gè)團(tuán)隊(duì)以移動(dòng)優(yōu)先為策略原則開展設(shè)計(jì)工作，其產(chǎn)物最終所帶來(lái)的體驗(yàn)將是具有高度的使命驅(qū)動(dòng)性的。用戶可以將注重力聚焦在需要完成的關(guān)頭使命傍邊，而不會(huì)被傳統(tǒng)氣概的桌面版本網(wǎng)站產(chǎn)物傍邊過(guò)多的無(wú)關(guān)身分所干擾。這對(duì)于產(chǎn)物的用戶體驗(yàn)及營(yíng)業(yè)成長(zhǎng)都是有益處的。
對(duì)這種設(shè)計(jì)策略進(jìn)行擴(kuò)展，使其超越移動(dòng)體驗(yàn)典型疇，并上升到整個(gè)產(chǎn)物的層面，我們就可以在它身上發(fā)現(xiàn)很較著的“好脾性”特征。Twitter比來(lái)的一次改版傍邊就很好的浮現(xiàn)出了這方面的概念。
Twitter這輪改版的一個(gè)首要目的就是在分歧類型的設(shè)備傍邊實(shí)現(xiàn)具有一致性的體驗(yàn)?zāi)Ｊ健＿B結(jié)界面外不美觀的統(tǒng)一只是其中的一個(gè)方面，更主要的是能否在整個(gè)產(chǎn)物體驗(yàn)的層面上實(shí)現(xiàn)這一方針。移動(dòng)優(yōu)先的設(shè)計(jì)策略可以保證相關(guān)的工作能夠朝著正確的標(biāo)的目的前進(jìn)。
我們可以在Twitter的此次改版傍邊很較著的感應(yīng)感染到移動(dòng)化的體驗(yàn)?zāi)Ｊ綄?duì)于整個(gè)產(chǎn)物設(shè)計(jì)方案的影響浸染。例如其客戶端底部的“Home”、“Connect”、“Discover”、“Me”這四個(gè)導(dǎo)航標(biāo)簽，年夜數(shù)目上來(lái)嗣魅正罕梢拿于移動(dòng)設(shè)備的小尺寸屏幕規(guī)格，這正浮現(xiàn)出了產(chǎn)物的信息架構(gòu)針對(duì)移動(dòng)情形所進(jìn)行的優(yōu)化調(diào)整。而同樣的導(dǎo)航結(jié)構(gòu)也呈此刻了Twitter桌面版的網(wǎng)站傍邊。我們可以在膳縵沔的截圖傍邊看到，雖然桌面情形相對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)擁有更年夜的界面顯示空間，但這些導(dǎo)航元素的尺寸及外不美觀效不美觀卻幾乎與客戶端傍邊的完全一致，只是在整體結(jié)構(gòu)方面進(jìn)行了調(diào)整。可以說(shuō)，整個(gè)桌面版的設(shè)計(jì)方案在某種水平上就是為了能夠連結(jié)與移動(dòng)版本的體驗(yàn)一致性而稱心受限的。
留心狼
在巴赫平均律之前的自然律系統(tǒng)中，那些不在當(dāng)前調(diào)式傍邊的音符被彈奏出來(lái)的時(shí)辰，凡是會(huì)發(fā)生一種很是難聽的效不美觀。那時(shí)的音樂(lè)家們喜歡將這種情形例如成狼叫。
借鑒這個(gè)兇殘的概念，我們可以將用戶界面傍邊那些在某些平臺(tái)傍邊合用，但在其他情形中就會(huì)破損產(chǎn)物體驗(yàn)的視覺(jué)或交互元素稱之為“狼”。當(dāng)你使用手機(jī)瀏覽Web頁(yè)面的時(shí)辰，那些本是為了鼠標(biāo)指針而設(shè)計(jì)的難以經(jīng)由過(guò)程手指切確觸摸到的鏈接，那些細(xì)小到幾乎無(wú)法辨識(shí)外形的文字，那些依靠鼠標(biāo)懸停而觸發(fā)顯示的UI元素...這些都是移動(dòng)設(shè)備上下文情形傍邊的Web界面之狼。
紐約時(shí)報(bào)的單篇文章頁(yè)面中，正文右側(cè)凡是是一組分享鏈接，其中每個(gè)鏈接單元的高度是12像素。當(dāng)我們?cè)趇Phone中瀏覽這個(gè)頁(yè)面的時(shí)辰，會(huì)發(fā)現(xiàn)這樣的尺寸確實(shí)很輕易造成誤操作，你幾乎難以切確地觸摸到正確的方針對(duì)象。對(duì)于這些功能性質(zhì)的鏈接單元，最好可以按照蘋不美觀在iOS人機(jī)界面設(shè)計(jì)規(guī)范傍邊所要求的那樣，在寬度和高度上都至少給到44像素。
對(duì)于下圖所示的導(dǎo)航結(jié)構(gòu)，移動(dòng)設(shè)備用戶普遍暗示壓力很年夜。這種下拉菜單形式的UI組件在傳統(tǒng)設(shè)備傍邊長(zhǎng)短經(jīng)常見(jiàn)的，可是因?yàn)樗枰?jīng)由過(guò)程鼠標(biāo)懸停的體例來(lái)觸發(fā)彈出，所以在觸屏移動(dòng)設(shè)備傍邊，這種形式凡是無(wú)法正常的工作。
推薦閱讀
<b>效仿者蜂擁而至 解讀Birchbox網(wǎng)站模式的獨(dú)特魅力</b>
紐約有一個(gè)神奇的網(wǎng)站，它名叫Birchbox。2010年秋天成立的它，在這一年半來(lái)急劇擴(kuò)張：擁有10多萬(wàn)會(huì)員;與130多個(gè)品牌成立合作關(guān)系;融資額達(dá)到1190萬(wàn)美元;員工年夜最初的3名增添到現(xiàn)在的50人，公司地址搬遷了四次;其怪>>>詳細(xì)閱讀
本文標(biāo)題：<b>網(wǎng)站設(shè)計(jì)心理學(xué)與音樂(lè)研究：設(shè)計(jì)好脾氣的Web頁(yè)面</b>
地址：http://www.brh9h.cn/a/22/20120314/40360.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示