DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計心得:如何突破已經足夠好了
設計心得:如何突破已經足夠好了
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:如何突破Good enough?

優澀控是一個很有意思的團體,每個成員都有很獨立的喜好的IT公司,如00後就是100%的果粉,極爺是標准的G粉;但我卻是一個不折不扣的微軟粉絲。原因來自The Story of the Ribbon,設計一個偉大的產品很難,但把一個不偉大的產品修改得偉大則是難上青天。Cc872782.Ribbon01(en-us,MSDN.10)

A ribbon is a command bar that organizes a program’s features into a series of tabs at the top of a window. Using a ribbon increases discoverability of features and functions, enables quicker learning of the program as a whole, and makes users feel more in control of their experience with the program. A ribbon can replace both the traditional menu bar and toolbars.

“功能區(Ribbon)”是一個命令欄,將程序功能組織到窗口頂部的一系列選項卡中。使用功能區能夠使程序的功能特性更易於發現,使用戶能夠快速整體地了解程序,並使用戶在該程序中體驗到更強的控制感。功能區能夠同時取代傳統菜單欄與工具欄。

第一次使用word 2007的用戶會明顯的感覺到,相比Office 2003 經典的WIMP UI,Office 2007的Ribbon UI是對用戶體驗的一個完整的再設計;但稍微體驗一下,你就不得不驚歎,他是那麼的容易實現你的目標。

如今,Ribbon UI已經在微軟的大部分產品中得以應用,微軟憑借Ribbon UI的良好設計正在走向統一體驗的道路。而今天所分享的就是我個人的一點關於設計流程的心得,而不是來自Ribbon UI 的細致分析。

挖掘問題的根本原因

當推出Office 2003之後,微軟就著眼與下個版本的設計工作,調查得知對2003的傳統觀點:“Good enough,足夠好了!”或者誇獎到:“任何我需要的功能Office都有了。”

當接觸到真實的用戶時,他們的說法則大相徑庭:“office太強大了,如果我能更好的了解它,它能夠對我的工作帶來更好的幫助。”“我知道它有這個功能,但我就是找不到。”

於是設計團隊回溯了word的所有歷史版本,對每個版本增長的命令項,菜單,工具欄,任務面板進行分析對比發現導致用戶無法找到命令的根本原因:傳統的WIMP界面已經無法承載目前Office中大量的功能以及命令,相對於過去,用戶要花費大量的時間去搜索一個普通的命令。

menu item

taskbar

根據詳細的訪談,以及歷史版本的分析,設計團隊才終究定下解決方案:Office需要一個全新的UI,去喚起這個軟件的靈魂。

簡潔而又高效的設計流程

Office 2007的設計流程簡單且只包含四個步驟,研究->設計原則->原型->評估。

  1. 研究:研究的作用用以發現問題。
  2. 設計原則:確定好的統一原則有利於設計師把握設計方向。
  3. 原型:原型用以快速展現設計師的基於設計原則的創意。
  4. 評估:對原型進行審核以及評估,決定是否采納。

在實際設計中,這樣的流程易於迭代,且很高效。設計師在這樣的流程中能多確切的做嘗試且快速的改進(而不是僅僅的通過個人推理或者群體智慧去評估其他方案),如00後在漫話產品設計中說的不斷的犯錯才是創新的源泉,如在考慮將Ribbon UI是放在軟件頂部抑或是左右側時,他們即刻設計了邊欄的Ribbon UI,發現這是一個錯誤的方向,變取消了打算。還有對於Quick access Toolbar設計,最初的嘗試也有多種方向,嘗試多種方案後才對比確定。

對於quick-access-Toolbar的設計稿

至上而下的設計原則

與我平常所見的設計流程不同,Office設計團隊對設計原則較為強調,Office設計團隊甚至這麼說:“Design tenets have to be religion,(設計原則必須上升到宗教信仰的高度)。”容我猜測應是設計團隊人員較多,設計原則利於設計師們往同一個地方“使勁”,更重要的一點是,這有利於整個團隊的執行力,使原型的內部評估更加具有規則性以及說服力,最大可能的降低主管或者是老板對設計的干擾。保證設計團隊中,每個人,每個環節都有著共同的目標。畢竟光說不練假把戲。

在設計方法上,設計團隊特別強調了結果導向設計(Results-Oriented Design)區別命令導向設計(Command-Oriented Design),與目標導向設計(Goal-Directed Design)有異曲同工之妙。

這種方法我不細致說,簡單而言,則是讓用戶的關注焦點定位於他要的結果(或者說是他的目標)能否實現,實現的效果又是怎樣的;而不是讓用戶關注與他要使用哪個命令去達到目標,這個命令如何尋找,如何使用等。(這也是典型的WIMP UI的特性)

於是乎,以word為例,我們可以看到以下較為經典的改動:

  1. 基於計算機邏輯分類命令菜單被取消,被修改成為基於用戶目標分類的七個核心選項卡:開始,插入,頁面布局,引用,郵件,審閱,視圖。
  2. 當用戶選中某元素時,自動在核心選項卡後激活與之對應的上下文選項卡(contextual tab),或者是上下文選項卡組(contextual tab set),讓針對此元素的編輯操作在此選項卡中呈現,用戶則不必像以往那樣去錯綜復雜的菜單項中尋找。
  3. 使用庫(Galleries)與實時預覽(Live Preview)等方法,圖形化呈現一系列命令或者選項。讓用戶在作出決定之前就能清楚的看到結果是怎樣。

锲而不捨的迭代

很多人恥笑與微軟是最頻繁打補丁的裁縫,但實際確實是如此。在office 2007的開發中,他們就在團隊中培養起“迭代的文化”,而這種文化幾乎苛刻的折磨每一個人:迭代期被明顯的寫入到項目的開放進程中來已經確定的事情,要重做3次讓其做到最好。從2005年11月beta1發布,經歷了超過5個月的部署;跟蹤超過3百萬個用戶的操作記錄以及習慣。

office timeline

長達一年的耐心,Office 2007最終達到了一個令人激動的高度。PC world與當年的CES都將其評為2007年最具創新產品。

個人快閃總結

微軟的耐心以及穩重扎實的創新精神值得所有人尊敬。

對問題的深度挖掘才能另設計人員看到本質,從根本解決問題。

自上而下的設計原則保證執行力。

長期迭代與敏捷性開發流程是創新的源泉。

題外話

Office 2007中的ribbon UI應用並不是完善,如PowerPoint依然保留了菜單欄。或許我們可以在Office 2010中看到他的強大魅力。

雖然目前有很多采用Ribbon UI的非微軟的軟件(如Mindmanager 8 ,IEtester,SmartDraw 2009),但目前還未有應用得好的。

如果你是一位想開發Ribbon UI 的程序員,請找一位有研究的設計師配合。Ribbon UI並不是簡單的命令再組合。

個人認為Adobe系列軟件應該用Ribbon UI了。

備注:本篇文章純屬個人口水堆積以及一個粉絲對偶像的濤濤敬仰之辭,如有不滿,請即時撥打110求助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved