如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在整體設計流程中，用戶故事可以說是點亮應用絕對目標的那一點星光。該片文章的作者將給我們講解為什么哪怕是小范圍的采用用戶故事也能給整體UI設計流程帶來巨大的好處。

一支設計團隊坐下來討論為一家新客戶所設計的應用的第一輪模型情況。隨著團隊成員不斷提出想法，我們發現大家對于這個應用是什么？其功能應該是什么樣有著截然不同的看法。后來，會議迅速變成了“誰對誰錯”而不是“什么對什么錯”的爭論。大家紛紛為自己的設計辯護，但沒有一個人站在用戶角度說話。聽著耳熟嗎？正是在這種時刻，我們迫切需要描繪用戶故事。

今時今日，很多UI/UX專業人士都開始意識到自己工作的環境進入了Agile狀態。Agile開發（和設計）流程需要快速推進，相應地，我們也需要能夠實現快速、協作的工具。這個聽起來像是個矛盾，但實際上確實有很多工具能夠幫助我們在不增加項目時間的情況下有效合作。用戶故事就是針對“Agile法”的工具，在運用到UI設計流程時，其能夠為后續的設計階段提供堅定的基石。簡約版的用戶故事操作起來幾乎不用時間，但卻能對保證項目按軌道運行帶來奇跡般的效果。

我們的UI設計團隊會在流程中運用用戶故事，而在運用過程中我們發現，用戶故事幫我們做到了三件事。

1.   用戶故事可以讓產品以用戶為核心。

2.   用戶故事可以促進團隊成員之間的合作。

3.   用戶故事可以防止出現功能蔓延以及設計死胡同。

什么是用戶故事？

從根本上說，用戶故事的用途是描述用戶通過使用軟件產品想要實現的任務。用戶故事起源于Agile和Scrum開發策略，但是對于設計師來說，用戶故事主要用來提醒用戶目標以及對各個界面設計進行整理和排序。

一個用戶故事就是簡單的一句話?？梢杂眠@句作為模板：“作為用戶我需要（基本用戶目標）”。因為故事都很簡短而且有針對性，所以需要多個不同的故事來覆蓋所有可能的用戶案例。事實上，我們會想辦法把每個故事進行細化。

舉個例子，一個用戶故事剛開始時是：

“作為用戶我需要創建一個新帳戶。”

但是新建帳戶的過程中又涉及到哪些步驟呢？用戶需要提供用戶名、密碼以及其他相關信息。其中每個操作都需要有相對應的用戶故事，故事越具體，到后期對設計師和開發來說就會越方便。那么，“創建新帳戶”就可以進一步細化為：

“作為用戶我需要輸入一個新用戶名?！?br data-filtered="filtered" /> “作為用戶我需要輸入密碼?！?br data-filtered="filtered" /> “作為用戶我需要再次輸入密碼進行確認?！?br data-filtered="filtered" /> “作為用戶我需要提交信息，創建帳戶?！?

這樣繼續下去，最后就會得到一大長串用戶故事，其中大部分都需要加入到最終產品內。

我們最近為Quiksilver服裝設計了一款iPad應用，可以讓銷售其貨物的店鋪跟蹤當前存活狀態，以便輕松下單訂新貨。就是這么一款看似非常簡單明了的應用，我們想出了266個用戶故事（剛開始時）。你們都沒想到細節能夠細到這種程度吧！

以用戶為中心

作為設計師，我在第一次和項目相關人員開會的時候就會開始考慮布局和配色方案。在聽他們說目標以及了解終端用戶情況的同時，我就能想象出這款應用應該是什么樣的。但關鍵在于不能本末倒置——我們要先確定用戶故事，讓用戶故事道出設計，而不能倒過來搞。

在對應用的所有用戶故事做完腦暴之后，我們會把故事放到Google的合作電子表格上，以便客戶在想到有其他用戶故事時隨時添加。在客戶和團隊感覺已經窮盡所有內容之后，我們會給每個故事一個編號。這些編號到項目后期會派上大用場，我們會用編號作為一個簡明的標簽來表示哪些故事需要在哪個時間段處理。

這個表格的功能不僅是提醒我們應用的功能，還能讓我們在整個流程中與用戶緊密相聯。每個用戶故事都是針對于我們終端用戶的，以便保證始終照顧到他們的需求。這一點在一個有關約會應用的項目中表現的尤其明顯。

關于這個應用，我在給“用戶資料”頁面做線框圖的時候，最開始以為需要添加一個“保存用戶”功能按鈕。但是，我不經意瞟了一眼“用戶資料”部分，突然想起來用戶故事中的一個細節：“作為用戶我需要收藏其他用戶?！?

把“保存”一詞改成“收藏”這個決定雖小但很關鍵，因為“保存”用戶聽起來冷冰冰的，而“收藏”則契合了用戶有關約會的心態。設計師容易陷入到技術的陷阱中，特別是在對功能投入了大量時間之后。而用戶故事可以提醒我們時刻以用戶體驗為核心，因為用戶體驗是最終決定應用性格的東西。

促進合作

UI設計通常涉及到的人不止一個。其中還可能包括客戶、設計師、程序員以及一大堆的其他職位工作人員，具體要取決于公司的規模大小。從很多方面說，這就類似于一隊人劃船。要贏得比賽，團隊的每個成員都要以相同的速度朝著相同的方向一齊劃槳。這并不是說所有人的意見都要始終統一，而是說所有人都要有統一的目標并且清楚自己在團隊中的角色。

雖然我們在CitrusBits所采用的流程遠算不上完美，但是我們卻發現用戶故事能夠保證船上的人勁都往一處使。以用戶故事為基準做出決策讓我們得以明確定義出應用的目標。這樣一來就大大降低了團隊合作時的障礙，因為我們用簡短、有針對性的詞句明確定義出了共同的目標。

