前兩天事情較多,沒來得及將前兩天的讀書筆記補上。接著上次的記錄。
25.從需求到界面:
26.信息歸類:
1).邏輯歸類:eg:男裝>上裝>T恤,如果改成?上裝>男裝>T恤?會讓人覺得奇怪
2).卡片分類:邀請用戶將類似的東西放在一起,能夠探測出用戶的心智模型。在產品設計的初級階段,能夠利用胡勇的分類方式知道用戶對網站內容的期望,為信息的架構建設提供依據;對現有產品改版時,能夠檢驗現有的信息結構是否合理。卡片分類主要分為兩種,開放式分類或者封閉式分類,開放式分類是任由用戶將卡片分為幾類,封閉式是設計師事先將導航結構設計好,確定出導航的個數和名稱,讓用戶根據自己的期望將這些信息歸類。
27.關于界面導航設計的要求:
1).導航的自我解釋,既要用戶明白自己現在身處的位置,“我從哪里來?我現在在哪?我能去哪里?”
2)深廣度平衡的問題:即使縱向的級數和橫向的選項數平衡的問題;
3)用戶所需信息與商業推廣信息平衡的問題,用戶信息和商業需求之間必然存在著一定的矛盾,如果能夠采取一種悄無聲息的方式呈現我們的商業信息,讓用戶以一種不排斥的態度去瀏覽我們的產品會更好。
4)為重要的功能設置快捷入口,如對于一些購物類的應用或者網站,購物車是一個重要的功能,因此這樣的快捷入口能夠提高使用的而效率,設置快捷入口的同時需要權衡,過多快捷入口會使用戶感到迷茫。
28.主要任務和次要任務的問題
通過設置用戶任務,確定主要任務和次要任務,可以幫助我們快速判斷界面上內容的主次關系。對于購物網站來說,設法讓用戶購買商品,對于網站來說是最重要的任務,但要完成這個主要的任務過程中,還要完成許多子任務(瀏覽、選擇、對比、收藏、加入購物車、充值等),這些是次級任務,是為了幫助用戶完成最重要的任務而存在的。
29.任務設計流程:
如果說產品定位或設計目標相當于指南針,需求的功能點就是一個一個零散的地理坐標,任務流程就是途徑這些地理坐標的路線圖。
首先,設置主行為線,就是把雜亂無章的功能點根據用戶的期望及目標以正確的次序組織起來,告訴用戶先做什么,再做什么;關于是否要設置支線(次要行為流),要看次要行為里對完成主要行為流產生必要的幫助,迷宮的支線越少,整體的復雜度月底,越有利于用戶迅速完成任務。
首先設計好任務流程,再到頁面流程圖,在根據頁面流程圖畫出頁面的交互。
30.如何突出主要任務:通過分解用戶任務,排列任務優先級,組織合并相關任務等方式,使用戶可以專注于主要任務。
分解用戶任務:首先明確用戶的任務有哪些,然后從用戶的行為處罰,詳細描述用戶的使用過程,將用戶任務分解問具體的行為操作。以在線購買電影票為例,其行為主流可以是:選擇電影票→選擇電影院→選擇觀影時間→選擇座位→輸入接收電子票手機號→確認訂單。
排列任務的優先級:要突出用戶的主要任務,就要對這些自惹怒所對應功能的優先級進行排列,用量化的方法衡量哪些功能的優先級高,哪些任務的優先級低,衡量的三個維度是使用的人數、使用的頻率和重要程度(用戶目標和商業目標的影響大小)。
組織并和并相關任務:可以將次序相同、操作類似、界面類似的任務組合起來,合并為同一組模塊展現在用戶面前。
31.引導用戶完成任務:
相似性引導,格式塔心理學,通過大小、形態、顏色、圖案的相似性來引導用戶的操作;方向性引導,具有指向性的箭頭,清晰的視覺縱向;運動元素引導,選中某些圖標后界面上的圖表會飛到下一個需要用戶進行操作的地方;想到控件引導,適用于一個界面完成不了用戶的這個任務操作的時候,如淘寶在下了訂單后付款界面上方的引導控件,告訴你你現在在這個任務的過程中進行到哪個地步了。
32.簡化復雜操作:通過減少干擾項,轉移復雜操作、簡化操作、優化操作過程的方法簡化復雜操作。另外,減少冗余步驟和干擾項。不必要的操作需要除去,選項的設置應該合理,過少沒有足夠的選擇空間,過多會增加用戶思考的時間。還要注意優化操作的過程,如注冊賬戶時,不小心填寫錯誤了驗證碼重新填的時候就將用戶的信息全部清空的錯誤不要犯。
33.當頁面需要擺下的信息量過大的時候怎么辦:
首先,讓頁面的層次不言而喻,根據“用戶想要看到什么”和“我們想讓用戶看到什么”為內容模塊排列優先級,在根據用戶的額瀏覽習慣,講不通優先級的信息反之到相應的頁面位置,遵循“分解--排列--組織”的原則。
然后,讓重點信息“跳出來”,通過視覺設計的方法,如字體加大加粗,色彩對比、添加背景色、流白等,強調界面的重點元素,而其他元素應該盡量藏起來,或是顯得暗淡些。
34.以人為本的界面設計:我們要了解用戶,知道用戶用什么樣的需求,他想要的是什么,其次,我們要保證的是我們假面的邏輯不是錯誤的,可以讓用戶順利完成任務,最后,力求設計形式符合用戶的心理模型,讓用戶感受到“人性化”的設計。
35.來自真實世界的靈感,如果假面元素可以與現實生活中的潛意識因子相呼應,勾起用戶的回憶,引起用戶的共鳴,那么當用戶看到界面時,既能夠令其產生認同感和情緒體驗,與屆面產生情感互動,從而引導用戶操作。方法有:
1).擬物化的視覺,通過模擬現實生活中的物體,是用戶產生熟悉感,讓信息與功能更加易于識別和理解。可以從形態色彩、肌理材質、環境光照等方面直接擬物。
2)隱喻化的操作,視覺表現難以擬物是,也可以通過模擬現實中的操作,使用隱喻的方式讓用戶操作感到熟悉。
36.貼心的設計:電梯里面的寵物狗按鍵,有倒計時的紅綠燈,有反饋的頁面跳轉,貼心的提醒(除了運用吻戲提醒用戶之外,還可以通過界面元素狀態的改變給予用戶提醒),與用戶互動,產生驚喜(如微信中文字涉及到某些詞語時會落下表情雨),還應該注意情境的烘托,如某些重要節日時,界面的顏色可以做到呼應。
37.原型:
紙面原型的目的不是為了交付,而是為了溝通、測試,盡快解決那些不確定的為題。紙面原型更具有可塑性,可以快速修改和重建。使用紙面原型確定了大致的方案時,也就同時確定了產品的框架名主要流程、基本信息和功能等。
如果界面上會出現很多可以服用的標準交互組件,而你又不想一次一次地重復繪制,可以到網上找到標準交互原型組件,然后打印出來,剪裁成模塊鐵道頁面框架中,與手繪草圖配合使用。現在可以買到成套出售的紙面原型工具,包括繪圖模板、設計繪畫本、圖標模具、標準交互組件等。有兩個應用(“POP-Prototyping?on?paper”和?“快現”)能將紙面原型拍下來,放到這兩款應用中,選取特定的區域添加手勢操作和鏈接,就可以實現點擊界面后的跳轉、切換等效果。
原型需要表達什么:紙面原型可以看做最終設計方案的雛形,其中,最需要關注的是框架、流程、基本功能和內容。
38.標準的原型應該包含的內容:
簡要說明與信息結構:
1)變更日志:填寫日志方便項目成員看到每次更改的內容,然后重點關注這部分內容就行了,從而大大提升了工作效率。變更日志一般包含日期、變更內容、變更原因、備注等內容,如下所示:
2)版本說明:以版本號為單位,和更新日志類似。需包含版本號、日期、更改內容等。如下所示:
3)信息結構:產品的額內容有什么,他們是如何組織起來的,頁面層級又是如何分布的。信息結構可以讓項目成員快速瀏覽到產品的內容、功能和結構等重要信息,做到一覽全貌。標準原型中的信息結構不同于需求文檔中的信息結構,在需求文檔階段,信息結構更多體現了產品的邏輯結構,而原型稿中的信息結構,是被設計加工過的產物,它是綜合考慮產品邏輯結構和用戶習慣而得到的結果。如下所示:
4)任務流程和頁面流程:任務流程指用戶使用產品時,它的每一步操作會遇到什么結果、系統會如何反饋等;頁面流程:比任務流程更清晰、具體。通過頁面流程圖,不僅可以看到具體的頁面,還可以看到用戶如何通過操作,從一個頁面跳到另一個頁面的完整過程。
5)線框圖和交互說明:既包含今天的頁面樣式,也包含動態的操作效果。線框圖代表靜態的部分,而交互說明則代表動態的部分。關于動態效果部分,設計師用動態效果來代替交互說明,這種方式不太可取,因為看動態比較費時間,瀏覽原型的人需要逐一操作才能看到效果,一旦某個地方沒有操作到,就有可能會遺漏,文字說明可以讓團隊成員清晰、快速地看到全部動態說明,更一目了然。但有些動態用位子或靜態圖片描述不直觀,因此建議采用交互說明與動態效果相配合的方式。
交互說明主要有以下幾種類型:限制(包含范圍值(取值范圍)、極限值(顯示限制)等);狀態(包含默認狀態(文字、數據、選項)、常見狀態、特殊狀態等);操作(包含常見操作(正常操作時得到的反饋的狀態)、特殊操作(極端操作下的應對措施)、誤操作(設計時避免用戶犯錯誤的機會)、手勢操作等);如果是做手機應用的話,需要注明的是跳轉時的方式。
總而言之,寫交互說明時主要應記住兩條內容:除了靜態頁面外,還需要考慮各種動態情況;除正常情況外,還需要考慮特殊和錯誤的情況。
39.畫線框圖的時候需要注意的事情:通過明暗對比,使得界面元素的優先級關系更直觀;不使用截圖和顏色:會對視覺設計師造成干擾;合理地布局,不要出現兩列和三列混排食物設計;遵守柵格規范,保證界面的風格工整簡潔;標記第一屏的高度,最重要的內容,尤其是重要的操作按鈕一定要在第一屏完全顯示,否則用戶第一眼看不到,那么就有可能放棄這個頁面,從而嚴重影響轉化率;表達清楚UI邏輯,將所有可能遇到的情況整理出來,并劃分類別,標注相互優先級。操作的優先級大于鏈接,鏈接的優先級大于文本,最重要的操作一般是用按鈕來表現的考慮視覺呈現后的結果;了解視覺趨勢。