<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          情境分析法(SCQA)讓你用問卷發現更本質的商業問題

          ui設計分享達人

          前言

           

          在企業工作中,每一個問卷調研都始于一個商業問題,問卷的質量也決定了最終結果是否能對業務起到幫助。本文將從定義問題-問卷設計-數據清洗與分析-報告撰寫這四個基本步驟相對完整地闡述企業問卷調研,希望可以給大家提供一些研究方法上的思路。



          定義問題:情境分析法(SCQA)


          在商業問題解決的過程中,既有公司內部的因素,也有外部行業的因素,影響因素錯綜復雜;周圍的環境也比較容易發生變化,具有很大的不確定性;同時又要保證解決方法的可落地性,產生實際的價值。相對來說,會比較復雜。在進行問卷設計之前,更有必要的是將問題梳理清楚,再決定是否采用問卷這種方式。

           

          1.1 結構化思考:使用SCQA描述項目


          SCQA是將不確定性考慮在內,一種結構化的問題分析方法,可以比較好地系統思考、查漏補缺。它包含四個環節:

          • 情境(Situation):由大家都熟悉的現狀或事實作為起點,包含對象、所處階段等

          • 沖突(Complication):實際情況往往和我們的目標有沖突,顛覆了穩定的狀態。說出行動的原因,包含威脅、機會和等著我們去克服的困難點

          • 問題(Question):基于沖突提出問題,要怎么解決這個困難點

          • 回答(Answer):我們的解決方案是什么,定位出需求點

           

          undefined

           

          1.2 如何洞悉情境和沖突:搞清楚為什么做調研


          假設我們拿到上述案例作為調研項目,可以有兩種方式去進行洞悉情境和沖突

          一是思考為什么要做這個研究;二是跟相關利益者訪談盡可能多地獲取信息。


          1)思考為什么要做這個研究:

          - 需要回答什么問題?

          - 為什么回答這些問題很重要?

          - 打算如何使用最終的調研結果?


          2)跟相關利益者訪談:

          - 核心業務方是誰?其他業務方是?

          - 每個業務方的關注點是什么?難點是什么?

          - 各個相關方的目標之間是否沖突,是什么沖突?

          undefined

          根據上述方法,可以得到對應的情境和沖突:


          情境:目前有三種產品方案A/B/C,分別對應的價格為100元/1000元/10000元。通過上述思考和信息了解,會知道這個事情和誰有關,在這個事件中承擔什么角色。


          沖突:B的銷量不佳,跟其他方案差異不明顯,瞄準客群很有可能有重疊,未成交客戶難轉化,希望可以方案B進行調整。在用戶層,可能其他方案中的功能能滿足需求,不需要購買方案B;在公司層,整體收入結構可以更優化、健康;在業務層,系統和流程可能不太合理,有些可能需要重構。


           

          1.3 問題拆解其實是建立一個假說/邏輯樹的過程


          我們可以將問題進行拆解,拆解應遵循MECE原則(相互獨立且完全窮盡),這么做的好處是可以把問題進行逐層分解,逐級分析,最大可能保證需要考慮的因素全面不遺漏。

           

          undefined

           

          案例中的問題,可以從用戶方面、競品方面、成本/利潤方面進行拆解,針對每一個層面的問題又可以進行拆分。 

          undefined

          對問題進行細致拆分之后,針對每個問題有不同的解決方案,有一些問題可以用問卷來解決,有一些問題需要使用其他方式進行解答。

          問卷并不能解答所有問題~~

           

          undefined



          問卷設計


          2.1 問卷的用途:定量為主


          一般通過問卷來進行大樣本的數據收集,主要以用戶的基礎數據、行為數據和態度數據為主,既可以作為獨立的調研項目,可以跟其他方式進行結合,比如說結合訪談、結合企業內部的數據,本文比較推薦的方式是多種方式結合進行交叉驗證,提升調研結果的可靠性。


          undefined

           

           

          2.2 問卷設計的原則

          undefined

          基于第一部分的定義問題階段,已經對問題進行了分析,在此基礎之上,我們需要確定哪些問題可以由問卷進行解答,并明確問卷的研究目標與參與對象。特別地:利益相關方(項目組成員間)在項目前期應該達成統一,避免后續產生分歧,付出額外的溝通成本不說,還有可能相互甩鍋。


          undefined


          2.3 問卷的基本結構


          一份問卷的基本結構包含標題、招募語、甄別題、主問卷、用戶基本特征、結束語。


          undefined


           

           

          2.4有邏輯的設計問題


          一份有效的問卷需要從如何提問、如何措辭、如何設置答題邏輯、如何設置題目選項這些方面去考慮,設置有效的問題。以下是問卷設計中的一些基本原則:

          undefined

           

          2.5 提升回復率的tips


          undefined

           

          • 個性化:在說明信件/郵件或郵件開頭注明回復者的名字、研究活動的目的、所需時間。向回復者強調他們反饋信息的重要性。需要注意的是,這里出現信息錯誤,會降低回復率。

          • 控制篇幅:問卷完成時間不要超過10分鐘,注意控制問題數量,避免出現需要大量思考、較難回復的題型。

          • 用戶激勵:獎勵參與者油卡/現金紅包/優惠券等,昂貴的激勵物沒有特別顯著提高回復率,所以小的激勵就可以。


           

          數據清洗與分析


          3.1 數據清洗原則

          undefined


          • 剔除有效范圍外的數據:排除異常作答時間值(比如作答時間為10秒),判斷為作答不認真。可以根據題項來確定,一般10道題設置篩選出60秒之內的問卷。

          • 剔除連續重復值:在時間范圍內,再核查問卷是否出現連續重復值,出現的問卷予以刪除。如果問卷數量較大,可以使用STATA軟件編碼或Excel條件函數判斷進行處理。

          • 剔除違背邏輯一致性的數據:在時間范圍內,核查問卷是否存在前后邏輯不一致的題,比如總體滿意度打分為非常滿意,但后續題目都選擇了非常不滿意。

          • 剔除有缺失值的數據:嚴格來說應該將有缺失值的用戶予以刪除,但有時候回收樣本量沒有那么大,則可保留。


           

          3.2 數據分析方法


          數據分析方法有非常多,要在眾多的分析方法中選擇一種也是比較難的事,無論選擇什么樣高大上的方法都是其次,最重要的是選擇的分析方法能說明問題,能體現數據的價值。

          比較分析是一個簡單的、比較通用的、易于理解的數據分析方法,可以分成趨勢分析、特征重要性、分組分析三種。

           

          undefined


          報告撰寫


          最后,條理清晰地展現數據信息,表達你的觀點。報告寫作的過程是一個相對費勁的過程,特別是數據量多的情況下,總是覺得還有一些數據價值沒有被挖掘出來,但此時不要拘泥細節,細節可以回頭再補,會大大提升效率。


          4.1 問卷的報告框架


          • 報告主要發現:將總結放在最前面,閱讀者可以通過簡短的總結大致了解報告觀點,方便他們決定是否需要繼續了解詳細內容

          • 目錄和分目錄:報告包含的內容組成部分,讓閱讀者對報告內容有初步概覽

          • 調研背景和目的:陳述整個報告的背景和目的,對調研的范圍進行必要說明

          • 單頁-詳細內容描述:有邏輯的描述項目的發現,總結數據表現,挖掘價值

           

          單頁-詳細內容描述示例:

          undefined


          問卷調研不止是問卷本身,還包括前期項目組溝通、項目成員分工與配合、后續結果推廣、結果推動落地等,前期做好項目組溝通、明確項目分工,建立一個清晰的運行機制,有利于項目組成員對結果的認同,后續也有清晰的路徑去分工解決問題。所以,每一個環節都體現工作的價值,都同樣重要。希望大家在關注研究方法提升的同時,也可以更多關注更多工作方法提升。

          文章來源:站酷  作者:酷家樂UED

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          如何系統化的進行設計改版?

          ui設計分享達人

          項目背景


          當公司的發展規模到一定程度時,考慮到信息安全、持續采購成本與相關風險,企業會采取自研的方式來實現部分協同工作軟件的自產與自用,本文將以內部目標管理系統為例,闡述我們是如何系統化的做企業系統設計改版?


          什么是OKR?


          OKR,是Objectives 和Key Results 的縮寫,即目標關鍵結果,它是企業進行目標制定和過程管理的重要手段。酷家樂同樣采取OKR的管理方法,將公司目標層層分解到團隊,部門再到個人,在各個層面貫穿和統一起來,以幫助實現目標達成。



          改版的契機是什么?

          改版不是設計說想改就能改,在做新的OKR系統之前,之前是通過「績效系統」來進行目標管理和績效評估,支持簡單的制定和結果的評估的使用,因系統操作流程、界面體驗、業務場景已經嚴重的影響到目標管理的效率和效果,具體體現在幾個方面: 


          • 系統看不懂,新人的宣導成本高
          • 操作不流暢,從制定、提交、審核、修改到進度同步,員工使用起來不流暢
          • 誤操作成本高,不小心點錯導致信息的再次獲取和編輯成本高

          總之,工具的體驗已經是嚴重影響公司員工目標管理的一道障礙,所以如何將整體的系統操作體驗提升起來是設計急需去解決的問題。 

          那么,確定有問題需要改,作為設計師,我們是如何去系統性的去為業務帶來更多的體系化的價值?
          • 理清業務,制定策略
          • 理解用戶,溯源問題
          • 串聯場景,各個擊破
          • 方案設計,中途驗證
          • 落地追蹤,拿到結果

          一、理清業務,制定策略


          理清業務目標,制定設計策略,是系統性改版產品的前提,在實際工作中設計師很容易被產品的原型、對產品的描述蒙蔽,只有非常清楚的理清業務的目標,才能制定系統性、合理的設計策略來支撐業務,通過專業的設計方法來助力業務結果的達成,在這個項目中我們是如何做的呢?


          對焦業務目標

          OKR系統的改版項目最開始是高層的訴求,提的業務要求很簡單“ 讓大家用起來,目標管理起來”,那么如何讓大家用起來、利用系統將目標管理起來是當前需要解決的的問題。


          “ 讓大家用起來,目標管理起來”需要去解析的是,為什么舊的系統大家用不起來?為什么目標管理有這個管理機制,但是沒有依賴于系統管理起來? 

          制定系統的設計支持策略

          設計師同行可能會問: 不都是做需求嗎,有啥做啥,有啥策略可言?如果是以這樣的方式來做設計改版,很有可能會被業務方牽著跑,即便是知道對方堅持的不是很合理,但也沒有辦法來推動這件事往更好的方向發展。 


          二、理解用戶,溯源問題


          理解用戶,溯源本質問題,是最設計環節必不可少的環節,通過對用戶的深入研究,挖掘本質的共性的問題。在這個項目中,我們通過定量+定性的手段獲取用戶的心聲: 

          定量問卷——獲取用戶的基礎的問題

          前期在公司內部針對普通員工、MGR、HRBP、高層4種角色,調研了100多位內部用戶的心聲,將不同崗位和職級對于績效系統的問題真實反饋收集匯總。 

          undefined


          定性訪談——深入獲取用戶的訴求

          因為系統面向對象是企業內部員工,所以針對每個角色都做了訪談調研,深入的挖掘他們對當前的產品使用問題,并將問題按照核心流程中所涉及的角色在不同階段所需的操作和流程進行了梳理,整個階段拆解為:制定階段、執行階段、結束回顧三個主要階段,拆解每個角色在這些階段中的觸點和機會點。 



          結合問卷、專訪談的分析和梳理,篩選出目前系統的核心問題: 制定流程、對齊關系、過程跟蹤、信息觸達


          三、串聯場景,各個擊破


          在前面已經初步發現和定義了問題,這么多分散的問題如果平鋪出來可能會嚇到產品和研發,所以接下來需要將其系統化的變為整體的設計方案,我們需要將其串聯成完整的場景,然后逐步擊破,我們是如何做的呢? 


          重點模塊及爭議點的討論

          在場景分析前期,我們設計內部針對“核心階段”、”對齊關系“、”權限管理“、”全員OKR“進行了討論和范疇的界定,對以下問題進行了討論: 


          1. 大的階段:一共有幾個階段,在每個階段各個角色的需要做什么? 
          2. 關于對齊:對齊關系是怎樣的,如何處理對齊與被對齊,雙方都發起了對齊,怎么對齊到具體哪一條? 
          3. 關于權限:普通員工的權限定義;mgr的組員關系;如何確定查看的權限? 



          梳理清楚角色關系圖,有助于多方去理解各個維度的關系

          以一個普通員工【小何】為例,在OKR系統中進行OKR制定時,通常需要與多個角色產生關聯:


          1. CEO/BO:通過查看高層的目標來看到公司的發力方向; 
          2. MGR:明確部門目標,制定個人的;OKR的審核與發布;進展的跟進; 
          3. 同組/協同部門:與協同部門綁定關聯關系,同步實時進展;查看同組員工的進展,橫向對比個人進度。 




          結合業務需求,賦予體驗價值

          OKR系統雖然最為一個內部管理系統,我們也逐步在設計側去從“具有功能價值”往”“賦予體驗價值”去發力,將更多的“能”和“可以”轉變為“方便”、“簡單”和“輕量化”等,來提升各個流程階段中的體驗,比如: 
          從“可以查看”到“方便的查看”
          從“能更新” 到“  簡單更新”

          具體到串聯場景怎么去理解?

          一個新的OKR周期會經歷三個主要階段,每個階段會涉及到多個節點,在每個一個節點上去思考發力方向: 


          為了便于理解,將關鍵的場景提供了比較簡短的描述,這個描述就是從舊到新的過程,后面的設計展示也是圍繞著這些內容進行展開,具體如下: 

          ①制定階段,包含寫、看、評、管
          • 寫:輕松撰寫,高效共創 
          • 看:簡單查看,便于跟進 
          • 評:輕量互動,便于記錄 
          • 管:高效審核,隨時跟進;條條對齊,事事關聯; 

          ②執行階段,包含更、改、推
          • 更:隨時更新,條條追溯 
          • 改:慎重修改,條條有據 
          • 推:合理推送,終端打通 

          ③結束回顧,包含查看、追溯、復盤

          • 查看:快捷查看歷史周期 
          • 追溯:記錄明顯標記,事事追蹤溯源 
          • 復盤:復盤總結,目標達成 



          四、方案設計,中途驗證


          經過前面一系列的調研、分析總結,設計圍繞著3個階段的關鍵結論進行展開,即OKR制定、執行、結束三個階段 
          (因每個階段篇幅較長,方案設計部分僅展示部分頁面的思考過程和頁面展示)

          輕松撰寫,高效共創

          在寫OKR時,設計讓撰寫輕松、可以高效的共創,主要通過以下3點: 

          (1) 清晰的頁面結構:


          讓用戶能明確的感知到系統的整體結構是有規律的,可以簡單被理解的,即左邊全局控制,右邊內容展示

          • 左邊導航全局控制著寫、審、查、通4個功能 
          • 右邊內容展示跟隨著導航內容變化 



          (2) O與KR的錄入快速切換: 

          為了讓用戶可以沉浸在一個頁面寫內容同時,還能縱覽全局結構,在寫OKR的頁面增加了OKR大綱的錨點切換功能,便于多個KR之間的切換,避免因頁面過長帶來的翻閱困難的問題。 


          (3) 減少步驟,減少跳轉: 

          減少步驟,減少跳轉有很多場景都有涉及到,比如: 
          • 以以新增一個O和新增一個KR為例,步驟從原來10步減少到4步,頁面調整從多步驟彈窗到在1一個頁面即可完成內容的撰寫; 
          • 在與別人關聯時,在撰寫頁面會收攏所有邀請方的信息; 
          • 在查看對方進度,原來需逐個點擊進去了解,到現在幾乎可以全局視角來管理進度。 



          簡單查看、便于跟進


          查看和跟進屬于第三方的協同伙伴,為了讓伙伴更輕松的跟進,做了2個設計處理: 
          • 在人員展示邏輯上,在OKR展示時,將關聯人、同組人直接展示出來,減輕用戶的查詢成本; 
          • 在展示內容上,將O全部展示,進度以及更新時間全部直接展示出來,便于關聯方快速便捷的知會。 



          簡單審核、隨時跟進


          在管理者審核下屬員工時,簡化了大量信息,前置待處理信息以及待處理的關鍵信息,讓管理者比較直觀的知道有哪些人提交了,哪些人修改了,哪些人需要重寫等等。 



          隨時更新、條條溯源


          為了讓員工便捷的進度管理,在OKR管理頁面以輕量的臨時彈窗,來方便用戶快速發起和輸入內容,每條更新記錄同時也能同步給關聯方。 



          慎重修改、條條有據


          慎重修改、條條有據主要是滿足管理者和關聯管理訴求,OKR可以在中途被修改,但是修改的結果是需要明確告知相關人,在增加、刪除、減少的內容上,以特殊的示意對比來記錄依據,同時也督促發起方能審慎修改。 


          合理推送


          OKR的消息推送在整個階段中占據了非常重要的信息觸達的作用,在整個OKR的制定階段和執行階段不可或缺的部分,而消息推送過多將會導致信息冗余,那么如何合理進行推送消息也是重要一環。 

          我們把消息類型通過兩個維度定義消息的優先級:“重要性”和“緊急度”,通過四象限法則,我們拆出來了:


          1. 重要且緊急的消息
          2. 重要不緊急
          3. 不重要但緊急
          4. 不重要不緊急

          通過此模型和產品確定了每一個消息類型的所在位置,且清晰表達的了每個消息應當的位置




          在酷家樂有非常多的信息接收渠道,每個渠道都有相應的特點,我們結合渠道的特點去確定不同優先級的消息應當推送的渠道。 


          最終在實現方案上,實現了有層次、分場景的消息推送方案,盡量做到少打擾用戶同時,可以及時了解重要信息。 

          終端差異


          桌面端是主力生產平臺,通常是多窗口多任務,鍵鼠操作精確高效。在專注姿態下,我們可以盡量安靜地展示更多常用功能,讓用戶在一個視圖中即可完成相對復雜的任務。同時在列表頁中,更大的空間讓我們可以把目錄樹展開,減少導航跳轉。 

          手機端的特點是專注當前任務。可以通過信息降噪,加強對比來讓信息傳達能明確,幫助用戶完成單個任務;而清晰的導航可以避免小屏幕上頁面頻繁切換所帶來的導航負擔。 

          最終實現方案

          結合終端的差異,把移動端定位為:側重便捷快速的查看和溝通,同時將重編輯的場景在移動端去除了,更加側重于查看、互動和進展更新的低成本操作的場景。 


          中途驗證效果,確保上線的效果

          在設計的過程中,為了進一步的驗證設計合理性和易用性,針對角色代表進行了8組可用性測試,最終普遍反饋新版的操作體驗更好。




          五、落地追蹤,拿到結果


          針對了項目的設計效果落地,設計除了在過程中不斷的跟進產品和研發提出的問題,在測試階段提出效果走查文檔,不斷的打磨細節,才能保證最終的設計效果,當然付出總會有回報,新版的系統上線除了制定、管理、查看關鍵模塊的UV和PV的業務數據達到了比較好的效果外,在新老版本的滿意度和流程操作犯錯率上也得到了一個比較好的驗證。 


          寫在最后


          在OKR系統項目的整體流程中,針對產品大改版的時候,我們設計需要前置思考業務,全局看待產品,系統性的去思考和設計,助力業務結果達成的同時讓設計價值更好的體現出來,最后再回顧下整體流程: 

          15個著名的設計心理學原理以及在設計中的應用

          ui設計分享達人

          你是否有在聽別人說某某原理法則時一臉懵B的時候?明明知道這個原理卻說不出它的名字?不要緊,本文就來介紹與人機交互設計相關的15個常見的設計心理學原理,約13000字,幫助你了解產品的定位,需求目的和交互邏輯,洞悉用戶的各種行為,也為自己的設計予以理論支撐。


          1956年美國科學家米勒對人類短時間記憶能力進行了研究,他注意到年輕人的記憶廣度為5-9個單位,就是7±2法則。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上。


          因為人腦處理信息的能力有限,所以它通過把信息分成塊和單元來處理復雜問題。7±2法則應用很廣泛,例如iPhone通訊錄中的手機號碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號、身份證號,我們總是喜歡把一長串數字拆分開來讀寫,目的就是降低記憶成本,提高信息的易讀性,從而達到視覺防錯的作用。


          Web導航欄選項卡數量不超過9個

          在設計網頁導航時,如果希望用戶記住導航區域的內容或者一個路徑的順序,那么數量應該控制在7個左右(不超過9個),如蘋果、Dribbble、behance等網站的導航分類。


          Web導航欄選項卡數量過多時

          如果導航或選項卡內容很多,可以用一個樹狀層級結構來展示各級別關系,但要注意其廣度和深度的平衡。例如人人都是產品經理和Dribbble,把更多子類別收在二級目錄里。



          移動端選項卡導航

          在移動端應用設計中,常見的電商app例如奈雪和樂凱撒分類模塊,兩個產品的商品分類布局形式很相似,都是用了選項卡的方式來分類商品,層級明確,相應的提升了用戶找尋單品的效率。


          Tabbar區標簽最多不超過5個

          在移動應用設計中,底部Tabbar最少3個,最多為5個(幾乎沒幾個超過5個),這樣做除了減輕用戶記憶負擔,超過5個會降低視覺和操作上的體驗。事實上就算只有4個,我們也經常想不起微信底部的4個Tab分別是啥。



          頂部導航欄頁簽

          我們看到的大部分app頂部導航欄的頁簽數量都嚴格遵循了7±2法則,雖然在橫軸可無限滑動,

          但在顯示區域只保持7±2法則的顯示數量,例如馬蜂窩、飛豬旅行等。


          金剛區圖標不超過8個

          我們常說的“八大金剛”就是一屏顯示8個圖標,超過的則放在第二屏。如果兩行10個,往往第十個是“更多”入口,總的來說也沒超過9個。


          banner文案不超過9個字

          產品運營banner主文案字數通??刂圃?個字以內,在設計時也通常把長標題一分為二排兩行,便于用戶快速閱讀,提升點擊率。

               


          在交互設計中,7±2法則是減少用戶認知負荷,提升用戶體驗的重要環節。同時還強調了在設計過程中對產品的預見性,避免在不斷為產品添加功能時,破壞原有的視覺基礎。



          0無需說明書

          喬布斯曾說過:“蘋果應該創造所有人都可以使用的產品,即使沒有用戶指南”。


          1 一看就會

          簡單易懂,看一眼就明白你想說什么,不用教學就知道怎么用。


          2秒法則

          所謂“2秒法則”,是指用戶在使用某類系統時的等待時長不超過2秒。在極短的時間內展示重要信息,給用戶留下深刻的第一印象。這里的2秒只是一個象征意義上的表達,也許有一點隨意,但是這卻是一個合理的數量級。我們熟知的“F”瀏覽模式其實就是間接縮短用戶看到重要信息的時長,達到快速瀏覽的目的。


          進入App的首頁加載時間如果過長就會導致用戶產生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應用將首頁加載時的空白頁進行占位圖設計。


          下拉刷新也是一個設計點,為避免刷新時間過長,設計師通常會在加載動畫上做文章。充滿趣味性的動效能安撫用戶焦躁不安的心情,無形中降低了用戶對等待時間的感知。


          APP里面的banner設計要有視覺沖擊力,如果兩秒之內沒有抓住用戶的眼球,可能就被用戶忽略了。


          因此,在設計互聯網產品的頁面時,用戶等待的時間越短,用戶體驗越佳。反之,就會讓用戶產生焦慮的情緒。


          3次點擊法則

          用戶在3次點擊之內如果還沒有找到他們想要的信息或了解網站特色,他們就會離開該網站。這條原則突出了清晰的導航,符合邏輯的結構和易于理解的網站層級的重要性。(來自《眾妙之門》P133) 

          其實在交互體驗中,點擊的次數往往是無關緊要的。只要每次點擊都是無需思考的,毫不費力地順勢進行,那么用戶的挫敗感就會大大降低。如果你的網站能夠讓用戶知道他在哪里,從哪里來,要到哪里去,并且能夠讓用戶了解如何完成目標,這樣的點擊即使有10次也是沒有問題的。例如,在京東購買一件商品需要經過“立即購買>確定>提交訂單>選擇支付方式”4次點擊才能到訂單支付頁面完成購買,這過程中可能還穿插其他的點擊行為(比如選擇地址、優惠券),用戶并沒有感受到不方便,使用過程流暢而自然。


          在可用性測試領域,“三次點擊”定律一直是一個很具爭議內容。體現在以下幾點:

          ·研究表明,用戶在超過3次點擊還沒到達想去的頁面時,往往并沒有退出網站,而是會繼續多點幾次;

          ·當把一個3次點擊就能到達的流程改為4次點擊的時候,用戶發現目標頁面的能力反而提升了600%;

          ·合理的導航系統比點擊次數更重要;

          ·比起“3次點擊”,有人提出了“1次點擊”定律,即用戶的每一次點擊都應該讓他們更接近目標,同時盡量減少能干擾實現這一目標的因素;

          ·用戶抱怨要花很長時間才能找到某個產品,實際上他們是在抱怨無法找到想要的東西,如果用戶找到了想要的東西,他們就不會抱怨點擊的次數了;



          英國心理學家William Edmund Hick認為,在簡單的判斷場景中:一個人所面臨的選擇越多,做出決定所花的時間就越長。有時候在選擇中花費太長時間從而導致決策失敗。

          生活中我們也經常會面臨選擇困難癥,比如早上起床就糾結今天穿什么?中午去食堂就會糾結吃什么?造成我們如此糾結的原因就是因為選擇太多了(遠古人就沒這些煩惱,尋找食物時逮著什么就吃什么)。


          在設計中的應用

          應用到界面設計中也是如此,選項越多,意味著用戶做出決策的時間越長。

          例如APP Store首頁,改版前的首頁把眾多app平鋪出來,對目的不明確的用戶來說選擇有點多。改版后的首頁大幅減少了App的數量,卡片的設計方式簡潔且目標清晰。


          不得不面對較多選項時, 對主要和次要的選項做視覺權重區分,做好設計上的歸類,提升用戶做決定的效率。例如美團外賣金剛區第一行5個入口的圖標在尺寸和表現手法上都比下面的入口圖標要大更醒目?!拔业摹表撁姘岩恍┑皖l率功能或不太重要的功能收納到“設置”里,此外還可以通過置灰、鎖定等方法間接減少選項,降低干擾。


          對于多流程的任務進行分步操作,讓用戶專注眼前任務。 例如Clubhouse注冊時,把需要用戶選擇的選項分步引導完成,讓用戶能專注當前行為。


          對于多種類別的選項應當做二次分類的區分,我們都知道電商平臺的品類繁多,僅通過單一分類是不夠的,比如數碼頻道下面還分相機、影音娛樂、數碼配件、智能設備、電子教育等大的分類。商品詳情頁的篩選功能也是貼合使用場景來設計的,所以分類不怕多,就怕混亂。


          適用邊界

          雖然選擇越少,用戶做決策的時間越短,但這并不是提高用戶體驗的唯一標準,過度的減少選項,可能導致負面效果。

          如上圖右,如果在刪除App的彈窗中只有一個“刪除”選項,沒有明顯的取消之類的途徑,那么用戶會覺得特別難受,感覺被強迫去刪除。如果當下有急需使用手機處理一些事情,那么這樣會把這種負面情緒給無限放大,讓用戶抓狂。


          ??硕芍饕苡绊懹谶x項的多少,但是它不適用于需要高難度閱讀的任務。例如考試試題每道題只給你A、B兩個選項(學渣竊喜),那也太容易蒙了,這就是希克定律在答案試題中的局限性。


          ??硕墒且粋€可以適用于設計的指南,記住要盡量減少用戶在一次決策中要做的選項,因為決策效率是一個產品導致用戶流失的重要原因之一。引導用戶在明確的選項之間進行選擇,以便快速將他們送到某個地方(例如賬單支付),這將大大提升用戶體驗并達到你的目標。




          費茨定律由心理學家Paul Fitts提出,用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接著你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有著一定的關系。


          如上圖所示,如果光標現在在任易地點想要去點擊目標target,最短路徑一定是D,最短路徑上容錯的最長路徑是D+W,只要水平上移動超過了D+W你就點不到了,而這個點擊動作所耗的時間是一個常數加上一個以D為正比W為反比的函數的和。 


          詳細解釋如下,圖中紅色方塊代表點擊目標,虛線代表移動路徑,此時因為紅色方塊目標較大,所以用戶從任何一處點擊都很容易(可以用鼠標在屏幕任意點移至紅色方塊試試)。


          相反,紅色方塊目標變小,快速點擊就會困難很多,很難一次到位。


          但如果紅色方塊目標很小距離很近的話,因為移動范圍小,也能準確的點擊到。


          按鈕越大越容易點擊

          在頁面中,大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的觸達目標。比如頁面中的大按鈕。


          將按鈕放置在離開始點較近的地方

          夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域,相比常見頂部搜索欄更方便操作,效率更高。


          相關按鈕之間距離近點更易于點擊

          注冊登錄界面,通常將「注冊」和「登錄」放到一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 。


          適用邊界

          費茨定律鼓勵減少距離,增加目標大小以提升用戶效率,但反過來亦適用。比如iPhone關機按鈕,沒有使用點擊關閉,而采用滑動操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進而避免了用戶誤操作。


          App彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方,希望用戶先完成彈窗提示的任務。還有啟動頁廣告,喜歡把“跳過”按鈕放在難以點擊的右上角(恰飯重要),以提高用戶的誤觸機率提高轉化。


          思考小結

          按鈕越大越容易點擊,因此在程序開發中,會增加按鈕點擊的熱區范圍,減輕用戶精準點擊的壓力。但也不能過分的大,容易引起誤觸;

          讓相關聯的內容更靠近彼此,用視覺手法增強用戶對它們相關性的認知。距離產生美,注意不要靠的太近,會出事;

          將按鈕放置在離出發點較近的地方,比如頁面主按鈕一般會放在屏幕底部易操作區域;

          屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置有“無限可選中”的屬性,可以大膽操作而無需“微調”,參見macOS底部dock欄;

          定律的反向使用可以適用一些特殊場景,比如想達到某種目的而降低按鈕被點擊的可能;




          “任何事物都具有其固有的復雜性,無法簡化”。

          泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也稱「復雜度守恒定律」。

          該定律認為:每一個過程都有其固有的復雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。


          生活中很多我們習以為常,感覺便捷方便的生活方式,是無數卓越的數學家、工程師、設計師等無數的時間投入,才實現的某個小功能,是他們把這些復雜性轉移到自己身上替我們簡化了。


          說回移動端,每個應用中都有其無法簡化的復雜度,也不能按照我們個人意愿去除這些功能。這就是為什么飛機稿都簡潔好看,而一搬到線上就面目全非。常見的復雜性轉移有:“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉移跳轉,比如:頂部導航欄的更多圖標,就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中,把用戶的操作范圍轉移到另一個地方。


          除此之外,還有一些降低操作復雜度的方法:

          刪除、組織、隱藏

          視覺層面的“降噪”方法,刪除會干擾用戶操作的選項;功能分類明確,圍繞用戶行為組織信息內容;隱藏那些不常用而又不能少的功能,延遲及階段性展示。總的來說就是將復雜的信息收起來,展示重要且簡潔的界面。


          簡化交互設計

          可以用代碼節省用戶操作時間的地方,是互聯網人一致的追求。例如,B站的一鍵三連,用戶長按點贊按鈕,會同時觸發點贊、投幣和收藏,省時省力。


          算法解放“生產力”

          個性化算法就是通過技術手段,將用戶復雜度降低,而轉移到開發者身上。抖音為什么會讓人上癮?是算法知道了你的喜好,專推給你喜歡的內容而不用自己去找,誰都喜歡私人定制。這對用戶來說是一件好事,但就像魯迅說的:“你覺得好,一定是有人在負重前行”,這里的簡化復雜的難度就轉移到設計和開發身上了,還逼得機器去學習。例如抖音、淘寶、知乎首頁推薦的內容都是基于你的喜好定制化推薦給你的。


          我們常說以用戶為中心去設計,就需要從用戶角度出發,在交互設計中盡量簡化操作的復雜度,降低學習成本。但如“復制粘貼之父” Larry Tesler (1945-2020) 所說:“任何事物都具有其固有的復雜性,無法簡化”。因此,如何取得復雜度的“平衡點”就是重要的部分,是讓工程師及設計師花費大量時間去降低產品的使用難度,還是在設計中保留一定的復雜度是我們需要思考的事。



          該原理是由麥肯錫國際管理咨詢公司顧問Barbara Minto提出的理論,她強調結論先行,論點自上而下。

          你是否遇到過這樣的場景,部門開會時有人口若懸河的講了半天,到最后你都不知道他想說什么。所以如果開會時你會走神,這不怪你,只怪講演者說話沒有邏輯,沒有重點。


          金字塔原理指示結構化表達遵循結論先行的原則,即任何問題都能歸納出一個中心點,讓受眾能夠第一時間清楚你想談論的主題。然后由數個論據作支撐,而這些一級論據可以繼續由數個二級論據支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。


          應用到交互設計上,即將信息展示的重點與交互行為的主任務優先展示,再根據用戶在這個界面上所愿意停留時間逐級給予更多細節補充。以京東的商品詳情頁為例,首先金字塔的最上層是用戶目標明確直接進行“立即購買”的底部全局按鈕,其次是商品的頭圖和用戶評價這些,讓用戶了解更多信息,進一步促成購買,最后一層是提供商品相關的全部信息、參數、評分等,確保交易的最終完成。在這個過程中,用戶在每一層花的時間也在逐級增加,呈金字塔狀。


          映射到設計師身上也是如此,從設計新人到設計總監,中間差的就是一個完整的設計技能金字塔。就像升級打怪,每完成一項任務獲得相應的經驗值,累積的經驗值幫助我們更快的升到下一級。當把工作中的需要攻克的難題一一解決之后,你的設計水平會在不知不覺中更加精進,形成一套自己的設計風格,成為一名優秀的設計師。


          有趣的是,把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下,激勵用戶成長。它告訴我們:

          用戶的需求是永遠滿足不完的,所以什么值得做,什么是可分階段去實現的是決策人需要明白的。如喬布斯所說:“消費者并不知道自己需要什么,直到我們拿出自己的產品,他們就發現,這是我要的東西”;

          不斷完善主要功能,以滿足金字塔頂的核心用戶群。決策者常常添加一些自己想要的而不是用戶想要的需求,比如在信息流中添加一個廣告位;

          如何優化完善產品架構,檢驗產品策略的合理性和完整性;



          防錯原則由世界著名的品質管理專家新鄉重夫提出,即在過程失誤發生之前加以防止,是一種在作業過程中采用自動作用、報警、標識等手段。使操作人員不用特別注意也不會失誤的方法。

          防錯原則認為大部分的意外都是由于設計的疏忽,而不是人為操作失誤,可以通過優化設計把過失降到最低。該原則最初用于工業管理,后來應用于界面交互設計中,當使用條件沒有滿足時,常常通過功能失效來表示。


          自動檢測提示

          bilibili在登錄時輸入框沒有內容或沒有輸密碼時,登錄按鈕處于禁用的置灰狀態,只有兩者都滿足了才可以正常點擊。此外登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、郵箱錯誤等不同的錯誤。通常必須賬號和密碼同時滿足且匹配才能成功。


          Twitter發帖時只允許用戶輸入140個字,為了提醒用戶,其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個字符,超過會以負數警示。知乎發布文章標題過長時也會提示錯誤預警。


          消除可能的失誤

          防錯法則認為大部分的出錯都是產品設計的不夠優秀,而不該責怪用戶操作疏忽,通過設計手法可以把出錯率降到最低。防錯法則的核心觀點是,如何有效的在用戶出錯之前就盡量避免錯誤的發生。比如,美團外賣在接受短信驗證碼時,系統會自動提取驗證碼在鍵盤上方顯示,用戶點一下就可以自動填寫,省去了跳出應用——打開短信——記住驗證碼——再輸入的繁瑣過程,有效預防了出錯的機率。還有微信在綁定銀行卡時也是通過掃描銀行卡自動提取賬號,避免手動輸入的出錯率。


          將失誤降至最低

          二次確認,在一些比較重要的場景讓用戶二次確認,通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結果,進一步降低出錯率。例如,最近大家都在用的報稅App,會在提交信息前再次確認。


          視覺暗示

          可在視覺(置灰或隱藏)上屏蔽那些不能選的選項,避免用戶點擊后才報錯或點擊沒反應。


          其次,一些不可恢復的操作,視覺上通常會給強標識。例如,刪除短信時的文字顏色“變紅”。


          為用戶犯的錯買單

          當用戶輸入錯誤信息時,比如打錯字,系統應該給予用戶想要的信息,而不是無動于衷,冷漠視之。


          范圍限制

          其實限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。例如,Airbnb訂房可選日期和設置鬧鐘時的時間范圍。


          研究得出,使用產品時有77.7%的錯誤都是人為的,防錯法則可以幫助設計師站在用戶體驗的角度考慮設計方案,做到操作前、中、后都有及時的反饋,預測到他們有可能發生的誤操作狀態,讓用戶更快完成目標,幫助用戶減少出錯率。



          每次拿起U盤插入電腦時,我就呆住了,到底朝那個方向才是對的?

          防呆(Fool-proofing)是一種預防矯正的行為約束手段,運用避免產生錯誤的限制方法,使出錯的機會降至最低,進而達到“第一次就把工作做對”之境界。


          設計師應謹記:不要認為用戶是專家。比如,我們都知道“漢堡”圖標就是菜單,點擊這個按鈕就會調出某些功能。但是設計師忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是面包屑、什么是抽屜式導航、什么是3Dtouch、怎樣雙指滑動。更何況普通用戶并不會研究App,在他們眼中產品只是眾多工具中的一個。因此,一定要把交互和設計做的簡單,通用的圖標、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復學習的負擔。每個頁面應強調一個重要的功能而不應該讓用戶做選擇題,這些都是有效防呆的好方法。


          △頁面的中主按鈕更突出


          防呆設計是預防錯誤發生的方法,讓非專業、無經驗的用戶可以高效完成正確操作,不要讓用戶去思考,而是我們時時為用戶思考。



          又被稱作“簡單有效原理”:“如無必要,勿增實體?!?

          通俗點去理解“如無必要,勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情?!被蛘弑硎鰹椤霸谄渌麠l件相同的情況下,要求得越少的那個就越好,越有價值”。


          應用到設計學領域,該法則認為做產品時功能上不可過于繁瑣,應該保證簡潔和工具化。例如,產品中為用戶提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設計元素會導致使用效率降低,還會增加不可預知的后果。建議在不損及功能的前提下,干掉多余的元素,當兩個設計方案都能達到設計目的時,選擇較為簡單的那一個有利于更好地傳達內容更好地用戶體驗。


          總的來說,我們可以結合《簡約至上》一書中提到的刪除、組織、隱藏、轉移四個策略來將復雜的設計和體驗變得更加簡單。

          刪除:關注核心,讓用戶注意力集中在自己要完成的目標上,刪除不必要的功能、流程和造成視覺混亂的元素等;

          組織:繁瑣的功能通過分塊,被組織成清晰的層次結構。還記得我們前面說到的“7±2法則”嗎,把項組織到7加減2個塊中;分塊越少,選擇越少,用戶負擔約輕;

          隱藏:隱藏那些主流用戶很少使用,但自身更新需要但功能。通過漸進展示和適時出現的方法減少干擾;

          轉移:把合適的功能轉移到合適的設備上去。讓用戶感覺簡單的一個重要前提,就是先搞清楚把什么工作交給計算機,把什么工作留給用戶。




          小測試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。

          可口可樂、雪碧、芬達、嶗山可樂、7喜、美年達


          雷斯托夫效應又稱隔離效應(isolation effect),以及新奇效應(novelty effect),前蘇聯心理學家馮·雷斯托夫認為,某個元素越是違反常理,就越引人注意,收到更多的關注。


          一樣東西與以往經歷明顯不同就產生了經歷差異。比如人生中的很多第一次,第一次高考、大學的第一天、初戀、第一份工作等等。該差異也會出現在新奇面孔、電話號碼記憶中。奇特的面孔和特殊的電話號碼更能被人記住。

          該理論以多種不同的方式應用到設計中,最明顯的就是如果想要突出某個重點內容,就要使它特殊化,通過色彩、尺寸、留白、字體粗細等設計手段。利用對比來凸顯想要表達的重要信息。例如金剛區、tab欄的運營活動廣告,特殊化的設計讓它們在背景中脫穎而出。



          個人中心的會員卡為了吸引用戶注意,增加開通率,都成了重點設計對象。


          與以往不同的界面設計可以更加的吸引用戶,加深用戶的記憶,同時擴大了活動對用戶的影響力。例如每年淘寶的雙11首頁設計都與往常不同。


          Google doodle 會在一些比較特殊的日子改變 logo 的設計,把logo設計成與這個日子相關的插畫或涂鴉,與平時的 logo 形成差異化,幫助人們更好地記住這個日子。


          因此我們在界面設計中,若想讓用戶對哪個模塊或者是元素引起注意或點擊,就可以打破常規對該元素進行強調設計,使他在背景中脫穎而出。但是不要任何元素都強調,因為什么都強調就等于什么都沒強調,就沒有重點,所以要謹慎使用這個方法。


          回到開篇的題目,答案是「嶗山可樂」。相比其他飲料,嶗山可樂遇到的少,反而成了最特別的一個了。你的答案是什么?歡迎在下方留言探討。




          食之無味,棄之可惜

          損失厭惡是指人們面對同樣數量的收益和損失時,認為損失更加令他們難以忍受。 同量的損失帶來的負效用為同量收益的正效用的2.5倍。比如,丟100塊錢的痛苦感要遠高于你撿到100塊錢帶來的幸福感,也就是說要至少撿到300塊才能平復之前的心情。


          生活中類似的栗子還有很多,比如旅游時,雖然這個景點很爛,人們依然覺得來都來了,還是要看完再走才“不虧”;吃自助餐時,明明吃不下那么多,可想到花了那么多錢,就要盡可能的多吃才算“回本”,真是應了那句話:“食之無味,棄之可惜”;花了50塊買了張電影票,過了10分鐘發現是部爛片,就算在電影院睡覺也不愿提前走,覺得這50塊錢不能白花...


          那么,該如何將“損失厭惡”賦能給產品設計呢?

          最典型的莫過于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計時xx小時后恢復原價等等。商家就是為了營造現在不買就會錯過的套路,用戶也會覺得失之可惜。一年一度的天貓雙11,京東618,還有情人節、中秋節等各種有的沒的節日都是商家利用“損失厭惡”心理為基礎刺激消費。



          我們App的用戶粘性不太理想,增加一個“簽到”功能吧,產品經理如是說。如是我們看到各種簽到得禮品,贏紅包等活動。中間還不能中斷,要連續簽到多少天才能得到獎勵,用戶也擔心中斷的損失。


          某網盤下載文件時,會給你一個10秒VIP高速下載的體驗,計時過后又恢復到龜速,讓你恨的牙癢癢。雖然這招有點損,但用戶體驗到了VIP的快感,很多人還是會乖乖成為付費會員。


          產品運營中會經常發一些優惠券,雖然知道自己不會用,也要先領了再說。這些券也都有時間限制,快過期的提醒也會加快用戶決策。還有0元開通會員,套路是第一個月免費,次月開始按正常價自動續費,典型的“騙”進來養肥了再“殺”。


          人天生會對危險的,不好的東西避而遠之。如是我們就看到保險行業,他們會用一些負面信息(空難、車禍)刺激你,用戶就會產生焦慮,自然就想規避掉這些概率小的風險。例如購買機票時的意外險,QQ退出登錄時的提示。


          還有就是有用戶自己的內容的東西,一般不會輕易舍去。拿我個人來說,飛書一直是我的寫作工具,后來看到幾個更好用的軟件,但要想到把原來的這么多東西全部轉移過去也是件很心累的事,太麻煩,還是繼續用飛書好了。QQ這個“古老”的軟件,估計很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因為那上面有很多青春的回憶。




          用戶會將大部分時間花在其它網站上,因此他們會希望你的網站也能像他們已經掌握的其它網站一樣,擁有相同的使用模式和習慣。 

          Jakob定律是由Jakob Nielsen提出的,他認為用戶在其他網站所積累的經驗教會了他們如何使用網站,所以他們會希望你的網站可以與那些熟悉的網站一樣,相似的使用方式,在使用你的產品、服務、內容和信息的時候,他們不會感到恐慌,而是輕車熟路。該原則鼓勵設計師遵循常見的設計模式,以避免混淆用戶或導致更高的認知成本。


          例如YouTube2017年改版前后的對比,在新版中,網站框架和功能上幾乎沒動,只是在UI上做了順應新的設計準則,比如調整字體大小、顏色、欄目間距等。整體上和舊版沒太大區別,而且還給用戶提供了舊版的選擇。


          在移動端App中也應如此,在具有相同功能的頁面,盡量保持一致。大到頁面底層框架(比如電商應用中的購物流程),小到UI設計中的一個按鈕,一個圖標,甚至一句微文案。


          在設計產品時,要先延續大眾早已習慣的概念模型。然后再從自己的產品出發,對其進行改善。而不是從零開始制定自以為是的流程。

          日常使用的各類修圖軟件,版式都高度相似,中間是圖片,各種濾鏡、貼紙、調整等功能都放在底部操作區域,很多相同功能的名稱都一樣。這是用戶最熟悉的布局,可降低用戶在同類軟件使用的學習成本提升使用效率。


          也許你會質疑當所有產品都遵循相同都設計模式,會讓產品同質化嚴重,答案是必然的。此時需要深入了解用戶的目標和心智模型(用戶訪談、用戶畫像、用戶體驗地圖等),并將其應用到我們的產品設計中去,縮小我們與用戶心智模型之間的差距,從而獲得良好的用戶體驗。上文YouTube例子中,就是通過簡單的用戶授權(新舊版本選擇),避免了心智模型的不一致會帶來的問題,當用戶準備好隨時可以切換到新的版本。相反的案例Snapchat在18年設計改版時,因為新的布局未能確保改版前后用戶心智模型的一致性,導致大量用戶流向競爭對手Instagram那里了。


          但是也要注意設備之間的差異,比如在移動端“漢堡包”式菜單是個不錯的方案,可是放到桌面端可能并不太友好,因為大屏幕可視范圍更大,小小的漢堡包圖標很容易被忽略,這時候平鋪出來可能會更好。


          思考總結

          1、用戶會把在其他產品使用中已熟悉的操作習慣轉移到另一個看起來相似的產品上;

          2、利用現有的思維模型,使用戶可以專注于自己的目標上,而不是學習新的操作方式;

          3、在進行必要的改版時,請給用戶過渡到新版本的機會,即可以選擇短時間內繼續使用舊版本;



          看名稱挺拗口,另一種翻譯叫做“對角線平衡的和諧狀態”。它告訴我們瀏覽頁面是由左上至右下的視線流,左上角是視覺第一落點區,右下角是視覺最終落點區,因此右上角和左下角都是一個強烈的視覺盲點區,大多數時容易被忽略。


          在進行信息排布時,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。運用視覺元素來創建一條虛擬的“線”,讓用戶的視線跟隨左上到右下這條對角線移動,符合用戶習慣性的眼動規律。


          古騰堡圖表應用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖片、名稱、價格、快遞和優惠等用戶主要關心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購買按鈕。


          我們都知道一般頁面按鈕都在界面底部是因為離手近,方便操作,但不僅僅如此。還因為瀏覽是用戶的第一行為,他們的視線會根據頁面元素進行移動,最終停留在底部結尾的地方。


          看各種社交產品評論、點贊的位置,就知道產品希望用戶先干什么的想法。


          彈窗的按鈕擺放一般都是左「取消」右「確認」,目的是讓用戶最快地看到主要操作內容。



















          余額寶的「轉出」在左,「轉入」在右,畢竟誰也不想財往外流是吧。


          既然如此,為什么“發布”頁面的按鈕都在右上角呢?因為發布頁是屬于“編輯頁面”,需要用戶謹慎操作,這里關注的核心應該是可編輯內容區域,而不是按鈕本身。


          類似的例子還有很多,設計中與此視覺流與節奏規律相似的還有F型布局和Z型布局,合理運用這些節奏模式,使用者會跟隨你“設計”的視覺流和運動規律來瀏覽頁面,有效提高用戶閱讀的節奏和理解能力。




          美國心理學家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動機的角度提出需求層次理論,該理論強調人的動機是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求,依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之后,就要去實現更高的需求和目標。


          馬斯洛需求層次理論有兩個基本出發點,一是人人都有需求,某層需求滿足后,另一層需求才出現;二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足后,后面的需要才顯示出其激勵作用。例如,在能感受到愛之前,他們的生理和安全需求一定要得到滿足。


          回歸到產品,一款產品,最核心的是解決用戶的需求。馬斯洛需求層次理論,為產品的需求分析指明了方向。

          生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團外賣、淘寶、馬蜂窩等為日常生活提供方便的應用;

          安全需求:人生安全、財產保險,也是強需求。如是各類投資理財軟件層出不窮。

          社交需求:包括友情、親情、愛情多個層次,滿足人類社會關系,讓每個人不再是孤單的個體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛;

          尊重需求:每個人都有被尊重的需求,都希望展現自己,獲得人們認可。此需求可以深度結合在社交需求中。

          自我實現:最高層級的需求,完成與自己的能力相稱的一切事情,實現自己理想的需要。結合到產品可以理解為能滿足自己外在展示(炫耀)的需求,如各類美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。


          由此規律可以看出,越靠近底層需求越是剛需,越往上,就變得越來越不必要,如自我實現,變得可有可無,不再是所有人的剛需。一個優秀的產品,深諳人性滿足用戶核心需求,才能形成持續穩定高用戶粘性的產品。




          序列效應法則又叫系列位置效應,是指一種記憶現象: 在列舉項目時,排在最前面與最后面的元素,要比排在中間的更容易讓人記住。

          因為人們對排在頭、尾的項目,要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級里我們一般都知道成績最好的第一名和倒數第一名,至于排在中間的很難記住。因此對排在開頭的項目產生加強的回想效果,稱為“首位效應”( primacy effect)。對排在結尾的項目產生加強的回想效果,稱為“近因效應”( recency effect )。


          分類頁簽中,我們通常都會記得“精選”、“熱門”這類標簽,是希望給用戶進入App后看到的主要內容。這就是“首位效應”,把重要性高的內容放在首要位置。


          我們都知道界面中“返回”按鈕放在左上角,除了操作習慣和防誤觸外,還因為它出現在頁面左上角最開始的地方,更長久地儲存在長期記憶之中,需要“返回”時能夠快速回憶出來。


          tabbar數量不管是3個還是5個,用戶通常都會記得第一個“首頁”和最后一個“我的”,對排在中間的都會選擇性的忽略掉。


          有時候新上一個功能,產品想提高它的位置引起用戶注意,會和“我的”互換位置。例如網易云音樂,新版本中把“我的”放在第三個tab,為了提升“云村”重要性,把它放置最后一個tab,正是利用了“近因效應”。


          近因效應常用于及時進行反饋的設計界面中,比如點贊、評論、分享等功能置于底部不僅可加深印象,同時用戶在看到有趣的內容,想要評論或分享時,不用等到文章看完即可操作。從而增強內容粘性,提高互動率。


          用戶的記憶具有系列位置效應,而且人的短期記憶非常有限,通過序列效應法則的應用,我們可以幫助用戶減輕記憶負擔。在排列項目時,把重要的放在首位或末尾,以達到最好的記憶效果。

          文章來源:站酷  作者:Fyin印跡

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          如何撰寫高效的交互說明?

          ui設計分享達人

          定義:

          交互說明是針對原型圖內容元素的補充解釋文字(包含交互邏輯描述、反饋狀態描述等) 

          交互設計說明書由交互設計師完成編輯、修訂、發布的 
          主要閱讀對象:產品人員、設計人員、研發人員、測試人員等,他們都是交互設計文檔的使用主角。 




          不同角色的關注點:

          產品經理
          主要關注:交互邏輯、功能架構、交互事件、界面頁面流轉與內容布局等。這里的產品經理代表產品經理及以上管理層。 
          注意要點: 為項目梳理清楚邏輯關系,文檔按照邏輯關系和功能架構分支等設置目錄講清楚項目、功能、組件、頁面流轉關系。

          UI設計師
          主要關注:說明文檔的具體頁面數量,因為這決定 UI 設計師出多少效果圖。另外,要看你的原型設計給 UI 設計師留了多少發揮空間,不要過于高保真。以及頁面元素是否統一規范便于提煉出典型頁面和設計規范。 
          注意要點: 清晰合理的頁面功能布局,注意交互組件復用,頁面不同狀態描述清晰。

          研發人員
          主要關注:非常關心細節實現,關心有多 少個功能、多少個功能新特性、多少個頁面元素組件、多少個交互動效等, 但他不關心方案里一個輸入框里是用彩色還是黑白,因為他是具體功能的實現者。 
          注意要點: 明確表示出關于功能設計、頁面邏輯、組件交互等信息的細節,例如:一個頁面刷新,要分為觸發刷新事件、刷新加載中、刷新成功提示、刷新失敗提示。其中失敗提示又要分多種情況:網絡不佳、程序異常等。如果你沒有提出明確需求,責任就會在需求方,而不是研發部門。

          測試人員
          主要關注:測試是依靠需求說明書和交互設計說明書,進行測試用例與測試腳本的編寫,在交互設計說明文檔里需要說明白每一個功能的交互動作與事件,測試是抓細節的,所以需要配一些說明性文字解釋交互設計的思路與實現路徑,這樣測試人員就可根據設計思路設計出測試用例。當然,測試用例分多種類型,這里指的是功能測試與邏輯測試,一些性能測試等需要依靠程序使用的軟件、數據庫等技術性的接口文檔來定。 
          注意要點: 功能點、業務邏輯、界面元素、交互過程分解步驟。

          上面解釋了各角色使用交互設計說明文檔的場景及他們期待的真實需求,我們需要清楚地了解這些內容,才能有針對性地撰寫交互設計說明。 
          在交互設計過程中,上述四個角色會不斷有所交集。所以,一旦編輯文檔,就需要對這幾個角色有針對性地解釋和閱讀優化。 




          清晰準確的交互說明,可以起到哪些作用:

          1.減少交互設計師與產品上下游人員的溝通成本 
          2.提升協作效率 
          3.避免項目返工延期 




          交互說明撰寫準則:

          只寫最重要的: 

          只針對有邏輯規則、異常狀態、特殊交互、分支流程、關鍵節點等進行說明。 
          對于一些常識性、無異常點的地方不用堆積文字描述... 
          交互說明畢竟是要給人看的,堆積的文字誰看得下去??只會帶來額外的閱讀壓力和極高的理解成本,交互設計師修改起來也麻煩。 


          按模塊來展示說明: 

          01.設計內容組件:對于重復性強、出現頻率高的內容,設置一個模板內容及說明即可。 
          對于重復出現的地方,直接代替過去就行,可大幅度減少交互設計師的工作量,開發也方便理解。 

          02.分頁面/位置來展示:當整體交互原型頁面較多時,不要全都鋪在同一個頁面進行展示說明,會顯得頁面臃腫、瀏覽費力??蓢L試:單獨展示某個模塊、分支流程、場景等下的交互稿。小而聚集,內容更精簡、理解更方便。 

          03.若各模塊/分支流程/場景中的交互稿存在一定的關聯性,可以先做一張總體性的「概覽圖」,再去單獨展示。讓開發知道整體方案之間的關系、又能了解各個細分方案里的交互說明。 


          復雜說明單獨展示: 

          交互稿里總會有一些比較復雜、難以文字來說明的想法,像是一些動效、狀態等。 
          對于這一些比較復雜的說明,可抽離出來進行對比、詳細描述,針對局部進行狀態效果描述,不必重復復制全量頁面。 
          像一些按鈕或功能存在多種狀態時,也可用“表格/列表”的方式進行展示。 


          交互說明的排版布局要有助于閱讀:

          針對不同體量及復雜度的項目,交互說明一定存在多種排版布局方式。但要注意以下幾點: 
          01.就近原則:交互說明盡量靠近所描述的原型圖(或具體功能點)采用數字標號對應描述。特殊情況下交互說明離頁面數字標注點較遠時,可用虛線連接引導閱讀動線。 

          02.縱向展示:同頁面不同狀態/模塊及交互說明盡量縱向延伸展示,這樣更便于鼠標滾動查看。不要橫向平鋪太長。 

          03.減少重復:對于相同的頁面框架/功能菜單僅部分模塊/狀態不同,可畫一張全要素主頁面示意,其余針對不同模塊/狀態拆解后,單獨對比展示,并補充交互說明。突出差異點,減少重復性元素的干擾。 

          04.主次分明:交互說明樣式整體需要區別于原型圖頁面元素,可一眼區分。同時,對于交互說明也需要區分主要解釋和次要描述,讓不同查看者抓住重點。 

          不同的排版布局方式各有利弊,所以具體采用哪種布局方式要根據所做項目的情況,以及開發人員的閱讀習慣而定。 


          交互說明組件化: 

          類似于設計的控件庫,我們在項目中寫交互說明寫多了就會發現,既然元素可以調用控件庫快捷使用,那么該元素的交互說明也可以歸類入庫,在需要的時候直接拿出來根據具體情況調整使用。這樣做的目的:使用時快捷調用,修改時快捷修改。 


          有更改及時告知: 

          若交互原型做了調整(包含交互說明),一定要告知團隊成員??!并寫明修改位置(在哪個頁面)。 
          否則產品、前端、后臺、測試等同事的相關想法、工作會停留在上個交互稿里。不要因為信息沒對齊而造成了不良影響。就算改了一處小東西,也盡量和同步一下。 




          交互說明的三種樣式:

          1.同一頁面內不同模塊描述

          當同一頁面內存在多種狀態時,可畫一張全要素主頁面示意,其余針對不同模塊/狀態拆解后,單獨對比展示并補充交互說明 



          2.頁面功能點邏輯規則描述
          對于頁面中的元素和功能點描述可采用數字標號對應的形式,若面功能點較多且存在關聯時,可分組標號做統一說明 




          3.頁面內細節簡短標注描述
          用于描述頁面內功能點及元素的簡短說明(20個字內)大段說明文字不建議用此方式(易干擾頁面)… 

          文章來源:站酷  作者:體驗為王UX

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          「玻璃擬物化」你知多少?

          ui設計分享達人

          去年大家看到更多的設計和文章都在圍繞“新擬物化”展開行動,隨著各種硬件的提升,代碼的優化,更多的風格和效果一一出現在我們的生活中,而今天呢,我們一起探索一下生活中最常見的,你可能沒有注意到的設計風格——“玻璃擬物化”風格,英文“Glassmorphism”,這也可能會成為新的設計趨勢。 




          什么是玻璃擬物化呢? 


          在生活中的攝影,通過玻璃的層次感,給人以朦朧的美感,那什么是玻璃擬物化呢?



          顯而易見,Glassmorphism 這個詞是 Glass(玻璃)和 Skeumorphism(擬物化)的結合,我們姑且將其稱之為「玻璃擬物化設計」。 




          油管一管主Malewicz 小哥對于這種風格特征歸結為4點:


          • 透明:使用帶有模糊磨砂質感背景的透明效果

          • 懸?。簬в忻黠@懸浮感的多個層級

          • 鮮明:使用鮮艷色彩作為強調色并且從半透明層中透出

          • 微妙:使用輕薄微妙的邊框來強化物理質感



          簡單的來說,「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的,但是它有著相對更加具體的視覺隱喻,也就是我們日常接觸的「玻璃」。  



          玻璃擬物化的優點有哪些? 


          1.愉悅感 

          玻璃擬物化的應用,讓扁平的UI界面不那么單調,打破了人們的視覺疲勞,增添歡快、愉悅的設呈現效果。 

          2.層次感 


          通過玻璃透明,加周圍顏色環境的烘托,頁面的層次能更容易的呈現出來。 
















          3.呈現語境 

          你在哪,從哪里來,玻璃擬物化就很明白的告訴你了。通過透明的玻璃材質,能告訴你所覆蓋的層級。



          4.微妙高級感 


          例如,以往的電商產品設計界面,更多的體現材質或者簡約風體現產品本身,但玻璃擬物化會讓產品在呈現中更顯高級。  







          玻璃擬物化的設計風格從哪里來呢?

          追根溯源。其實還是要追更到蘋果頭上。  



          蘋果的合計將玻璃擬物化的風格運用的惟妙惟肖,無論是mac,iPhone還是iPad,設計風格都保持著相對一致的玻璃擬物化風格。 


          重點來了,

          玻璃擬物化如何用Sketch來設計一個玻璃面呢? 

          首先:我們打開sketch,建立一個畫板,隨便找張圖片作為背景,畫一個白色矩形 



          接下來:調整矩形的屬性,再填充色中設置透明度為50%,邊框可以吸取一個30%透明的白色,2px,再添加一個環境色的10%陰影,做出層次感,最后就是調整玻璃模糊的效果了,玻璃擬物的關鍵就在于sketch自帶的背景模糊功能,我們常常以為這里只有一個高斯模糊,但卻忽略隱藏在里面的其他模糊效果。設置背景模糊值為10%,不用太大,太大的話模糊效果就沒有那么真實了,具體調整還是要看效果。我們看效果: 



          單層的效果不是很明顯,我們復制兩個調好的玻璃效果,調整他們的透明度,底部的透明度為70%、中間的為50%,最上層的為30%,看效果:


          在界面設計中,就可以通過不同層級,調整對應的參數,達到更好的層級效果。 


          那深色模式怎么辦呢?


          很簡單,我們復制這三個矩形,填充色設為黑色,可以不是純黑色,根據設計規范來定,看效果:  



          在圖標中怎么用玻璃擬物化設計呢?


          玻璃是屬于透明物體,所以我們就了解到,通過玻璃看物體,層次感就出來了。 
          所以圖標這這里設計的關鍵就在于 玻璃面和層次感,下面我們來看幾個圖標設計的案例 






          看得出來,玻璃擬物化的設計很出效果。 
          下面根據我說的我們來分析如何運用玻璃擬物化設計圖標 



          我們以這個照片的圖標為例來拆解分析,通過運用剛才繪制的玻璃面的方法,與圖標色塊組合起來,在組合的時候,調整好層級,一個輕巧且富有玻璃質感的圖標就繪制出來了,很簡單、很容易上手對不對?一起來快來試試吧 



          注意的細節:


          1.在純白色背景中,一定要給玻璃面添加底部色塊的顏色,不然就不會出現看不見玻璃層的尷尬畫面; 
          2.背景模糊值也是需要根據具體的需要來調整。  



          玻璃擬物化在界面中的應用越來越多,所以大家也要根據自己的業務有選擇性嘗試的去使用,不要盲目的跟隨設計趨勢設計而設計。  


          就到這里兒吧,大家有空多去收藏一些類似的設計,多去吸取靈感,設計出更好用好看的產品!  


          最后,讓我們再來總結一下

          一玻璃擬物化的特點:


          • 透明:使用帶有模糊磨砂質感背景的透明效果

          • 懸浮:帶有明顯懸浮感的多個層級

          • 鮮明:使用鮮艷色彩作為強調色并且從半透明層中透出

          • 微妙:使用輕薄微妙的邊框來強化物理質感


          玻璃擬物化的優點有哪些?

          讓動畫生動的技巧

          ui設計分享達人





          前言

          前人早已總結了讓動畫生動的技巧,早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則,該法則也是受用至今。法則雖是針對傳統動畫而制定,但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。


          目錄

          1)動畫原則介紹

          2)結合案例應用原則

          3)流程方法論沉淀

          4)結語








          01: 擠壓與伸展

          擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調物體的質感、重量、速度。擠壓和拉伸會給予物體運動時具備質量感和體積感的錯覺。例如當一個皮球正在進行下落運動,在運動過程中讓皮球體積產生一定拉伸來表現它的速度感,皮球落地后則因力的作用產生擠壓變形。






          技巧建議

          擠壓與伸展的幅度影響著物體的質感、重量。設計師們可根據物體的質感去決定擠壓伸展的幅度。動畫雖存在夸張性,但對于物體擠壓拉伸的體積盡可能保持視覺統一,避免較大的體積誤差導致運動的突兀。











          02: 預期動作

          預期動作可告知觀者物體運動即將發生,增強觀者的場景代入感,使運動更加生動真實。如果我們去除前期的預備過程物體所呈現的運動感知像是突然被前方磁鐵所吸引。






          技巧建議

          預期動作可對觀者視線進行引導,設計師可以根據預期動作所引導的方向來銜接鏡頭/場景的轉場。反之預期動作也可以用來欺騙觀眾,當用戶預期與畫面不符時也可增加動畫舞臺的趣味性。








          03: 演出方式

          每個角色/運動元素在運動過程中都會流露出獨特的態度和氣質。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節奏以及舞臺的編排技巧,傳遞貼合角色/元素氣質的動態感知。








          04: 持續動作與關鍵動作

          在現今動畫工作流程中,考慮到流程效率及技巧利弊,我們可以使用兩者相互結合的方式。關鍵動作描述的是設計師們熟知的關鍵幀動畫的方式(類似AE)。在動畫設計前進行基本運動的關鍵動作提煉,再進行細化,一層層的遞進。底層的關鍵運動越完善,在后續添加細節時才不會耗費大量時間調整。而對于持續動作(逐幀動畫)的技巧,我們可以利用它處理一些復雜效果例如(涉及到運動空間的變化、形狀上的靈動變化等)。






          1)持續動作(Frame by Frame)

          逐幀動畫。

          優點:自由且流暢的動態。

          缺點:難以把控時間長短、體積大小。


          2)關鍵動作(Key Frame)

          關鍵幀動畫。

          優點:清晰、可靠、規范。

          缺點:修改成本略高。









          05: 跟隨與重疊動作

          跟隨動作指的是元素運動結束后不會立刻停止,會因為質量、慣性等因素,元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發生,主體與附屬部分的運動會因質感、外力等因素產生不同的速率。






          技巧建議

          1)表達運動的力量、速度感

          當一個人跳躍的時候,自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應著運動的力量感和速度感,利用好跟隨與重疊動作,可以更好地表現角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候,跟隨與重疊的物體運動幅度大,反之則運動幅度小。









          06: 緩動

          真實世界的運動遵循著緩動運動的規律,而并非勻速運動。根據物體運動情況、動態質感去編排元素合適的運動速率。關于運動的速率編排相關內容,可以看看過往的文章-《動效的質感》。








          07: 弧形運動

          仔細觀察可發現自然界中的運動多為弧形運動的組合,而勻速運動只存在于機械運動中。






          技巧建議

          1) 弧形運動路徑

          角色動畫:

          在人物運動過程中使用弧形運動增添角色動畫表現力。比如當人物抬頭或轉頭時,通過弧度的變化映射人物的情感,是充滿好奇心的還是沮喪的。


          交互動效:

          在交互動效中,弧形運動路徑會給予觀者運動表現力較年輕活潑的感知隱喻。設計師可根據品牌調性及產品屬性去選擇運動路徑類型。









          08: 附屬動作

          當主體在運動時,設計師可通過附屬物運動來輔助表達主體運動氣質。比如人物敲門時,捏緊拳頭的敲(代表生氣)與翹起蘭花指敲的(代表精致)區別。








          09: 時間控制

          在上篇文章其實我們有提到影響動效質感的原因之一就是時間,控制好物體的運動時間也是表現良好動畫節奏感的關鍵。








          技巧建議

          1) 時間偏差(角色動畫側)

          使用「時間偏差」的技巧,可以讓你的動畫更加生動。因為受力、質感等因素影響,主體運動時附屬部分的運動不會同時發生。比如當人物正在打哈欠時,首先是從嘴巴發力,再擴散至五官眉毛。






          2) 時間偏差(體驗動效側)

          為保持動效的連續性以及營造自然流暢的交互體驗,適當的使用時間偏差,可避免動效元素變化過程出現空檔期,提升信息傳遞效率減少認知負荷。








          10: 夸張

          通過夸張手法增添動畫表現張力,加強運動元素的吸引力令動畫更有代入感和戲劇性。








          11: 多維表現

          動畫設計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果,提升畫面表現力。








          12: 吸引力

          一部好的動畫作品一定會有令人吸引的人事物,比如動態氣質或視覺風格等它們都能很好的吸引觀眾。除此之外,如何講好一個故事,通過趣味幽默的故事表達手法也可以增添動畫的吸引力。








          原則歸類

          通過對十二大基本原則的學習,我將技巧分為以下兩大類:設計技巧和表演技巧。

          設計技巧:動畫設計的技法,增添動畫細節令動畫表現更生動自然。

          表演技巧:舞臺表演的技巧,提升動畫舞臺全局的表現力。












          結合案例

          接下來我們結合上述所提及的動畫原則,根據實際案例進行結合應用。一起來探討下當接到動效設計需求時,我們需要思考哪些點?才能使我們的動效表現力更上一層樓。








          腳本背景

          假設在項目中我們需要對設計元素(豬豬存錢罐)添加動效以提示用戶已省錢成功的情感氛圍。設計前我們先來分析下元素以什么動態/動作表現會更貼合元素性格??紤]到豬豬的可愛屬性,采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。








          動態分析

          將腳本確定后,我們在腦海里已經有大概的運動畫面。但在進入動效設計前,還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。








          應用技巧

          在添加動畫細節前,我分享下在項目中經常用到的兩個技巧。


          1) 實現擠壓與伸展的多種形式

          實現擠壓與伸展的方式有很多種,最常見的是直接改變物體的縮放比例或形狀路徑來實現。但在設計項目中我們往往會遇到非矢量的設計元素,利用xxx可實現圖層的彎曲扭曲等變形效果。






          2) 考慮運動物體質感

          質地堅硬的物體受外力的影響較小,質地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復靜止吋肉肉會有一個跟隨&重疊動作(抖動)。在處理這類抖動的效果除了使用常規的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節令物體運動更為生動自然。








          差異對比

          當我們去除這些動畫原則后,再去作對比明顯的感知差異就出來了。








          經驗沉淀

          根據過往項目經驗,我總結了動效/動畫設計的流程思路。從業務目標的分析到動畫腳本的確定,層層遞進。前期的目標和框架確定后,之后進行動畫原則的梳理及最后的動效輸出。設計師們不妨在項目中嘗試上述的流程思路及原則技巧,將自身動畫的表現力提升一個檔次。








          結語

          隨著動畫/動效的落地方式愈來愈完善,像Lottie、svga等新型的動畫落地形式所帶來的高品質畫面呈現。設計師們不能滿足于動畫僅僅只是動那么簡單,如何去塑造生動的動畫形象還有不少我們需要考慮的細節。恰好前人總結了相應的原則技巧,幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外,近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關于角色動畫的運動技巧及細節。其中部分技巧并不局限于角色動畫的設計中,下期文章我將分享關于角色動畫的知識沉淀內容。





          文章來源:站酷  作者:Fiasc1

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          圖標設計,你需要了解這些...

          ui設計分享達人

          本文目錄

          • 圖標風格匯總

          • 圖標設計流程

          • 案例講解

          • 圖標資源輸出



          01 常見圖標風格匯總

          • 線性

          • 面型

          • 線面



          1、線性

          • 單色

          • 雙色

          • 漸變

          • 不透明度

          • 一筆成形

          • 斷點



          1.1單色

          單色線性擁有簡潔、清晰的特性,在視覺層級上較低,適用于基礎功能圖標。b端較為常見,移動端常見在設置頁面或導航欄通知、分享等圖標設計上。 


          1.2雙色

          雙色線性在單色的基礎上豐富配色,解決了單色線性原本過于單調的問題,在提升趣味性的同時,也將視覺層級進行了提高,同樣適用于基礎功能圖標。在使用過程中需要注意的是豐富的配色會偏向年輕化,需要考慮是否符合產品風格及主流目標用戶審美。 



          1.3漸變

          線性漸變還可以在用色上進行區分,簡潔的用色可以給人帶來科技、炫酷感,在車載ui中較常見。豐富的漸變配色則更適合運營入口設計,有著年輕化、熱烈的氛圍。 



          1.4不透明度

          線性雙色可以和不透明度風格進行很好的比較,前者視覺更跳躍,個性更鮮明。而后者在使用時普適性更強,即豐富配色細節,又避免視覺過于跳躍(可以把它理解為同類色配色)。所以在大多數使用場景下,不透明度風格都是一個很好選擇。 



          1.5斷點

          斷點風格有線性單色&雙色該有的個性,并且在線性雙色基礎上繼續提升趣味性,使用需要注意產品目標人群年齡段。 



          1.6一筆成型

          該風格設計感和個性都極強,很考驗設計師對造型繪制的把控,功底不夠就很容易導致設計后出現識別問題。所以設計難度較大,且延展性較弱,難以表達復雜語義,使用需謹慎。



          2、面性

          • 單色

          • 雙色

          • 不透明度

          • 晶白

          • 磨砂玻璃

          • 等軸側(2.5d)

          • 漸變

          • 新擬態

          • 輕質感

          • 明暗質感

          • 寫實

          • 抽象

          • 卡通插畫

          • 像素風格



          面性與線性的區別在于前置視覺面積更大,整體視覺層級比線性高。下面部分和線性風格重疊的內容就不贅述。




          2.1單色



          2.2雙色



          2.3不透明度

          面型不透明度風格,通過調節前后不透明度可以帶來較強的空間感,使用場景較廣泛。



          2.4晶白

          晶白嚴格來說也算質感圖標(白色質感)的一種,常見于品類圖標設計,通過透明度、投影、漸變等參數調節,使整體立體感和空間感都很強。



          2.5磨砂玻璃

          又叫毛玻璃風格,是通過背景模糊,或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受,但由于容易與淺色背景相融,造成對比度不足難以識別的問題,所以在使用中需要注意無障設計。



          2.6等軸側

          也叫2.5d,有很強的趣味性,及識別度,適合重要入口或運營設計。但這類風格較為卡通,且表現花哨。使用需要注意應用場景及目標人群年齡段,避免干擾信息閱讀和不符和產品風格。



          2.7漸變

          這類風格可以很好的吸引用戶注意力,在電商、美食類產品中較常見,主要注意配色干凈協調。



          2.8新擬態(Neumorphism)

          新擬態圖標色彩相對單一,與背景融合度較高,通過高光、投影表現一定的立體感。通常是整個產品就是新擬態風格時才使用。所以該風格局限性較大,再有這類風格與背景對比較弱,無障設計問題較大。



          2.9輕質感

          通過大量漸變、投影來表現立體感,整體風格偏年輕化,常見在教育類產品中,使用注意配色干凈和諧。



          2.10明暗質感

          通過調節同一色相不同明度、飽和度來營造前后空間感,整體風格統一。


          2.11寫實

          這類圖標特點很明顯,有極高的識別度,目前美團外賣品類區入口就是該風格,整體偏年輕化。主要考驗設計師造型繪制、技法表現能力。



          2.12抽象

          通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術(裝飾)價值更大,不追求識別度,美觀即可。



          2.13卡通插畫

          這類風格既可以做圖標又可以做空狀態插圖,設計美觀有特色即可。



          2.14像素風格

          這類移動端界面較少見,目前只在一個海外電商產品(Jollychic)中看過,還有就是一些像素游戲中,比如「泰拉瑞亞」、「我的世界」。



          3、線面

          • 線面

          • 描邊插畫



          3.1線面

          和線性雙色圖標類似,趣味性較強,具備個性化特點,可以做Tab選中狀態。 



          3.2描邊插畫

          類似卡通插畫,在卡通插畫基礎上加入描邊。同樣顏色,在一些特定的前后交接處利用線條做區分,算是多一種設計表現形式,同樣美觀有特色即可。 




          4性格

          • 粗線

          • 細線

          • 圓角

          • 直角



          4.1粗線

          力量感、穩重、男性等感受



          4.2細線

          品質感、精致、女性化 



          4.3圓角

          安全、親和、年輕



          4.4直角

          嚴謹、正式、果斷利落 

          由于圖標風格繁多,所以以上列舉并不包含所有圖標風格。



          02 圖標設計流程

          • 明確語義

          • 關鍵詞詳解發散

          • 確定風格

          • 提取造型

          • 創意輸出



          1、明確語義

          圖標存在的目的是起引導作用,在豐富頁面視覺的同時,幫助用戶更快的獲取信息(當然圖標的使用意義還有很多)。設計師在將文字翻譯成圖標前,必須先理解其文字含義。因為最終呈現的圖標,需要用戶一眼能準確反翻譯其中含義(藝術抽象、裝飾類圖標除外)。

          在C端設計中,以Tab為例,一些常見文案:首頁、分類、發現、我的,這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說,目前在做一款網站搭建工具,后臺常會需要設計組件及對應的圖標,比如:滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標,在一定程度上會比較難精準傳達文案。



          2、關鍵詞詳解發散

          這一步有點類似情緒版使用,但不同的是:我們需要將確定的詞(A)進行詳細解釋,再將解釋文案中關鍵的詞語進行發散,得出一系列相關聯的詞(A1、A2、A3…)。有時間還可以根據這些詞找到對應的圖片,再看在這些相關聯的圖片中,有哪些細節可以傳遞最開始我們確定的那個詞(A)的意思。



          3、確定風格

          我們可以借助情緒版,根據產品定位和目標用戶描述,再結合應用場景,在目前已有的風格中找到符合產品氣質,符合當前模塊視覺層級的圖標風格。

          前面我們已經了解了目前常見的圖標風格有三大類:線性、面型、線面,其中還有很多細分,比如在線性中又分粗線(沉穩、力量)、細線(品質)、曲線(女性化),還有圓角、直角,每種類型所傳遞的感受都不同。在創意前期,我們將每個點合理進行隨機組合(如下圖)即可創造一種更新穎的風格。



          4、提取造型

          經過關鍵詞詳解發散,其實我們已經獲得了很細節點,接下來將這些細節點進行合理融合后,就可以得到代表同一語義但形式各異的基礎圖標樣式(此時還只是想法階段,可以通過手繪方式記錄組合形式,不用特別精細化)。




          5、創意輸出

          在設計執行前我們需要先了解兩個大知識點: 
          • 圖標設計規范

          • 圖標設計注意點


          5.1圖標設計規范

          • 常見圖標尺寸

          • 圖標盒子使用


          5.1.1、常見圖標尺寸

          在界面圖標設計中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



          5.1.2、圖標盒子使用

          什么是圖標盒子?其作用是什么?

          圖標盒子即圖標約束網格,來源于Material design。使用圖標盒子有利于使我們創造的系列圖標保持規范與統一。



          5.2圖標設計注意事項

          • 簡潔美觀

          • 易于識別

          • 細節統一

          • 像素對齊

          • 視覺大小一致

          • 飽滿透氣

          • 融入品牌基因



          1、簡潔美觀

          圖標是否美觀,會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中,通常會盡量減少不必要的細節,降低圖標復雜度,來幫助用戶快速識別。當然圖標也有豐富細節的做法,常見在一些重要運營入口上。



          2、易于識別

          識別度的問題,在最前面明確語義中就有提到過,這里就不贅述。



          3、細節統一

          在細節中包含:表現風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數等(不同風格圖標的細節不同,這里只是列舉部分),上述細節在系列圖標中都應保持一致。



          4、像素對齊

          在圖標繪制中,需盡量避免坐標位置xy或寬高參數出現小數點,以此保證最終導出的圖標是清晰的。



          5、視覺大小一致

          由于不同圖標外輪廓不同,就會導致哪怕在物理大小上相同的圖標(假設都是24x24),但視覺上可能還是會給人大小不一致的感受,因此我們需要借助前面提到的圖標盒子進行約束調整。


          6、飽滿透氣

          圖標的飽滿透氣,不一定需要加入很多筆畫(描邊、裝飾等)細節。而是盡可能在形成風格的同時,簡化能影響識別度的關鍵筆畫,通過調節筆畫大小、長短、位置使圖標達到一個最平衡狀態。


          以如下途牛_我的頁面_功能區圖標為例:

          圖中標紅圖標就存在飽滿度不足,及內部較擁擠的情況,第一感受是看起來不舒適,品質感比較低。除此外,還存在如下問題:


          • 圖標大小很明顯不一致

          • 設計語言不統一,有圓角有直角

          • 圖標風格不一致,有透明度+分割形式(我的保單)、有純透明度形式(專屬顧問、我的收藏)、還有其余單色實心形式



          7、融入品牌基因

          在圖標中融入品牌基因可以有效的提升產品品牌感,作為高階設計師必備技能之一,常見提取維度:

          • 顏色

          • 設計語言

          • Logo輪廓 


          以我之前的豆果美食項目為例,提取到如下細節:

          顏色:提取黃色、綠色兩類顏色 
          曲率(設計語言):品牌Logo走線順滑、自然、圓潤,個性鮮明 
          分離(設計語言):黃色區域與綠色區域雖不相交,但存在聯系。(分離間留白) 


          根據提取到的基因,最終得到如下兩套風格不同,但語言相同且都具備品牌感的圖標。


          Logo輪廓:在圖標中融入品牌logo外輪廓(Google Play),或根據logo輪廓結合應用特性進行延展(Microsoft)。



          03案例展示

          就以途牛為例,對我的頁面功能圖標進行優化。 


          1、明確語義

          根據文案進行詳細翻譯,幫助我們充分理解文案。



          2、關鍵詞詳解發散

          以「專屬顧問」為例:

          釋義:有專門的知識或經驗,受聘為機關團體或單獨個人提供專門咨詢的人。

          提取釋義中關鍵信息,生成關鍵詞:專業、專人,再根據關鍵形容詞發散一系列具象名詞。



          3、確定風格

          根據產品調性和模塊視覺層級以及考慮延展性,初步確定如下風格組合起來是比較適合:


          線性:雙色、不透明度、斷點 
          面性:單色、雙色、不透明度、輕質感、明暗質感 
          線面:線面 


          在實際查看中,發現Tab的風格為單色+不透明度+斷點風格。

          為了和Tab拉開差異,最終確定以如下風格進行組合表現比較符合產品調性:

          線性:雙色

          面性:單色、雙色、不透明度、輕質感、明暗質感

          線面:線面



          4、提取造型

          通過手繪或大腦想象進行造型構思,這里我就不展示手繪過程(行吧,我承認就是畫的太丑了不敢放)。



          5、設計執行

          由于不同風格對圖標造型構思有所影響,且圖標類型很多,不同特點組合起來樣式更多。案例精力有限,所以只以線性雙色風格做演示,希望大家靈活使用。


          這一步就是將手繪圖形矢量化,在矢量化創意過程中,我們可能會對手繪的圖形進一步簡化細節或新增造型,這都很正常。只需注意在整個繪制過程中遵循圖標設計規范,以及注意圖標設計注意事項即可。

          圖標盒子使用


          創意輸出


          Tips

          在繪制造型時需注意,圖標文案詳解中的關鍵詞也有優先級,以如下「禮品卡」圖標為例,是表達禮品的意思多?還是表達卡的意思多?這個會影響圖標中相關元素的面積大小。站在商業角度看可能會更傾向于方案2,突出禮品,來吸引用戶。站在入口文案清晰傳達的角度,可能我會更傾向于方案1。 

          1or2?


          最后對專屬客服進行多風格嘗試,最終效果如下:


          附上部分繪制過程中的淘汰稿:



          04圖標資源輸出

          在將圖標輸出給前端前,需要溝通好使用何種格式,目前常用圖標格式分為兩大類: 


          矢量格式

          • SVG:縮放無損、體積小、支持前端樣式修改參數、單色情況下方便前端修改顏色來表達圖標狀態,減少重復上傳。


          位圖格式

          • PNG:支持透明格式

          • JPG:兼容性強,適合大尺寸高飽和度圖像

          • GIF:動態圖標使用,缺點是透明情況下邊緣容易出現鋸齒。



          這里主要介紹靜態圖標中,svg格式在工作中如何輸出給前端同學使用(借助iconfont)。


          svg圖標交接方式:

          1、圖標資源優化

          在iconfont官方繪制指南中有描述,在導出前需要按如下規則優化圖標資源:



          2、選中圖標導出svg格式

          以Figma為例,優化圖標資源后,選中圖標將輸出格式選擇為導出svg。



          3、上傳iconfont

          在資源管理下,選擇需要上傳的位置。


          選擇上傳圖標 



          4、選擇顏色提交模式

          去除顏色并提交:適合單色圖標,去除顏色提交可以方便前端使用代碼修改參數,減少不同狀態圖標重復上傳。

          保存顏色并提交:適合多色圖標(注意:在單色情況下,選擇保留顏色提交,前端則無法通過代碼修改圖標顏色)。



          最后當我們把圖標都上傳好后,就可以將前端同學拉入團隊項目中開心進行玩耍。

          文章來源:站酷  作者:幺零三

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          在慣性思維下做UI設計有多糟糕

          ui設計分享達人

          我們今天主要來講4個主題:

          1.顏色使用的誤區-紅色的警示含義

          2.功能即按鈕?-兩者的區別與設計思路

          3.設計中的樣式-情理之中,意料之外

          4.產品體驗案例收集-寧缺毋濫

          5.減少步驟就能提高轉化?-少即是多,多即是少


          所以,這篇文章還挺有意思的,大伙讀讀看



          1.顏色使用的誤區-紅色的警示含義


          最近有多個小伙伴來問問題,老師, 我的產品色是紅色,那我用紅色的按鈕會不會給人傳達很強烈的警告?還有我們的產品色是冷色,如果不用暖色按鈕會不會沒有強烈的引導感,我好糾結啊!


          大家瞅瞅,他像一個好人還是壞人?





          吶,顏色情緒表達不在于本身,而是其使用場景。大家都知道顏色都有其兩面性,比如這樣,同樣是黑色系,但是左邊看上去是潮流、硬朗的感覺而右邊則有一些憂郁、沉重的感覺。





          所以顏色怎么使用要看用在什么場景,特別是主色的使用,如果本身是紅色或者暖色的主色,那么可以在以下地方使用:

          1.希望引起用戶強烈注意的地方(正向/警示)

          2.核心轉化按鈕(幾個不同層級)

          3.正在激活的板塊(標簽、分段)





          但是暖色為主色的產品核心轉化按鈕一定不會是冷色調


          所以不用在意主色是紅色而帶來的正負向情緒,因為到了不同場景它的含義自然會變化,如果本身主色為冷色調,那么主色和輔助暖色都可以用在核心轉化的按鈕上或者用其主色,我見過冷色為主色但是核心轉化按鈕是輔助色的情況,我總結了一下,大家可以看以下兩個產品的截圖,如果本身產品的輔助色使用場景和頻率很多,那么在核心轉化和重要按鈕上我們要使用品牌主色,但是如果在工具類型的產品中,輔助色的場景和出現頻率很少,那么核心按鈕和一些關鍵引導信息可以用輔助色。






          2.功能即按鈕?-兩者的區別與設計思路


          如果讓你在原有的界面中設計某個功能,你會如何設計?可能我們第一反應就是先給他設計一個按鈕。


          按鈕很好理解,我們先看看功能在釋義上怎么說:事物或方法所發揮的有力作用,


          阿喲,這一聽,簡直太抽象了!這就好比讓媒婆描述你的相親對象長的怎么樣小伙子看起來挺老實的,抽象但又很清晰!大家看下面兩個例子:


          第一個-刷新,無論是圖標還是文字,我們的預期是點擊之后就會實現在當前狀態/頁面的數據重新獲取



          undefined



          第二個-支付。支付也是一個功能,相比較刷新而言是一個復雜的系統的功能,但是它無法通過一個按鈕來實現功能的全部作用。



          很多同學在做信息架構的時候就很懵逼,那我要梳理的是按鈕呢還是這樣的功能呢?我好亂啊。當然,信息架構肯定不是功能的樹狀圖堆砌那么簡單啦,那個頂多叫做功能分類,信息架構需要包含更多的業務邏輯和狀態邏輯


          所以在這里就有三個結論:


          1.功能是抽象的

          有簡單有復雜,但他們都需要通過外部的、具象的元素來實現其作用。



          2.按鈕只是功能具象化的一種

          還有滑動、長按、甚至神經控制等等,如果大家玩過賽博朋克2077這個游戲就知道,義體的控制很多來自于大腦和神經,那么這些功能肯定不需要點擊這樣的操作行為啦,所以也不存在按鈕。



          undefined



          3.如非必要,勿增按鈕

          我們在做設計的同時要思考,一個功能可以以什么樣的形式存在,要滿足高效、簡約、符合心智模型等約束條件,比如做一個翻頁,沒有人會在app界面中設計一個下一頁的按鈕,抖音切換視頻也不會出現一個按鈕用來切換到下一個視頻,再比如公眾號文章收起需要通過滑動到指定位置,而非設置一個按鈕。



          undefined


          以后再讓你設計一個功能就不要直接做出一個按鈕喔



          3.設計中的控件樣式-情理之中,意料之外


          想把設計做的出彩一定要滿足兩個條件:1.符合常規認知  2.超出常規認知


          聽起來有點玄乎啊,第一眼看心知肚明,第二眼看我x,這個牛逼啊。


          那其實我們在做UI設計的同時也可以多些創意和想法,不要被慣性思維和熟悉的手法所困擾。有時候你想做一些創意設計但總是被“不統一”這樣的理由所駁回,麻煩把這篇文章轉發給駁回你的人,很多有意思的設計都被淹沒在這些“風險”提示里了。



          比如網易云音樂這里的tab,大家都知道tab的樣式和其交互方式,還有和segment的區別,那么如果既不想用segment樣式又不想讓用戶進行所有滑動怎么辦?


          undefined



          沒錯,他們在這個地方用了豎線隔開了,重新感受一下,是不是可滑動的感覺變弱了呢?


          還有卡片設計中如何添加標簽可以更順滑,如何讓一個按鈕自然的融合到另一個模塊里。



          undefined



          排版是否可以用異形設計,例如個人中心






          4.產品體驗案例收集-寧缺毋濫


          我看到很多同學正在體驗各種各樣的產品,然后把一些不錯的案例摘錄下來進行分析,我覺得這是一件很好的事,我在2年前就鼓勵大家這么做,因為這個也是作為一個UI設計師的基本功,除了視覺創意的積累以外也要有交互案例的積累。


          但是我發現很多同學有點南轅北轍了,我們需要收錄的是一些優秀的案例,何謂優秀呢,指的就是令人驚喜的功能,而非本該具有的或者無差別的功能(可以了解一下kano模型,這里不細說)。另外就是需要有分析的能力,不是什么案例都是優秀的,有些可能存在著不好的體驗。俞軍在其產品方法論中提到:用戶價值=新體驗-舊體驗-切換成本,所以價值大不大取決于新體驗是不是足夠好。


          現在看到的就是可能這個產品把字加粗了,也能寫出一大堆分析這個加粗的好處,或者一個卡片設計就能寫出非常有親和力,信息更聚焦這樣空洞的詞匯,這對于我們積累案例沒有任何的幫助。


          例如以下的案例,在編輯狀態返回系統會提示,從而滑出Actionsheet。如果不做用戶體驗會很差,但是做了,用戶并沒有很驚喜,這就是一個必備的功能而已,所以對于一個案例到底是否優秀我們需要盡量客觀的看待。




          所以很多交互案例并不是不好,而是還沒有達到能夠被我們收藏的地步,如果沒有撩到你的心,那我覺得咱們就矜持一些。



          那什么是一個比較好的交互案例呢?好的交互案例一定是更近一步解決問題和深入場景的,比如我們在場景分析過程中對于預判這個概念的理解,例如行動按鈕前置、替換、引導等等,例如像電影app在近電影放映前彈出取票碼一樣,這個功能如果不做,用戶體驗不會很差,因為依然可以找到這個二維碼,只是用戶想不到居然還可以這樣做,但是一旦研發出來,用戶會覺得非常驚喜,這種就是優秀的體驗設計。


          undefined




          再比如有些你可能覺得體驗好的案例其實還沒分析到位,就像高德地圖在到達目的地時會給你很多場景的補全和選擇,你肯定認為這很人性化啊,但是我在有一次使用“原路返回”功能的時候猶豫了。高德確實在幫助用戶解決問題,但是在這里顯然細節有待商榷。




          很多用過這個功能的同學會發現“原路返回”的文案是有歧義的,功能是好功能,正不正緊就看文案了。來,我們解析一下場景:用戶a通過高德地圖導航到地點x,路上非常擁堵,好不容易到達目的地后需要返回起始地,這時高德提供了一個“原路返回”的按鈕,他要不要點?


          為什么說這里有歧義呢?


          1.如果用戶開始的行駛過程很擁堵,你告訴他原路返回,他的潛意識會覺得原路返回是不是也很擁堵。


          2.原路返回到底是不是最佳路線,因為有時候來回路線的最優解并不是同一條馬路的左右兩側。


          所以,人是好人,正不正緊俺們也不知道??傊@個文案讓我不得不重新導航。


          小結一下,優秀與否需要親自深入的體驗,并且結合上下文、用戶、業務多角度的考慮,并非自己沒見過的就是優秀的設計,咱們寧缺毋濫,提高自己的標準。





          5.步驟少轉化率就高-少即是多,多即是少


          很多人一聽到轉化率就會把它和操作步驟關聯起來,只要能減少用戶的操作步驟和縮短任務路徑就可以提升轉化率。這個想法不能說全錯,但也不能直接運用減法去當作提高轉化的手段。



          泰思勒復雜性守恒定律

          不用管這人是誰,大家可以理解為能量守恒定律,也就是說在所有內容(功能、信息、元素)不變的情況下,步驟越少,單個步驟所承載的內容也就越多。比如你有100個球,給你5個盒子,平均每個盒子放20個球,但是如果拿走一個盒子,平均每個盒子就要放25個。


          表面上盒子少了,但是每個盒子多出了5個球,這就意味著原來簡潔的界面包含了更多的信息內容需要用戶去理解、操作、判斷。那我們可以說減少步驟就是提高轉化率嗎?顯然不行。


          比如我們看到馬蜂窩和12306在購買車票流程中的表現:


          馬蜂窩

          1.輸入起始地目的地

          2.選擇出發時間

          3.查看車次列表并選擇

          4.查看車次詳情

          5.選擇座位類型、添加乘客信息、選擇座位

          6.確認訂單

          7.支付



          12306

          1.輸入起始地目的地

          2.選擇出發時間

          3.查看車次列表并選擇

          4.查看車次詳情、選擇座位類型、添加乘客信息、選擇座位

          5.確認訂單

          6.支付


          大家可以看到馬蜂窩比12306多了一個界面,他們把查看車次詳情單獨用一個界面設計了,而12306則是座位類型、詳情、乘客信息、座位選擇都放在了一個界面,表面上看好像步驟確實少了,但我們能看到像第三方的購票軟件還有其他購票的選項,例如極速訂座、車票+酒店等,所以在這個場景中需要展開展示給用戶,那么如果把這些都放在12306的確認訂單界面就會非常擁擠,而且選中狀態也很不直觀。所以最好的解決方法就是拆成兩步。


          undefined

          undefined



          再來看個例子,在某個產品的1級界面中,有一個添加訓練計劃的功能。左邊是在1級界面中露出直接添加的按鈕,并且添加成功后在1級界面直接展示。右側則是進入二級界面進行添加。在步驟上來說顯然左側案例的步驟更短,那我們可以說左側的用戶體驗、任務效率就更高嗎?




          對嗎?大家可以思考一下。


          顯然不能直接說正確與否,因為我們缺少評判的標準和案例的背景對吧。首先左側案例在添加任務流程中確實占優,但是對于需要頻繁增刪改查的用戶而言就很不方便了,而且一直添加就會使首頁下方內容推到很底部大大降低了曝光。而右側的案例則更適合用戶進行批量操作。


          所以路徑的長短并不能直接表示轉化率的高低,那么有哪些情況可以縮短路徑達到提高任務完成效率的目標呢?


          1.減少步驟后不影響用戶對界面和內容的理解


          2.減少步驟后內容信息依然符合場景,不沖突


          3.需要實時檢查任務結果


          4.有足夠的版面可以進行內容合并


          5.合并后對任務目標不會造成歧義


          比如下面這個案例,一個書籍分類搜索原本的2個步驟是可以合并的,因為在原來的版本中,用戶如果想切換更高級別的分類需要退出再選擇,而一個界面其實就可以實現3級聯動的效果,當然僅限于這個案例,根據業務不同我們需要對這些多層級、多類目的分類做更多的考量。



          再來看一個案例,下面是一個預定籃球場地的流程,在這個流程中有幾個關鍵的節點:場地類型、日期和時間,因為籃球場地和老板需求的特殊性,所以我們不橫向去比較,我們可以來看看下面這個小程序的流程,預定步驟一共5步


          1.時間和場地的選擇

          2.查看場地詳情和說明

          3.選擇具體時間

          4.確認訂單詳情

          5.支付


          undefined




          我們先不討論里面信息字段是否合理(最后確認訂單還要填寫性別和名字是什么鬼,打個球還要查家底嗎),我們先來看這5個步驟是否可以簡化。


          一定是可以的,首先,日期和時間是屬于同一緯度同一場景的信息,我在幾月幾號幾點預約一個場地,這和看電影就完全不同了,每個電影院排期不同所以不能先把日期和時間都選了,但這里是可以一起選擇完成的。那么第三個步驟完全沒有必要,直接和第一個界面結合即可。





          另外,不要被先入為主的樣式給蒙蔽了,場地一定要做成列表嗎?除非特殊場地,每一個半場其實都是一樣的,可能在光線和設施上有些區別,但是對于經常打球和第一次預約的用戶來說其實沒有實質的區別,所以這里可以用宮格形式替代。


          然后查看詳情和說明個人覺得也比較多余,經常預約打球的用戶已經非常熟悉場地了,對于新用戶來說也只是看一下場地的環境,所以這個頁面本身內容就不多,所以可以直接和確認訂單詳情結合,將確認訂單頁的內容做減法。這樣是不是整個流程減少了兩步,大大的提升了任務完成的效率呢?





          最后總結一下


          每個人都有自己的慣性思維和刻板印象,有時候能幫助我們更高效的完成任務,但有時候這些潛意識的反應也會讓我們深陷泥潭而不自知。只有當我們深入剖析一個問題時,才能發現其本質,適當讓自己保持批判性思維是有幫助的。

          文章來源:站酷  作者:應駿

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          復盤和表達能力不好,到底要怎樣去提升?

          ui設計分享達人

          最近在社群里有人問,有什么總結和復盤的經驗嗎?感覺自己表達能力很差啊。今天,彩云就跟大家分享一些我的經驗,希望能幫到有類似問題的朋友。

          undefined 

          以上類似的問題,相信不少朋友都遇到過:

          1)明明自己做的設計不差,但不懂得怎么去跟其他人推進自己的方案

          2)明明自己已經很努力,設計能力也不差,但總是被其他能說的同事占了主導

          3)項目做完了,不知道怎么復盤和包裝,跟面試官介紹項目的時候感覺講不出亮點


          復盤表達能力在職場中的作用不用多說,大家都懂,那如何提升呢?我給你支幾招,絕對好用:

          1)善于記錄,把想法轉化成文字

          2)做事多想想附加價值

          3)多跟別人分享,輸出倒逼輸入

          4)學會模仿,掌握說話的節奏

          5)復盤的具體操作


          復盤和表達其實是2個能力維度的事,一個是文字總結提煉能力,一個是語言組織表達能力。所以,我在平時會有針對性的去做下面這些練習,分享給大家。


          1.善于記錄,把想法轉化成文字


          腦子中的想法和口中說的話,往往是比較零碎不系統的,而文字則讓你有更多時間思考和梳理。不管是從邏輯性還是簡練程度上,文案能力都會更加能鍛煉一個人的總結能力


          可能從一開始讓你寫大段的文章對很多人來說,是很困難的一件事,但你可以從小事開始。比如每天寫總結,記錄自己的想法,這些想法可以來自于學到的知識、突然的靈感或者對某件事的看法等等。


          關于記錄,我一般先快速寫下當時的想法,幾個關鍵字,句子不通順都沒關系。但一定不能拖延,要不然過了那個時刻,你可能就覺得好像沒啥值得記錄的或者干脆就忘記了。等寫的差不多了,再回頭來調整語句,調整邏輯問題,就跟設計做改稿一樣,當時記錄的是初稿,然后再不斷優化就好了。切忌完美主義者,動手記錄更加重要。


          undefined


          我自己是從畢業以來一直保持著記錄的習慣,而且隨著寫的量越來越多,寫的速度也是越來越快。比如這段文字,就是在班車上20多分鐘內寫下來的。


          undefined


          2.做事多想想附加價值


          高質量的記錄內容來自哪里?除了完成需求外,多想想這件事做完之后,還能給自己帶來什么其他的價值沒有?比如產品讓你做一個設計需求,做完它并過稿是最基本的要求,因為這部分是交換工資的價值。那還需要去思考,如何通過這個需求去放大價值。比如,這個需求能不能成為自己作品集中的一個作品?能不能把這個需求總結成一篇文章?能不能把這個需求做出亮點然后成為自己出去分享的案例等等。


          undefined


          如果答案是肯定的,有時間的話,一定要去達成后面的這些增值的部分。如果是有這些目標的話,你可能就會很自然的去記錄過程中遇到的問題,思考需求的前因后果,記錄最終的數據等等,因為你可能將來某一天要出去跟別人講的嘛。


          通過這樣的動作,就能加深對需求本身的理解,也就是所謂的深入。有了這些記錄和思考,讓你再去寫一篇總結也就是水到渠成的事了。


          3.多跟別人分享,輸出倒逼輸入


          把自己的想法講出來給別人,其實是一個非常考驗人的事。不知道大家有沒有這樣的感覺,明明這個項目是自己從頭到尾跟進的,但讓你完整的跟別人講出來卻發現很有難度。


          undefined


          要跟別人講明白一個道理,就必須自己真正理解透徹才可以。這就會倒逼你,真正梳理好自己的所學。而當你真正跟別人講過一次之后,關于這個知識點或者項目的細節,你會印象深刻。


          我習慣在學到一個新的知識點后,興奮的找同事朋友們去分享我的收獲,一方面是能加深自己對知識的理解,進一步鞏固所學,另一方面也想鍛煉自己的表達能力。


          演講也是需要練習的,沒有誰天生就擅長,講的多了,應變能力、總結能力都能提上來。


          4.學會模仿,掌握說話的節奏


          表達能力怎樣提升?模仿是一個很好的方法。我自己經常會去看一些大佬的演講,像俞敏洪的演講我是非常喜歡的。然后還有TED的演講,佩服他們能在短短5-10分鐘內,把一個內容很好的講完,并且聽眾還容易理解。


          學習大佬們在什么情況下會停頓,如何與觀眾進行互動,甚至包括演講時的姿態,表情,手勢都可以模仿和研究。聽的時候,帶著目的去觀察,相信能學到很多平時不注意的細節。


          undefined


          注意說話時的停頓和語速,可以理解為設計中的留白和行距。好的留白間距,能使得讀者獲得更好的閱讀體驗,演講也是如此。但說的容易,做起來難,如果缺少練習,在實際的匯報、述職或公開演講中由于緊張或者其他狀況,很難讓你從容應對。


          這部分也是需要對應的學習和練習的。


          5.復盤的具體操作


          針對實際項目,一般可以從以下6個方面來進行復盤:

          undefined

          1)定位目標

          從前面說的記錄中,或者可以咨詢產品、運營,某個具體的需求目標是什么,從產品維度,運營維度,設計維度等多角度進行目標回顧。


          2)應對過程

          簡單說,就是自己遇到這個需求后是怎么去解決這個問題的。仔細思考自己的應對過程,并分析過程中有沒有可以改進的點。


          3)評估結果

          最終的結果,有沒有達到預期?是好的還是不好的,把一些數據和用戶評價拉出來,作為結果。


          4)分析原因

          不論結果如何,都應該分析其成功或者失敗的原因,從過程中的每一個環節去思考,這些經驗都是最寶貴的。


          5)發現規律

          從原因中找到規律,這個規律也就是所謂的方法論,這些方法論是否具有普適性,也就是你得到的這套經驗能不能復用到其他項目中,或者沒有做過此類項目的設計師拿到你的方法論,能不能很好的復用你的經驗把項目做到你這樣的結果或者是能做的更好。


          6)沉淀文檔

          最終,把這些方法論、設計規范、經驗教訓等等,以文檔的形式記錄下來,就完成了一個真正的完整項目沉淀。這些也是設計師做需求時的一種價值放大,很多優秀的資深設計師都擅長做這件事。


          在面試或演講時,也應該按照這樣的邏輯順序去講你的項目,心里有譜,講話才靠譜。


          總結


          復盤和演講,在職場中都是非常重要的能力,但那些能說會道的人,PPT寫的很厲害的人,也并非天生就如此。他們也都是后天在工作中不斷的練習得到提升的。


          像解決所有困難的事情一樣,學會拆解,總結能力也是如此。

          文章來源:站酷  作者:彩云Sky

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          我們對2021年的用戶體驗有何期待?

          ui設計分享達人

          用戶體驗設計是一個動態領域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數字世界和現實世界之間的互動方式發生了突然的變化。人們不僅開始在網上花費更多的時間;他們的思考方式和表現方式也發生了不同。

          本文主要闡述2021用戶體驗的趨勢,我們相信這將在新的一年里占據主導地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


          語音介面

          我們在2020年UX狀態預測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設計中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應忽略它。

          毫無疑問,到2021年,語音聊天機器人和虛擬助手將繼續流行。用戶在數字體驗方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術的迅速發展使品牌別無選擇,只能在其產品中包含基于語音的功能。

          已經有許多企業為廣泛的VUI實施奠定了基礎。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。



          簡約的UI

          極簡主義可能是當今視覺設計中最明顯的趨勢之一。用戶正在體驗越來越多的網站所有者想要傳遞的關鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉化網站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設計應運而生的地方。

          但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優雅”和“高效”。盡管必須使用數量有限的顏色,設計元素和明亮的組合,但UX設計人員仍然有很大的發揮空間。此外,元素的功能最為重要,正確突出產品功能并傳達正確信息的能力需要大量的創造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




          內容,消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦,這意味著網站所有者應努力使自己的UX文字簡潔明了。


          負空間

          負空間是用戶體驗設計的一種大趨勢,它已經脫離了對簡約UI的市場需求。簡而言之,負空間是頁面布局中對象周圍(宏空間)或對象內部(微空間)的空白區域。它已經成為獨立的設計元素,在視覺美學和用戶體驗優化中起著至關重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創建的網站就是很好的例子。






          留出一定的空間,在設計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負空間的主要功能是整理網頁,以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。




          負空間有時也稱為“空白區域”或“留白區域”。所有這些術語都是可以互換的。當區域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。

          不完美的元素

          在發生COVID-19大流行之后的在線體驗將與我們習慣的在線體驗不同。UX設計以相關方式反映了缺陷。為了使品牌的數字化形象更具關聯性,設計師有意在版面設計中實現了一些“缺陷”。 它可以是任何東西,從手繪對象到構圖或頁面的不尋常元素。







          通常,不完美的設計可以很好地證明品牌的身份并突出其獨特性。但是,如果要應用這種UX趨勢,則必須記住一個關鍵規則:必須保持平衡。如果你做得過多,那是行不通的。



          同態

          中性風格是UI設計中其他兩種大規模方法(擬態和平面設計)的組合,它們通常被認為彼此相對。擬態化是關于模仿現實世界中的物體以及我們與物體交互的方式。

          幾十年前,當需要使用超現實元素來創建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設計是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

          同質性兼顧了兩者的優點。它使用圖形強度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創建它們。中性風格不會將現實主義推到極致。取而代之的是,它努力實現淺色和微妙對比度的“柔和”外觀。



          在過去大約一年的時間里,同質化一直是UI / UX專業人員中討論最多的主題之一。盡管仍然沒有很多真正的數字產品的用戶界面遵循這種方法,但許多設計人員對該概念感到興奮。像Behance和Dribbble這樣的專業平臺已經包含了許多同態的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現在我們的手機和筆記本電腦中。



          3D元素和視差

          視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是,我們仍然觀察到這些用戶體驗趨勢正在逐步普及。

          首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網絡上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務品牌的網站和應用上。




          另一種趨勢是嘗試在一個界面中結合視差效果和3D圖形。使用視差滾動時,網頁背景和前景元素以不同的速度移動。僅憑它就能產生深度感。通過為此添加3D對象,您可以創建一種真正的身臨其境的體驗,并將在用戶的記憶中保留很長時間。


           



            

          不對稱

          隨著我們設備屏幕的變寬,UI / UX設計中出現了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術和網頁設計中與極簡主義相反的一種風格。但是,如果與其他殘酷的設計元素分開使用,它可以使您的網站看起來有趣,同時使它保持微妙和優雅。


          不對稱布局的UI / UX趨勢通常與其他創造性的Web設計技術一起實現,例如破碎的網格,重疊的元素和分割的屏幕。您也可以將不對稱性應用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




          但是,請務必記住,非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進,并幫助品牌強調重要信息。

          動畫制作

          今天,當我們在互聯網上進入隨機網站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行,并且使用頻率不斷增長。

          除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命,使它們更具個性。



          如果要在用戶界面設計中使用這種軟件開發趨勢,那么明智地執行此操作至關重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計劃的要早離開網頁。動畫元素也不應使用戶界面不必要地復雜。它們始終必須是相關的,有價值的和平穩的。

          信息架構

          信息體系結構是在頁面上組織和構造不同內容的方式。它是以用戶為中心的設計(UCD)的基本要素,旨在使用戶的數字環境更加舒適。與用戶研究和可用性測試一起,構建有效,有用且一致的信息體系結構是UCD流程的必不可少的階段。



          為了創建一個實用的信息體系結構,UX設計人員需要對產品的目標受眾,其行為以及使用數字解決方案的原因有深入的了解。用戶應該無需花費太多精力就能獲得所需的結果。因此,在設計過程的線框階段始終必須考慮用戶的目標,清晰的導航和內容表示(包括盲點監視)。

          最后的想法

          我們創建此文章是為了讓您在當今競爭異常激烈的數字世界中站穩腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網站的用戶體驗。即使用戶期望很高,它們也可以使您的產品在視覺上對目標受眾更具吸引力。

          文章來源:站酷  作者:ZZiUP

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合