另外，用戶故事還能讓身處不同地理位置的團隊更加輕松的合作。我們在為一家舊金山客戶開發一款問答類應用時，我們在海灣地區的團隊會時不常的和客戶碰面討論應用要求。他們寫出了用戶故事（但并沒有在項目期間進行其他修改）然后放到了Google Drive。而我們身處洛杉磯的團隊則可以在畫線框圖的同時隨時參考用戶故事，并進行必要的改動。要不是有了這個步驟，這個項目所花費的時間會長的很多，而且還會需要通過大量漫長的解釋工作來解決這些簡短用戶故事幾分鐘就能解決的問題。

防止出現功能蔓延以及設計死胡同

“功能蔓延”是一個UI設計中常見的詞。它是指相關人員會不自覺地不斷增加新功能，擴展項目范圍，這既包括硬件也包括軟件方面。

這幅漫畫完美地詮釋了功能蔓延。

當然，在項目進展期間我們是不反對更改要求的。但是，除非有明確的用戶故事告訴我們原因，我們會拒絕哪怕添加一個簡單的文本框。我們之所以在這方面這么強硬，是因為之前看到過有的項目超出控制、丟掉中心最后無法實現最初設定的目標。

舉個例子，不久之前，我們有個客戶忽略了用戶故事這回事。當時我們正在給一家處理保密資產的公司搭建應用，客戶想要做一款能夠管理員工之間通訊的應用。主要的通訊手段是一個使用文字信息和圖片的公司內部對話平臺（這一點我們都認可了），這個我們記錄到了用戶故事里。后來，客戶又要求增加視頻、語音信息和位置分享。為了保持我們“靈活”的形象，我們想辦法把這些內容加入了新的通訊系統，也因此擴大了項目范圍，推遲了時限，在做完了全部工作之后我們卻發現添加的內容其實對終端用戶沒用。

盡管新增的功能也很屌，但我們最開始的初衷是做一款盡量簡化通訊的應用以便促進團隊建設和協作，不讓他變成一個公司內部的Facebook。于是，我們又回到了用戶故事并重新提醒了客戶做應用的初衷，最后成功組織了功能蔓延，回到了正軌。多方面的實驗盡管能帶來很多很棒的成果，但是如果產品無法滿足根本要求，再精巧也沒意義。

通過這次教訓，我們在開發Quicksilver這個針對B2B公司的銷售類應用時嚴格遵照用戶故事開展流程。最后，最終產品一絲不茍地遵守了最初設計，這主要歸功于我們在前期積累了一套全面的用戶故事。以用戶故事為基石為后期節省了大量工作，同時也讓我們的工作更加有序、更加以用戶為中心。盡管產品的每次迭代都帶來了更多的用戶和客戶反饋，但產品理念的核心一直屹立不倒。

產品從最初設計到最終成品變化非常小。

每個用戶故事對于設計團隊和開發團隊來說都有自己的一套意義。時刻思考技術限制雖然說是好的，但是畢竟我們說的是“用戶故事”，不是“開發的故事”也不是“設計師的故事”。正因為我們通過用戶故事對用戶的觀點進行了排序整理，我們才能更輕松地了解所面臨的問題進而創造出一款真正有用的最終產品。

 藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

之前有句古話：“好的設計都是顯而易見的”現在看來可能已經過時了，而且我很確定的說在之前的幾個世紀它都有不同的形式。它可以是一個好的美食、音樂、建筑、服飾、哲學以及其他的一切。

需要值得注意的是人類思維的變化非常緩慢，對人類行為的知識在至少50年左右的時間內都不會過時。為了使讀者們便于理解，我們將會幫助我們設計偉大的產品的設計原則保持一致性。我們每個月都會至少被提醒一次這些小的設計原則，以至于我們可以更好的進行設計。

人類大腦的容量每年都幾乎不會改變，所以研究人類行為的見解將有很長的保質期。二十年前對用戶來說很困難的東西今天可能依舊困難?！猨·尼爾森

回顧：不要讓我思考

早在2000年，Steve Krug就曾列出一些有用的設計原則，在現在看來依然很有價值和影響的互聯網泡沫破裂之后。即使后來有一些修訂版本，但是內容依然沒有什么改變。是的，你可能會說現在的互聯網看起來更現代，網站更有組織（而且還有更多的flash）。但我的意思是，人類的行為幾乎沒有改變。我們總是希望“不要讓我思考”原則適用于任何跟我們產生互動的產品（無論是微波爐、電視、智能手機或是汽車）。

1、我們從不閱讀，我們都是一掃而過

這個原因是：在閱讀過程中我們都帶有一個使命，因此我們只尋找我們感興趣的東西。例如，我很少記得自己瀏覽過的產品網站主頁上的大部分文字。為什么？因為大多數上網的用戶都在努力完成一些事情，而且是快速完成的。我們沒有多余的時間去閱讀。但是我們仍然放了很多文字在網站上因為我們認為人們需要知道這些?；蛘哒缫恍┰O計師們所說的：“它增加了體驗”。

使用大量的標題——它們會告訴你每個部分是關于什么的，或者它們是否與這個人相關。無論哪種方式，它們都能幫助你決定繼續瀏覽或離開網站

段落要短——段落長的話會讓讀者很難確定自己的位置，而且它們比一系列短段落更難瀏覽。在段落中總有一個合理的地方把它分成兩段。

使用項目符號列表——幾乎任何東西都可以是項目符號列表。你有一個用逗號分隔很多東西的句子嗎？然后它可以是一個項目列表。另外，不要忘記在項目列表行之間留出空間，以便進行最佳讀取。以Medium為例。

突出關鍵字——許多頁面掃描過程包括尋找關鍵字和短語。用粗體顯示最重要的一個，這樣更容易找到。此外，不要突出太多的東西，因為它會失去效率。

2、創建有效的視覺層級

另一個有助于掃描頁面的重要方面是提供適當的視覺層次結構。我們必須弄清楚，頁面的外觀描述了元素之間的關系。有幾個原則：

