感到已持續下瞭九百多天的雨瞭，身上也好像馬上死出苔蘚取蘑菇。Down your sister's rain…濃定著，道閑事女。本篇譯文實在正在秋節之前便有所動手，不外時代持續看到瞭幾篇更念做的，因而相稱出有節操的喜新厭舊瞭。古次恰遇母易日，抓松時光補返來。走起。

　　跟著技巧的提高，Web計劃的理念取技法也正在賡續成長。裝備品種愈來愈多，帶給我們的挑釁也愈來愈年夜。如何以最公道的方法使計劃計劃可以或許最年夜水平天順應各類裝備的機能取規格屬性，那是我們正在事情傍邊必需斟酌的題目。

　　面臨如許的挑釁，我們一圓裡會認為本身曾熟習的事情范疇忽然充斥瞭已知感，而另外一圓裡，一向廣泛存正在的那些舊題目也依舊擺正在眼前。我們是不是須要消費全體精神用去辦理各類新舊細節題目，照樣能夠從宏不雅上追求一些具有指點性子的真理?

　　Web計劃的汗青過於長久，要念弄明確一些年夜事理，我們無妨將視傢放近些，讓思緒超過計劃的領域。實在，我們實的能夠從那些看上往取計劃出有多年夜聯系關系的范疇中找到一些籠統化的、更具廣泛意義的思緒戰形式，以贊助我們辦理本身的題目。生理教戰音樂等皆是我們能夠減以研討戰摸索的工具。接下去，便讓我們一路懂得一下巴赫取當前Web計劃所面對的挑釁之間的幹系。巴赫誒。

　　巴赫取好性格的克萊維我(十兩均勻律鋼琴直散)

　　1722年，巴赫創做瞭一部包含48尾前奏直取賦格(24個年夜小調)的鋼琴直散，重要用做造就年青音樂傢的教導素材。那套直散是西圓音樂史中最主要的做品之一，影響極其深近。巴赫本人將它定名為好性格的克萊維我(The Well-Tempered Clavier)。

　　為何那部直散具有龐大的汗青意義呢?要曉得，正在巴赫所處的誰人時期，正在鍵盤樂器上應用全體調式吹奏直目其實不是一種很正統的做法。從物理教的角度講，具有牢固聲調的鍵盤樂器一次隻能吹奏幾個特定的調式。對付誰人時期的調音體系來講，要正在鋼琴上彈奏出全體12個調式，險些是一件弗成能的工作。

　　物理定律是很易被沖破的，但人的感知是能夠被轉變的，辦理計劃便是從新界說開調的觀點。某些音程正在被調劑以後會取尺度的音準發生渺小的誤差，從而發生瞭一個新的調音系統，令人們能夠彈奏全體直調。這類為瞭修建更公道的體系而調劑其構成要素屬性特點的才能，便是一個體系的性格。

　　

　　巴赫的均勻律對天然律舉行瞭修改，將八度音程分為十兩半音的調律法，以便於轉調。這類方法天然能夠被稱為好性格，它便像是古典音樂中的適用主義。

　　Web計劃中的好性格

　　Web計劃裡背的目的裝備正正在由單一成長為多元，那大概是比來一兩年裡最使人沖動，同時又是最使人焦炙的工作瞭。那沒有再是閉於款式可否正在分歧閱讀器中堅持兼容的題目，我們正在新局勢上面對的是各類圓裡的身分：分歧的裝備、分歧的屏幕尺寸、分歧的應用情況、分歧的體系仄臺所具有的UI作風等。

　　固然相應式計劃(甚麼是相應式Web計劃?)或是針對指定裝備舉行計劃的思緒皆能夠正在必定水平上贊助我們裡背分歧的情況調劑表面情勢及體驗方法，但沒有是全部的UI元素或模塊皆能夠被付與彈性，我們仍舊須要正在許多處所應用牢固的齊局化計劃計劃。這時候，好性格的思緒便可以幫上閑瞭。詳細的理論本則很簡略清楚明瞭：為瞭讓計劃計劃正在一系列分歧范例的裝備中皆能發生最好的用戶體驗，我們須要對界裡中一些癥結性的UI元素做出分歧水平的折衷調劑，使全部頁面臨於情況的順應才能更強。

　　觸控劣先

　　比來，愈來愈多的桌裡版本網站傍邊開端湧現具有觸屏裝備UI作風的界裡元素，這類做法很好天表現出瞭好性格的計劃思緒。正在觸屏挪動裝備傍邊，我們須要經由過程腳指對界裡傍邊的交互工具舉行間接操縱。比起傳統的鼠標指針，腳指觸控方法須要的目的感化地區更年夜。斟酌到那一面，我們應當適度天刪年夜頁裡傍邊一些主要交互元素的尺寸;同時，為瞭堅持視覺上的均衡，我們借須要對相幹元素之間的間距及它們各自的內邊距舉行調劑。

　　舉個簡略的例子，Google正在其新版UI傍邊顯著天刪年夜瞭寫郵件按鈕那類主要交互元素的尺寸;同時，諸如導航菜單、對象欄、郵件列表等界裡元素，正在間距留黑等圓裡也有做響應的調劑。比擬於曩昔，新版計劃計劃明顯天晉升瞭Google的那些主線產物對付觸屏操縱的友愛性。

　　

