視覺Web Design方法與過程討論：用理性說話

想像一下這樣的場景：你參與了一個新產品的網頁設計，並提交了一系列的視覺設計方案。在評審會上，每個人的眼光都轉向坐在房間另一頭的某位領導，“我不喜歡橙色。”這位領導突然抬起頭來說，於是整個評審會突然就亂了章法，過了一會兒，你痛苦地發現大家正在熱烈討論的，居然是“介面中的方塊太死板了，能不能用圓形代替?”這類本不應該討論的問題。 　　如果你就是這樣的一個視覺設計師，你一定也有過類似的痛苦經歷。但是為什麼一群看起來頭腦清楚的成年人總是無法在視覺評審會上保持同樣的理性呢？答案很簡單，由於缺乏對視覺方案產生的前因後果的瞭解，大部分與會者只能憑著自己的主觀直覺而不是客觀分析來評估它們。 　　為什麼這個過程中存在這樣的主觀性呢?視覺傳達，是一門很微妙的語言，甚至超過了網站建設文字語言。即使在最簡單的應用中也存在著語氣和風格的豐富變化。就像有句話說的，一幅畫勝過千言萬語，而這正是問題的起源。千言萬語──尤其當它們都是不對的時候──就有可能造成一場災難。 　　視覺設計過程基本上由一系列決定構成，這些決定最後產生了一個策略，然後再由此定義出一個視覺系統，這個視覺系統通過提升細節和清晰的程度來最大化地滿足這個策略。依賴主觀判斷來做出這些設計決定是災難性的，同時也會導致這個被團隊集體通過的設計方案難以得到用戶的認同。 　　用研究和人物角色來強化視覺設計過程 　　正確的設計流程，能使你將主觀性和猜測的網頁寄存影響降到最小。客觀代替主觀的第一步是從“研究”開始的。這通常由交互設計師主導一些研究，從用戶行為方面來瞭解商業和用戶的目標，視覺設計師可能不會被邀請去參加與相關人員的談話和研究用戶的課題。可無論如何，視覺設計師都適當地參與這些研究，將有助於成功地用這些知識來武裝自己。 　　與相關人員的溝通 　　作為視覺設計師，你在專案會議期間的主要任務是理解公司的傳播目標、品牌策略，以及在整個競爭環境中的地位。同時，理解關鍵決策人對於這種產品的審美期望也是很必要的。最後，你還需要知道哪些成員將要參加你的視覺評審會。 　　理解公司目標和品牌策略，可以從市場或品牌傳達部門去瞭解公司的網頁設計模板歷史和現狀。你同時也需要去發掘公司的未來的目標和它在行業中應該得到的位置，這將為你提供一個設計視覺系統的主體方向。 　　閱讀品牌指南、風格指南和近期的市場行銷資料，對於建立一個更綜合的市場目標和公司立場的概念是非常有用的(記住要弄清楚這些指南是否是最新和最相關的，因為你拿到手的很可能是一份過期，或是與現在的情況不一致的文檔)。 　　與相關人員多溝通，比如產品或市場經理，去理解他們的觀點、瞭解能幫助你成功地搭建起項目框架的網上商店因素。另一件需要做的事情是去理庥Ω貿氏指沒У慕緱嬤凶釵丶氖泳醺拍瞟ぉび繞涫欽飫銼籆ooper稱為experience keywords(本文後面會提到)的概念。在這個期間，你的目標是從各個相關部門收集關鍵字，以幫助你確定設計模式。 　　下面是你可以提出的一些問題： 　　如果這個介面是一個人的話，他或她看上去是什麼樣的? 　　當用戶第一次看到這個CMS產品時，你希望他有什麼樣的反應? 　　這個產品和競爭對手的產品有什麼不同? 　　這個產品和哪個著名人物(或汽車、電影等等)最相像?最不像?為什麼? 　　這些問題應該在溝通時及時提出，並鼓勵你的談話物件從情感方面講述她對這個產品的一些觀點。在探討這些問題之前記得觀察對方的反應，因為大部分人可能不太感興趣，或者缺乏恰當辭彙去描述這些觀點。比如，如果一個負責架構設計的人只對資料庫系統和產品的技術結構感興趣的話，你去問他這個介面應該長成什麼樣就純屬浪費時間。 　　不久前，我們設計了一個醫用設備，這個設備能幫助老年病人在自己的家中監測自己的健康狀況。我們從相關人員處獲悉，如果它和上門服務的護士有相似的特徵時，用戶更容易接受這個產品。於是我們根據瞭解到的知識，把這個設備的語氣和風格設計成一種體貼、有責任心和可信任的感覺。 　　與相關人員溝通的最後一件事是確定團隊中的哪個成員將參加電子商務視覺評審會。詢問團隊負責人將安排哪些人去參加這些會議。太多的人參加會議將很難管理(我們建議6個人或更少)。最好是幾個關鍵的成員參加，比如專案經理和產品經理，以及來自市場或品牌團隊的員工。如果有一位與用戶有過密切接觸的代表，比如一名銷售或培訓師來參加評審會則會更好。你應該邀請一位來自開發團隊的員工，作為技術代表來評估這些設計方案的技術可行性。記住讓團隊的其餘成員保持資訊的同步。 　　研究用戶 　　用戶訪談提供了一次驗證團隊成員假設的機會，通過用戶訪談你還可以瞭解更多關於用戶和公司以及其產品之間的情感上的聯繫。另外，訪談也提供了一個造訪用戶所處環境的機會，可以直接瞭解當用戶在和你的產品進行交互時，有可能遇到的挑戰。這是一次非常有價值的Web 3.0實踐，照片或任何第二手資料都無法代替。眼見為實。 　　交互設計師和視覺設計師在用戶研究階段所尋找的是不同的模式，理解這一點是非常重要的。舉例來說，交互設計師想找出的是工作流程、心智模型、任務的優先順序別和頻率、障礙點等等，而這時候，視覺設計師應該尋找以下模式： 　　用戶特徵(比如，身體缺陷，尤其是視力); 　　 環境因素(燈光、用戶和介面之間的距離、顯示器上的保護膜); 　　品牌中有可能引起用戶共鳴的因素; 　　用戶對體驗的期望。 　　將影響你的設計的兩個最常見的網站排名用戶特徵，是視覺和身體上的缺陷。比如，供糖尿病人(通常也有一些視力上的問題)使用的血糖儀，常常出現文字的尺寸太小、圖示不夠清晰等設計，這使得病人飽受其苦。如果你曾經看到一個老年用戶在努力辨認網頁上12個圖元的Verdana文字的話，那麼他很容易就會忽略在書本上出現的7個圖元的文字。而針對行動困難的人士的產品，他們的身體缺陷對設計的影響就更大了，因為這意味著他們的產品上的按鈕需要更大的距離和尺寸。 　　當設計用戶介面時，用戶的應用環境也是考慮因素之一。照明環境或產品的位置，都可能對介面的設計方案有著戲劇性的影響，尤其是尺寸和對比度。在一個外科手術室中，我們發現顯示器離用戶有六英尺遠，同時還覆蓋了一層塑膠布。很明顯我們需要設計一個字體很大對比度很高的介面。相反地，另一些介面，比如手機，是那種既可能在戶內也可能在戶外使用的設備，則需要一種在完全不同的照明環境中都可用的靈活設計。 　　通過一些人體測量學的資料的幫助(比如The Measure of Man and Woman: Human Factors in Design by Alvin R. Tilley, Henry Dreyfuss Associates)，你可體驗到獨特的用戶和環境因素，這有助於設計出一個適用於不同身材的Flash製作產品。 　　就之前提到的家用醫學設備而言，我們造訪了一些用戶的家庭，並做了訪談。我們發現病人的年紀一般都比較大，同時大部分都在客廳都放了一把舒服的椅子，它緊挨著用來放置類似設備的桌子。用戶的身體都不太好，同時還有視力和聽力的問題。他們通常把設備放在一伸胳膊就能夠著的地方。我們的設計方案把這些環境因素都納入了考慮之中，包括足夠大和高對比度文字的視覺風格，以及可選擇的聲音提示。 　　除了理解用戶和環境因素之外，花一些時間去討論品牌和個性是很重要的。你應該詢問用戶，關於他們與你的公司或競爭對手的過往經歷(如果你能分享這些資訊的話)，這樣你可以評估這些資訊和團隊中的假設是否一致。你可以詢問用戶類似這樣的問題： 　　X公司與其他同類型的公司有什麼不同? 　　 你為什麼覺得這個產品或公司很特殊? 　　你希望X公司有什麼不同? 　　你也應該花一些時間理解介面應該具有的個性。在The Media Equation，Byron Reeves和Clifford Nass寫了一篇文章，提出一個觀點：“人們實際上是像對待真正的人類一樣對待電腦的，所以需要用人類的個性特徵來考慮電腦的回答。”就像與同事的溝通一樣，你可以問用戶一些類似這樣的問題： 　　如果介面是一個人的話，它會像是什麼樣的人? 　　 你會如何向朋友描述這個產品? 　　這個產品與競爭對手的產品有什麼不一樣? 　　再次強調，這些問題本身並不能提供給你所有的搜索引擎排名答案，但是它們使你能夠得到一個與用戶有關的、關於視覺設計方面的綜合結論。不要僅僅問：“什麼樣的視覺方案更好一點?”因為與你的同事相比，用戶更難用有效的辭彙來描述他們在外觀上的想法。相反地，你可以提供一些例子作為引導，比如：“如果我的電話是一個人的話，我希望它是有禮貌、聰明和友好的。”與用戶進行視覺設計和品牌的交談可能有一定的挑戰性，但是它能提高你的視覺方案的成功率，因為你更多的是基於與用戶有關的故事來設計，而更少依賴於專案中某些專家的意見。 　　以那個家用醫學監視器的例子來講，我們詢問了病人關於“一個好護士應該是怎樣的?”問題，並收集到一些像這樣的特徵：幽默、關注、善於聆聽、落落大方、親切、能幹、自信、可靠，以及樂觀等等。這些辭彙在稍後的視覺設計流程中將用於建立設計策略。 　　形成視覺策略 　　一旦你完成了上面這些研究工作，你就可以分析這些結果並確定模式了。在這裏，你將得到關於用戶的資訊、他們的環境、潛在的experience keywords以及品牌需求等。 　　首先，將你從研究中得到的結論應用到人物角色上，以確定所有情感或行為上的模式。交互設計師會專注于特定的人物角色的目標、背景和觀點，而視覺設計師則應該注重於情感化，以及用戶和環境的因素等方面。 　　在最近的一個“富消息應用”的專案中，我們基於用戶研究創建了一個人物角色，她對於不認識的人發送的郵件具有很強的警惕性，因為她聽說過很多關於電腦病毒的報導。這種情緒會直接影響到介面的設計，因為為了滿足這類人物角色對於“安全感”的需求，介面必須在web site design第一眼就讓人感覺專業和可信任。 　　Experience keywords(體驗關鍵字) 　　當人物角色被創建出來以後，列出從相關設計人員和用戶訪談中得到的所有描述性的辭彙或概念，並將其分組。這些辭彙組合正是形成一套“體驗關鍵字”的基礎，將用於確定和管理視覺策略。 　　這些在研究期間收集的辭彙幫助我們確定了“體驗關鍵字”的核心，我們可以用來驅動整體的視覺策略。我們通常把這些辭彙列表統一成3個或5個概念組合，然後最終發展成一套“體驗關鍵字”。 　　“體驗關鍵字”描述的是這個人物角色在看到介面時，“最初五秒鐘”的情感反應。考慮這種最初反應有兩個好處。首先，通過提供一種積極的第一印象和持續的情感體驗，它可以強化公司的品牌。其次，對於用戶是否接受這個產品和忍受某些不足，它具有重大的意義。研究表明，具有美感的設計被認為比很少有美感的設計更有用(這被稱為美感可用性效應)。同時，當人們喜歡使用它們的時候，介面就會變成更可用(見Donald Norman在《Attractive Things Work Better》中的報告;或更好的方式，聽聽關於新上市的iPhone的新聞)。 　　保證這些“體驗關鍵字”同樣也適用於你的團隊和一些關鍵成員。可信任和從視覺上描述的關鍵字有助於推動視覺策略的討論。選擇你將用於描述某個人的“體驗關鍵字”;這樣的方式能讓你的觀眾容易接受。你最終確定的那套“體驗關鍵字”看上去應該像下面這個圖： 　　在上面這個例子中，有四個體驗關鍵字：體貼、謙虛、有責任心和善於引導。其他的關鍵字都是在闡述它們的含義。用圖片或其他形象的支援方式也同樣有效。 　　一旦團隊達成共識，體驗關鍵字將為視覺設計指出一個明確的方向。“體貼”直接反映在介面上可能就成為柔和的色彩和形狀，而“善於引導”則描述了一個對比度更強和線條更明確的介面。 　　現在你擁有了客觀武器：人物角色、體驗關鍵字、品牌需求等標準，網頁設計公司這也意味著你得到了一個用於決定視覺設計的堅實基礎。你現在可以提供一個更加深思熟慮的視覺設計方案了，它能得到更切合實際的回饋。現在，當產品經理抱怨橙色的時候，你就可以提醒他這個設計是基於某個人物角色的最佳體驗關鍵字做出的，而這些關鍵字早就得到了大家的首肯，從而讓他遠離自己的主觀臆斷。 　　另外，擁有相關成員和用戶訪談中的上下文資訊，將有助於你更集中、更適宜地針對那些將使用你的產品的人確定最初的設計概念。