一件事越重要，它就越突出。最重要的東西要么是更大的，要么是更大膽的顏色設置。

邏輯上相關的東西，在視覺上也一樣相關。例如，在相同的視覺樣式下或在相同的標題下進行分組的事情一般都是相似的。

3、不要重復造輪子

我們相信人們想要更多的新東西。但我們忘記了，市場上有很多app，每個都需要我們的時間。每一個都有不同的互動，每一個都需要我們學習。當我們想到：“哦，伙計，又一個要學習的應用程序？！”

在我說這句話之前，有一點很重要的我們需要知道：

作為設計師，當被要求設計新東西時，我們會忍不住去嘗試重新發明輪子。因為像其他人一樣做事似乎是錯的。我們被雇來做一些不同的事情。更不用說，業界很少會因為設計出“最佳使用慣例”的產品而獲得獎勵和贊揚。

在重新發明輪子之前，你必須了解你想要顛覆和創新的東西的價值（時間、精力、知識）。

4、產品使用說明必須消失

我們的工作是讓事情變得清晰明了。如果顯而易見不是一種選擇，那么至少不言自明。關于指令你需要知道的主要事情是沒有人會去讀它們。我們的目標是去掉這些說明，使一切都一目了然。但在必要的時候，盡可能地削減（但實際上，沒人會去讀它們）。我們蒙混過關。

如果它不明顯，那么我們應該力求不言自明。

以宜家為例。如果你讓一個普通人從宜家(IKEA)組裝一個衣柜，我敢肯定，他在大多數情況下都會把它組裝好。為什么？在大多數情況下，如果我們面前有一幅清晰的圖畫，我們就能清楚地看到它應該如何裝配。但即使在他們看說明書的情況下，沒有文字，只有圖像。

5、我們并不在乎你的產品是如何運作的

對于大多數人來說，了解或理解你的產品是如何工作的并不重要。不是因為他們不聰明，而是因為他們不在乎。因此，一旦他們確定了你的產品的用途，他們就很少會轉而使用其他產品。

讓我們以蘋果AirPods為例。我們都可以承認，就你所付出的代價而言，它們是最糟糕的耳機。但當我觀察人們如何與它互動時，我明白了他們購買它的真正原因。他們不會讓你思考為什么它不工作。你甚至沒有注意到他們有新技術。

我看著我媽媽是如何與它們互動的，她從來沒有問過我背后的技術是什么，或者它們是如何工作的。她知道，只要你在你的設備附近打開盒子，它就會連接起來。它是那么容易。

6、人們不會去尋找“微妙的線索”——我們很匆忙

我最喜歡的一點。我們設計師喜歡給用戶微妙的效果和添加美麗的快樂。對吧？那么，如果我告訴你你的用戶不關心它呢？不管他們告訴你他們有多關系，可是他們沒有。第一次？是的。第二次？好的。第三次呢？說實話，我要看多少才能看夠？

為什么會這樣？與app的愉悅感和微妙的效果相比，生活是一個壓力更大、要求更高的環境。例如，你是一個父親，你的孩子因為想要冰淇淋而尖叫，狗在叫，因為有人在前門叫喚，而你正試圖訂一張40分鐘后就會開走的火車票。在那個特定的時刻，人們不會對你微妙的暗示表示不滿。另一方面，我們可以使用它們，但不是當它殺死用戶流的時候。

7、焦點小組不是可用性測試

Focus group（焦點小組）指的是一群坐在桌邊討論事情的人。他們談論他們對產品的看法，過去的經驗，他們對新概念的感受和反應。焦點小組對于確定你的受眾想要什么是非常好的。

可用性測試是一次觀察一個人試圖使用某樣東西（在本例中是你的產品）。在本例中，你要求他們執行特定的操作，以查看是否需要在概念中修復某些內容。所以焦點小組是關于傾聽的，可用性測試是關于觀察的。

8、我們允許個人的感覺占據整個過程

我們所有設計數字產品的人都有這樣的時刻：“我也是一個用戶，所以我知道什么是好什么是壞?！闭驗槿绱?，我們往往對自己喜歡什么、不喜歡什么有強烈的感覺。

我們喜歡用帶______的產品，或者我們認為______是一個很大的痛苦。而當我們在一個團隊工作時，往往很難在一開始察覺這些感覺。其結果是滿屋子的人都對如何設計一個偉大的產品有著強烈的個人情感。我們傾向于認為大多數用戶都和我們一樣。

9、你問了錯誤的問題

如果你問：“人們喜歡下拉菜單嗎？”正確的問題是：“在這個上下文中，這個下拉菜單，加上這些詞，是否為可能使用這個網站的人創造了良好的體驗？”

我們應該撇開“人們喜歡它嗎？”并深入研究設計的戰略背景。

原因是如果我們關注人們喜歡什么，我們就會失去注意力和精力?？捎眯詼y試將消除任何“喜歡”，并向您展示需要做什么。

10、當一個人使用了你的產品，你忘了她可能并不會花時間思考

我在哪兒?

我應該在哪里開始?

他們把_____放在哪里了?

這一頁上最重要的東西是什么?

他們為什么這么稱呼它?

那是廣告還是網站的一部分?

關鍵是，在使用你的產品時，我們腦海中浮現的每一個問題，都只會增加認知負荷。它分散了我們對“我為什么在這里”和“我需要做什么”的注意力。通常，當人們只是想知道這個按鈕是否可以點擊時，他們并不喜歡解謎。

每次你讓用戶點擊不工作的東西，或者它看起來像一個按鈕/鏈接，但它不是，這也會增加用戶的一堆問題。之所以會出現這種情況，是因為生產產品的人并不太關心產品。

 藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

“工欲善其事，必先利其器”；作為設計人員來說，設計方法和設計模型就是輔助我們更好做設計的工具。就像廚師做菜時候的菜譜一樣；面對新的菜種，能更快指引我們做出味道不錯的菜肴。