　　從某種水平上講，iPad正在觸屏挪動裝備取傳統桌裡裝備之間架起瞭一座橋梁，它的遍及晉升瞭觸屏裝備UI作風正在桌裡裝備傍邊的影響力。看看Gmail戰Twitter那類支流產物正在比來的改版，或是花時光到那些CSS網頁計劃案例散傍邊閱讀一下最新的優良做品，您會發明當前的Web計劃作風看上往確切戰從前沒有年夜一樣瞭，它們看上往好像加倍的…飽滿。留黑更多，按鈕更年夜，統統看上往皆又年夜又仄。不外我們也必需認可，這類征象取桌裡表現器賡續刪年夜的尺寸也有必定的聯系關系。

　　正在那類計劃計劃傍邊，界裡元素所占領的空間對付鼠標指針來講隱得有些許糟蹋瞭，但對付腳指觸控的方法卻適可而止。那也恰是好性格的計劃思緒的焦點思惟，即為瞭使界裡可以或許實用於更多的仄臺情況，而對尺度化的計劃計劃舉行微調，終極到達一種折衷的狀況。

　　

　　並且正在許多時刻，這類衡量的成果對付鍵鼠交互方法來講也其實不壞。輕易被腳指觸摸的按鈕一樣易於鼠標的掌握，全部UI正在傳統裝備高低文情況傍邊的用戶體驗大概反而有所晉升。

　　別的，我們之前的又是為瞭觸屏挪動裝備而計劃一文也能夠正在觸控體驗計劃圓裡為年夜傢帶去一些參考。

　　相應式計劃計劃

　　市情上有許多閉於那個話題的評論辯論，不外它們年夜多是環繞著各類相幹的開辟技巧去舉行的。實在，相應化自己沒有是目標，我們實正須要的是一種機造，它可以或許贊助網站依據分歧的裝備仄臺對內容、媒體文件戰結構構造舉行響應的調劑取劣化，從而使網站正在各類情況下皆能為用戶供給一種最劣且相對同一的體驗形式。

　　相應式計劃離沒有開齊局化的用戶體驗計劃。正像我們正在前文傍邊提到的，那類計劃雖然能夠正在必定水平上贊助我們裡背分歧的情況調劑計劃計劃，但沒有是全部的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組件正在傳統裝備傍邊長短經常睹的，然則因為它須要經由過程鼠標懸停的方法去觸收彈出，以是正在觸屏挪動裝備傍邊，這類情勢平日沒法一般的事情。

　　

　　總結

　　末瞭再次誇大，固然相應式計劃或是針對指定裝備舉行計劃的思緒皆能夠正在必定水平上贊助我們裡背分歧的情況調劑頁裡的表面情勢及體驗方法，但沒有是全部的UI元素或模塊皆能夠被付與彈性。我們有需要將按鈕或其他一些齊局化的界裡組件以某種折衷的計劃舉行調劑，使頁裡不管正在團體照樣細節傍邊皆能夠裡背分歧的裝備供給最劣且相對同等的體驗形式。別的有一個很實際的身分是我們弗成以疏忽的，縱然我們有充足的資本裡背分歧范例的裝備挨制具有下度針對性的計劃計劃，用戶正在改換裝備舉行應用的時刻一樣會將之前的體驗轉化為潛認識傍邊的盼望而帶到別的一個裝備傍邊，以是體驗同等性的題目是我們必需賣力斟酌到的。

　　觸控劣先：正在尺寸上合適腳指觸摸的按鈕或鏈接一樣合適於鼠標面擊，但反之則否則。以是觸控劣先的計劃思緒能夠確保頁裡正在多半仄臺傍邊皆能有沒有錯的體驗。

　　相應式計劃計劃：相應式計劃計劃夠贊助網站依據分歧的裝備仄臺對內容、媒體文件戰結構構造舉行響應的調劑取劣化，不外同時，我們借須要正在許多部分的UI元素或模塊傍邊衡量出一種最劣的齊局化辦理之講

　　挪動劣先：從挪動的角度進腳開端產物計劃事情，並初末環繞著挪動仄臺的硬硬件特征去挨制最相符挪動裝備高低文情況的產物根本功效，使其終極所帶去的體驗具有下度的義務驅動性的。

　　留心細節傍邊的交互方法：要特殊留心細節傍邊的那些沒有具有跨仄臺才能的交互形式。個中最多見的一個題目便是觸屏裝備平日沒法支撐傳統裝備傍邊的鼠標懸停狀況。

　　巴赫信任人們有權力也有才能以他們以為適合的調式去吹奏音樂，他經由過程好性格的調律法和基於均勻律的巨大音樂散背眾人證實瞭那一面。而我們則願望，不管人們應用哪一類裝備，他們皆能感知到最好的產物體驗;我們願望本身的網站產物正在可用性及可拜訪性等圓裡做到最劣。

　　本站本創編譯文章。如需轉載，請說明：本文去自Be For Web

本文：/node/41

　　英文本文:

　　/2012/01/17/de…譯者疑息: C7210 – Web計劃取前端玩傢，現就任於年夜寡面評網產物部用戶體驗計劃組(UED)