體系化的設計方法不僅能更好的指導設計師做設計；另一個方面，經過設計方法包裝后的設計，能讓設計師更坦然面對來自各方的質疑，更專業的講述自己的設計依據。在做不同菜肴的時候，我們需要不同的菜譜來指引；而在不同的設計階段，設計師也需要不同的設計模型/方法，讓我們更靈活的做設計分析與輸出。

下面從接到項目需求 > 體驗迭代優化階段，筆者將為大家詳細講解以下 5 種設計模型，并配出具體實踐的案例，希望對大家有所啟發。

模型一：SWOT 模型

1. 概念介紹

SWOT分析法（也稱 TOWS 分析法、道斯矩陣）即態勢分析法，20世紀80年代初由美國舊金山大學的管理學教授韋里克提出，經常被用于企業戰略制定、競爭對手分析等場合。

在現在的戰略規劃報告里，SWOT分析應該算是一個眾所周知的工具。來自于麥肯錫咨詢公司的SWOT分析，包括分析企業的優勢（Strengths）、劣勢（Weaknesses）、機會（Opportunities）和威脅（Threats）。

2. 使用場景

主要用在產品前期的戰略規劃中；用于項目成員知己知彼，同時也能知道在行業領域自己的產品所處的位置和核心競爭力是什么；對于產品方向的定位和全方位分析有復用價值。

3. 計價值

SWOT分析實際上是將對企業內外部條件各方面內容進行綜合和概括，進而分析組織的優劣勢、面臨的機會和威脅的一種方法。

優劣勢分析主要是著眼于企業自身的實力及其與競爭對手的比較，而機會和威脅分析將注意力放在外部環境的變化及對企業的可能影響上 。在分析時，應把所有的內部因素（即優劣勢）集中在一起，然后用外部的力量來對這些因素進行評估。

4. 具體實踐案例說明

下圖是筆者曾為的阿里內部某個數據服務平臺分析的案例；側重介紹了為什么要做這個數據平臺；以及做這個平臺我們項目組的優劣勢和機會點分別是什么。在給老板匯報產品來源&方向時是非常有效的。

最后，SWOT 分析模型其實還可以與商業畫布相結合，便于更全面對項目/業務進行快速分析和深入了解；深入懂業務的設計師才能真正在團隊中進行發聲，提出超越 UI 層的建設性意見。

模型二：Google Design Sprint

1. 概念介紹

Design Sprint, 設計沖刺，顧名思義就是要在短時間內做出好設計；是由 Google 提出的設計方法。

2. 使用場景

設計沖刺這個設計方法主要適用于短時間就需要產出設計方案；例如一些 Workshop 的共建, 產品迭代周期很快的新需求/任務，需要系統化分析與輸出設計方案。

3. 設計價值

可以在很短的時間內輸出一套系統化的設計策略及方案；

通過與不同背景的參與者進行溝通協作，能獲取更多看事物的角度和差異化知識；創造更多可能；

作為一種理想的設計教育工具，讓非科班的設計人員完整又快速了解產品&設計。

4.  具體實踐案例說明

設計沖刺的主要內容包括 6 個階段：

理解（Understand）：理解要為用戶解決的問題

定義（Define）：明確產品策略（數據分析，用戶調研，設計原則制定等）

發散（Diverge）：探索實現方案

決定（Decide）：確定設計方案

原型（Prototype）：構建產品原型

驗證（Validate）：驗證產品原型

模型三：GUCDR 模型

1.概念介紹

相比前一個設計沖刺模型，GUCDR 模型在設計過程中的實用性更強，能讓你快速用起來，幫你系統性梳理信息；在實際工作中，只要能夠回答畫布中的每個點，即可形成完整的設計推演過程，讓設計思路逐漸清晰起來。

G：Goal

U：User

C：Condition

D：Design

R：Realize

2. 使用場景

GUCDR 模型很適合用于前期需求調研和整理階段；特別是在自己不是很熟悉的領域中，把信息按照模型和畫布中的點進行歸類匯總；最大限度的讓自己的設計思維和信息邏輯得到詮釋。

3. 設計價值

3.1  對設計的需求來源及設計目標的聚焦定位，非常有價值，能快入深入了解業務背景；

3.2  對設計階段的目標拆解，從設計目標 > 設計策略 > 設計方案，層層遞進，設計方案輸出的邏輯性和針對性很強。

4.  具體實踐案例說明

GUCDR 模型在具體的使用過程中，可以和 GUCDR 畫布結合起來一起使用。信息下鉆的更深入具體，從項目目標到設計落地，每個階段都有具體的節點支撐，在使用過程中只需要把信息直接輸入到對應的位置即可。下圖為 GUCDR 畫布模板，可直接把業務相關信息輸入進來。

模型四：雙鉆模型

1. 概念介紹

雙鉆設計模型由英國設計協會提出，該設計模型的核心是：發現正確的問題、發現正確的解決方案。

雙鉆模型是一個結構化的設計方法，被很多設計師喜愛和使用。

探索/調研——透析問題（發散）

定義/合成——聚焦領域（集中）

發展/構思——潛在問題（發散）

傳達/實現——實施方案（集中）

2. 使用場景

一般應用在產品開發過程中的需求定義和交互設計階段；教我們如何對未知的可能的事物進行探索；一步步到達已知的理應的層面。

3. 操作使用說明

雙鉆模型的四個階段也許很精簡并且合并到兩個主要的階段。

第一階段——做對的事（菱形1——探索和定義）

第二階段——把事情做對（菱形2——開發和履行）

4.  具體實踐案例說明

下圖是對阿里內部一款移動運維產品的分析，分析其從 0-1 的方向探索和從 1-1.5 的發展歷程：

下圖是曾經在一個設計講座中，滴滴 CDX 一位設計師的分享，她把雙鉆模型利用到設計的研究和輸出階段，個人感覺此模型此刻的使用場景也很貼切；不僅僅是在完整的一個項目中，在單一的某個階段雙鉆模型也是理念很好的承載容器。

模型五：卡諾模型

1.概念介紹

kano模型是狩野紀昭教授發明的一種工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。

在卡諾模型中，將產品和服務的質量特性分為五種類型：

1> 魅力屬性：用戶意想不到的，如果不提供此需求，用戶滿意度不會降低，但當提供此需求，用戶滿意度會有很大提升；

2> 期望屬性：當提供此需求，用戶滿意度會提升，當不提供此需求，用戶滿意度會降低；

3> 必備屬性：當優化此需求，用戶滿意度不會提升，當不提供此需求，用戶滿意度會大幅降低；

4> 無差異因素：無論提供或不提供此需求，用戶滿意度都不會有改變，用戶根本不在意；

5> 反向屬性：用戶根本都沒有此需求，提供后用戶滿意度反而會下降。

2. 使用場景

卡諾模型的主要使用場景是對用戶需求分類；

另一種是對多個功能點進行優先級排序。

3. 具體使用操作

步驟一：設計問卷調查表，實施有效的問卷調查

KANO 模型的問卷問法，是對每個質量特性都由正向和負向兩個問題構成，分別測量用戶在面對存在或不存在某項質量特性時的反應。問卷中的問題答案采用五級選項分別是：

我很喜歡：讓你感到滿意、開心、驚喜。

理應如此：你覺得是應該且必備的功能。

無所謂：你不會特別在意，但還可以接受。

勉強接受：你不喜歡，但可以接受。

我很不喜歡：讓你感到不滿意。

步驟二：問卷結果整理，進行數據分析

根據問卷結果進行 KANO 模型二維屬性歸屬分析，可得出魅力屬性、期望屬性、必備屬性、無差異屬性、反向屬性與可疑結果的功能屬性歸類百分比。除了對屬性的歸屬探討外，并通過百分比計算出 Better-Worse 系數，表示某功能可以增加滿意或者消除很不喜歡的影響程度。

增加后的滿意系數 Better/SI=(A+O)/(A+O+M+I)

消除后的不滿意系數 Worse/DSI=-1*(O+M)/(A+O+M+I)

根據 better-worse 系數值，將散點圖劃分為四個象限。

第一象限/期望屬性：better 與 worse系數成正比；表示產品提供此功能，用戶滿意度會提升，不提供此功能，用戶滿意度會降低，這是質量的競爭性屬性，應盡力去滿足用戶的期望型需求。

第二象限/魅力屬性：better系數值高，worse 系數絕對值低的情況。表示不提供此功能，用戶滿意度不會降低，提供此功能，用戶滿意度和忠誠度會有很大提升；

第三象限/無差異屬性：better系數值低，worse系數絕對值也低的情況。即無論提供或不提供這些功能，用戶滿意度都不會有改變，這些功能點是用戶并不在意的功能。

第四象限/必備屬性：better系數值低，worse系數絕對值高的情況。當產品提供此功能，用戶滿意度不會提升，當不提供此功能，用戶滿意度會大幅降低；此象限的功能是最基本的功能，這些需求是用戶認為產品有義務做到的事情。

步驟三：數據解讀，將結果落地實施

KANO 模型是對功能需求的優先級進行探索，具體情況還需要和業務方進行討論，結合實際情況后制定可行的產品功能開發優先級順序，以將調研結果落地實施。

4. 具體案例實踐說明

題目：根據報警內容，“掌上運維”提供運維操作建議（如磁盤滿了智能推薦執行日志清理等）

步驟一：設計問卷問題，發放問卷

步驟二：問卷統計，進行 KANO 模型二維屬性歸屬分析

步驟三：根據問卷統計的用戶數據；計算出每個區域的百分比；

具體計算方式是全部區域的人數相加作為分母；每個格子中的數字作為分子，即可得出每個格子的百分比出來。

具體百分比得出后，將下表中標 A、O、M、I、R、Q 的格子中百分比相加，即可得到五種屬性對應的百分比。本調查結果可以得到A魅力屬性占比為42.1%，O期望屬性占比9%，M必備屬性占比1.2%，I無差異屬性占比38.9%，R反向屬性占比1.8%，Q可疑結果占比7%。

步驟四：根據 Better-Worse 計算公式，得出 Better-Worse 系數，明確功能落點象限。

步驟五：多個功能需求結果對比進行優先級排序。

模型六：METUX 幸福模型

1. 概念介紹

為了幫助大家更好地進行“幸福設計”，卡里羅教授分享了他的一個模型——Motivation, Engagement and Thriving in theUser Experience (METUX)。

2. 使用場景

產品成熟穩定期，需對產品&用戶體驗進行提升時；或需綜合對產品體驗進行評估分析時；提升用戶幸福感，希望產品能對用戶行為方式及生活質量有所影響時。

3. 主要使用操作

在考慮用戶體驗時，從4個層次進行考慮：

??  第一層是“界面”體驗：用戶與產品交互時的體驗如何。

??  第二層是“任務”體驗：界面之上是用戶完成的任務。如利用智能手環計步，用戶在完成任務時體驗如何。

??  第三層是“行為”體驗：任務之上是用戶的行為。如用戶購買智能手環的目的是運動，此時行為可能是跑步、騎自行車。因此產品在任務之上應該深入關注用戶行為上的體驗。

??  第四層是“生活”體驗：行為會對生活產生影響。如運動過量可能導致身體受損。

在設計過程中，應該關注“勝任力”、“自主性”和“關系”三個關鍵因素，這些基本心理訴求是動機、投入感和幸福感的根本。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

設計師需要每天解決問題，找到合適的解決方案需要深入研究和精心策劃的測試。發現一種適合所有人的方法或秘密公式可以自動解決我們所有的界面設計問題。我們可能還沒有答案，但我們確實知道我們有時可以采取的某些捷徑。

“啟發式”是簡單而有效的規則，可以幫助我們形成判斷并做出決策。我們可以將它們視為UI最佳實踐的一般指導原則。 

注意：這些規則有其時間和地點，并不是可用性測試的替代品。

雖然Jakob Nielsen的10個用戶界面設計啟發式算法可能是最流行的啟發式算法，但還有其他一些。Ben Shneiderman創建了一個最好的固體交互設計指南，稱為設計用戶界面，它揭示了他自己的原則集合，被稱為“八個黃金接口設計規則”。我們今天要看這些規則。

Loren Terveen和Ben Shneiderman在馬里蘭大學的Webshop 2011 ©Marc Smith

1.  爭取一致性

設計“一致的接口”意味著對相似的情況使用相同的設計模式和相同的動作序列。這包括但不限于在用戶旅程中在提示屏幕，命令和菜單中正確使用顏色，排版和術語。 

請記?。阂恢碌慕缑鎸⑹鼓挠脩舾菀淄瓿伤麄兊娜蝿蘸湍繕恕?

       Namastelight by Martin Strba風格指南是確保設計過程一致性的一種方法。

2.  啟用常用用戶使用快捷方式

說到使用UI規則作為快捷方式，您的用戶也將受益于快捷方式，特別是如果他們需要經常完成相同的任務。 

專家用戶可能會發現以下功能有用： 

縮略語

功能鍵

隱藏的命令

宏觀設施

                                     Khalid Hasan Zibon的上下文菜單

3.  提供信息反饋

您需要讓用戶隨時了解流程每個階段的情況。這種反饋需要有意義，相關，清晰，并符合上下文。

                                            文件上傳者Antonija Vresk 

4.  設計對話以產生關閉

讓我解釋。動作序列需要有開頭，中間和結尾。任務完成后，如果是這種情況，請為他們的用戶提供信息反饋和明確定義的選項，以便為您的用戶安心。不要讓他們疑惑！

                                    Jose Antonio Orellana的Flash消息

5.  提供簡單的錯誤處理

應設計一個良好的界面，以盡可能避免錯誤。但是當錯誤發生時，您的系統需要讓用戶輕松了解問題并知道如何解決問題。處理錯誤的簡單方法包括顯示清晰的錯誤通知以及描述性提示以解決問題。

                                       由Adnan Khan進行的Litmus形式驗證

6.  允許輕松撤銷行動

在發生錯誤之后找到“撤消”選項立即得到解脫。如果他們知道有一種簡單的方法可以解決任何事故，那么您的用戶就會感到不那么焦慮，更有可能探索各種選擇。 

此規則可應用于任何操作，操作組或數據輸入。它可以從簡單的按鈕到整個行動歷史。 

                                           Tyler Beauchamp撤銷倒計時

7.  支持內部控制點

一，定義：

“在人格心理學中，控制點是人們相信他們能夠控制事件結果的程度” -  Julian Rotter

為用戶提供控制和自由非常重要，這樣他們才能感覺到他們負責系統，而不是相反。避免意外，中斷或任何未被用戶提示的內容。 

用戶應該是行動的發起者而不是響應者。

                                   Vlad Ponomarenko的權限對話框

8.  減少短期內存負載

我們的注意力有限，我們可以采取任何措施使用戶的工作更輕松，更好。我們更容易識別信息而不是回憶信息。在這里，我們可以參考尼爾森描述“ 對召回的認可 ” 的原則之一。如果我們保持接口簡單和一致，遵守模式，標準和慣例，我們已經為更好的識別和易用性做出了貢獻。 

我們可以添加一些功能，以幫助我們的用戶，具體取決于他們的目標。例如，在電子商務環境中，最近查看或購買的項目列表。

                                     最近查看的膠囊由Gavin Williams聯系

結論

雖然您應該始終采用基于啟發式算法的決策，但遵循一系列規則和指南將引導您朝著正確的方向前進，并允許您在設計過程的早期發現主要的可用性問題。這八個原則適用于大多數用戶界面; 它們來自Shneiderman自己的經驗，經過三十多年的精心改進。其他人，如雅各布尼爾森和唐諾曼已經擴展了這些規則，并貢獻了他們自己的變化。 

您也可以使用這些作為靈感來創建自己的啟發式方法，或者結合現有的示例來解決您自己的設計問題。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

Shards 采用了 Bootstrap 4 前端框架制作的，外觀簡約而時尚，風格與現代流行的扁平化相當合襯！此外不僅僅擁有 HTML/CSS/SASS 格式模板，還有 Sketch 設計源文件，可見分享者的貼心。

目前從官方介紹來看，UI組件還相當齊全，可用它來快速搭建漂亮、時尚的網頁和UI設計作品，下面一起來看看介紹。

關于 Shards 這個主題雖然免費，但并不代表它只有「表面」，制作者還為性能性能考慮，壓縮版僅12KB大小，實在太好了，以這樣的大小，制作出來的網頁直接能秒開。

它并不是直接使用 Bootstrap 的設計樣式，所有的組件都是重新設計，以便得到統一的風格！

著陸頁演示

這是非常不錯的UI KIT素材 ，它還包含了10個額外的自定義組件，可以讓使用者快事制作著陸頁。

演示地址：https://designrevision.com/demo/shards/extra/app-promo.html

演示地址：https://designrevision.com/demo/shards/extra/agency-landing.html

UI 組件演示

Shards 含有豐富的 UI 組件，網頁端常用的元素幾乎包含了，大方便用戶自由定制。

顏色：

字體

圖標支持900+ Material icons 和 Font awesome 兩大圖標庫！

表單上的細節，也不容忽視：

還有日期組件的設計：

卡片

按鈕

導航菜單

我想這些漂亮的元素，已經足夠你設計一般的網頁，即使不夠，也完全可以自己利用 Sketch 源文件或 HTML 模板再創作。

下載地址

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

不要小看一個登錄界面，它內里包含很多細微的東西，除去外觀視覺，更多要注意的是交互的操作體驗，比如一些動畫、一些文案提示等細節都要注意，如果你是UI設計師，建議看看這次經驗文章，附上了大量案例，也許能助你未來更好的去設計一個用戶體驗友好的APP登錄界面。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

工欲善其事，必先利其器”；作為設計人員來說，設計方法和設計模型就是輔助我們更好做設計的工具。就像廚師做菜時候的菜譜一樣；面對新的菜種，能更快指引我們做出味道不錯的菜肴。

體系化的設計方法不僅能更好的指導設計師做設計；另一個方面，經過設計方法包裝后的設計，能讓設計師更坦然面對來自各方的質疑，更專業的講述自己的設計依據。在做不同菜肴的時候，我們需要不同的菜譜來指引；而在不同的設計階段，設計師也需要不同的設計模型/方法，讓我們更靈活的做設計分析與輸出。

下面從接到項目需求 > 體驗迭代優化階段，筆者將為大家詳細講解以下 5 種設計模型，并配出具體實踐的案例，希望對大家有所啟發。

模型一：SWOT 模型

1. 概念介紹

SWOT分析法（也稱 TOWS 分析法、道斯矩陣）即態勢分析法，20世紀80年代初由美國舊金山大學的管理學教授韋里克提出，經常被用于企業戰略制定、競爭對手分析等場合。

在現在的戰略規劃報告里，SWOT分析應該算是一個眾所周知的工具。來自于麥肯錫咨詢公司的SWOT分析，包括分析企業的優勢（Strengths）、劣勢（Weaknesses）、機會（Opportunities）和威脅（Threats）。

2. 使用場景

主要用在產品前期的戰略規劃中；用于項目成員知己知彼，同時也能知道在行業領域自己的產品所處的位置和核心競爭力是什么；對于產品方向的定位和全方位分析有復用價值。

3. 計價值

SWOT分析實際上是將對企業內外部條件各方面內容進行綜合和概括，進而分析組織的優劣勢、面臨的機會和威脅的一種方法。

優劣勢分析主要是著眼于企業自身的實力及其與競爭對手的比較，而機會和威脅分析將注意力放在外部環境的變化及對企業的可能影響上 。在分析時，應把所有的內部因素（即優劣勢）集中在一起，然后用外部的力量來對這些因素進行評估。

4. 具體實踐案例說明

下圖是筆者曾為的阿里內部某個數據服務平臺分析的案例；側重介紹了為什么要做這個數據平臺；以及做這個平臺我們項目組的優劣勢和機會點分別是什么。在給老板匯報產品來源&方向時是非常有效的。

最后，SWOT 分析模型其實還可以與商業畫布相結合，便于更全面對項目/業務進行快速分析和深入了解；深入懂業務的設計師才能真正在團隊中進行發聲，提出超越 UI 層的建設性意見。

模型二：Google Design Sprint

1. 概念介紹

Design Sprint, 設計沖刺，顧名思義就是要在短時間內做出好設計；是由 Google 提出的設計方法。

2. 使用場景

設計沖刺這個設計方法主要適用于短時間就需要產出設計方案；例如一些 Workshop 的共建, 產品迭代周期很快的新需求/任務，需要系統化分析與輸出設計方案。

3. 設計價值

可以在很短的時間內輸出一套系統化的設計策略及方案；

通過與不同背景的參與者進行溝通協作，能獲取更多看事物的角度和差異化知識；創造更多可能；

作為一種理想的設計教育工具，讓非科班的設計人員完整又快速了解產品&設計。

4.  具體實踐案例說明

設計沖刺的主要內容包括 6 個階段：

理解（Understand）：理解要為用戶解決的問題

定義（Define）：明確產品策略（數據分析，用戶調研，設計原則制定等）

發散（Diverge）：探索實現方案

決定（Decide）：確定設計方案

原型（Prototype）：構建產品原型

驗證（Validate）：驗證產品原型

模型三：GUCDR 模型

1.概念介紹

相比前一個設計沖刺模型，GUCDR 模型在設計過程中的實用性更強，能讓你快速用起來，幫你系統性梳理信息；在實際工作中，只要能夠回答畫布中的每個點，即可形成完整的設計推演過程，讓設計思路逐漸清晰起來。

G：Goal

U：User

C：Condition

D：Design

R：Realize

2. 使用場景

GUCDR 模型很適合用于前期需求調研和整理階段；特別是在自己不是很熟悉的領域中，把信息按照模型和畫布中的點進行歸類匯總；最大限度的讓自己的設計思維和信息邏輯得到詮釋。

3. 設計價值

3.1  對設計的需求來源及設計目標的聚焦定位，非常有價值，能快入深入了解業務背景；

3.2  對設計階段的目標拆解，從設計目標 > 設計策略 > 設計方案，層層遞進，設計方案輸出的邏輯性和針對性很強。

4.  具體實踐案例說明

GUCDR 模型在具體的使用過程中，可以和 GUCDR 畫布結合起來一起使用。信息下鉆的更深入具體，從項目目標到設計落地，每個階段都有具體的節點支撐，在使用過程中只需要把信息直接輸入到對應的位置即可。下圖為 GUCDR 畫布模板，可直接把業務相關信息輸入進來。

模型四：雙鉆模型

1. 概念介紹

雙鉆設計模型由英國設計協會提出，該設計模型的核心是：發現正確的問題、發現正確的解決方案。

雙鉆模型是一個結構化的設計方法，被很多設計師喜愛和使用。

探索/調研——透析問題（發散）

定義/合成——聚焦領域（集中）

發展/構思——潛在問題（發散）

傳達/實現——實施方案（集中）

2. 使用場景

一般應用在產品開發過程中的需求定義和交互設計階段；教我們如何對未知的可能的事物進行探索；一步步到達已知的理應的層面。

3. 操作使用說明

雙鉆模型的四個階段也許很精簡并且合并到兩個主要的階段。

第一階段——做對的事（菱形1——探索和定義）

第二階段——把事情做對（菱形2——開發和履行）

4.  具體實踐案例說明

下圖是對阿里內部一款移動運維產品的分析，分析其從 0-1 的方向探索和從 1-1.5 的發展歷程：

下圖是曾經在一個設計講座中，滴滴 CDX 一位設計師的分享，她把雙鉆模型利用到設計的研究和輸出階段，個人感覺此模型此刻的使用場景也很貼切；不僅僅是在完整的一個項目中，在單一的某個階段雙鉆模型也是理念很好的承載容器。

模型五：卡諾模型

1.概念介紹

kano模型是狩野紀昭教授發明的一種工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。

在卡諾模型中，將產品和服務的質量特性分為五種類型：

1> 魅力屬性：用戶意想不到的，如果不提供此需求，用戶滿意度不會降低，但當提供此需求，用戶滿意度會有很大提升；

2> 期望屬性：當提供此需求，用戶滿意度會提升，當不提供此需求，用戶滿意度會降低；

3> 必備屬性：當優化此需求，用戶滿意度不會提升，當不提供此需求，用戶滿意度會大幅降低；

4> 無差異因素：無論提供或不提供此需求，用戶滿意度都不會有改變，用戶根本不在意；

5> 反向屬性：用戶根本都沒有此需求，提供后用戶滿意度反而會下降。

2. 使用場景

卡諾模型的主要使用場景是對用戶需求分類；

另一種是對多個功能點進行優先級排序。

3. 具體使用操作

步驟一：設計問卷調查表，實施有效的問卷調查

KANO 模型的問卷問法，是對每個質量特性都由正向和負向兩個問題構成，分別測量用戶在面對存在或不存在某項質量特性時的反應。問卷中的問題答案采用五級選項分別是：

我很喜歡：讓你感到滿意、開心、驚喜。

理應如此：你覺得是應該且必備的功能。

無所謂：你不會特別在意，但還可以接受。

勉強接受：你不喜歡，但可以接受。

我很不喜歡：讓你感到不滿意。

步驟二：問卷結果整理，進行數據分析

根據問卷結果進行 KANO 模型二維屬性歸屬分析，可得出魅力屬性、期望屬性、必備屬性、無差異屬性、反向屬性與可疑結果的功能屬性歸類百分比。除了對屬性的歸屬探討外，并通過百分比計算出 Better-Worse 系數，表示某功能可以增加滿意或者消除很不喜歡的影響程度。

增加后的滿意系數 Better/SI=(A+O)/(A+O+M+I)

消除后的不滿意系數 Worse/DSI=-1*(O+M)/(A+O+M+I)

根據 better-worse 系數值，將散點圖劃分為四個象限。

第一象限/期望屬性：better 與 worse系數成正比；表示產品提供此功能，用戶滿意度會提升，不提供此功能，用戶滿意度會降低，這是質量的競爭性屬性，應盡力去滿足用戶的期望型需求。

第二象限/魅力屬性：better系數值高，worse 系數絕對值低的情況。表示不提供此功能，用戶滿意度不會降低，提供此功能，用戶滿意度和忠誠度會有很大提升；

第三象限/無差異屬性：better系數值低，worse系數絕對值也低的情況。即無論提供或不提供這些功能，用戶滿意度都不會有改變，這些功能點是用戶并不在意的功能。

第四象限/必備屬性：better系數值低，worse系數絕對值高的情況。當產品提供此功能，用戶滿意度不會提升，當不提供此功能，用戶滿意度會大幅降低；此象限的功能是最基本的功能，這些需求是用戶認為產品有義務做到的事情。

步驟三：數據解讀，將結果落地實施

KANO 模型是對功能需求的優先級進行探索，具體情況還需要和業務方進行討論，結合實際情況后制定可行的產品功能開發優先級順序，以將調研結果落地實施。

4. 具體案例實踐說明

題目：根據報警內容，“掌上運維”提供運維操作建議（如磁盤滿了智能推薦執行日志清理等）

步驟一：設計問卷問題，發放問卷

步驟二：問卷統計，進行 KANO 模型二維屬性歸屬分析

步驟三：根據問卷統計的用戶數據；計算出每個區域的百分比；

具體計算方式是全部區域的人數相加作為分母；每個格子中的數字作為分子，即可得出每個格子的百分比出來。

具體百分比得出后，將下表中標 A、O、M、I、R、Q 的格子中百分比相加，即可得到五種屬性對應的百分比。本調查結果可以得到A魅力屬性占比為42.1%，O期望屬性占比9%，M必備屬性占比1.2%，I無差異屬性占比38.9%，R反向屬性占比1.8%，Q可疑結果占比7%。

步驟四：根據 Better-Worse 計算公式，得出 Better-Worse 系數，明確功能落點象限。

步驟五：多個功能需求結果對比進行優先級排序。

模型六：METUX 幸福模型

1. 概念介紹

為了幫助大家更好地進行“幸福設計”，卡里羅教授分享了他的一個模型——Motivation, Engagement and Thriving in theUser Experience (METUX)。

2. 使用場景

產品成熟穩定期，需對產品&用戶體驗進行提升時；或需綜合對產品體驗進行評估分析時；提升用戶幸福感，希望產品能對用戶行為方式及生活質量有所影響時。

3. 主要使用操作

在考慮用戶體驗時，從4個層次進行考慮：

??  第一層是“界面”體驗：用戶與產品交互時的體驗如何。

??  第二層是“任務”體驗：界面之上是用戶完成的任務。如利用智能手環計步，用戶在完成任務時體驗如何。

??  第三層是“行為”體驗：任務之上是用戶的行為。如用戶購買智能手環的目的是運動，此時行為可能是跑步、騎自行車。因此產品在任務之上應該深入關注用戶行為上的體驗。

??  第四層是“生活”體驗：行為會對生活產生影響。如運動過量可能導致身體受損。

在設計過程中，應該關注“勝任力”、“自主性”和“關系”三個關鍵因素，這些基本心理訴求是動機、投入感和幸福感的根本。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計