<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>

          首頁

          用戶行為分析和以用戶為中心的設計

          鶴鶴

          用戶行為分析,認識用戶滿足用戶最直接要求為設計中心


          用戶行為分析

          用戶行為是指用戶在使用產品時的行為,針對網站而言,就是用戶在進入網站后所有的操作。網站用戶行為分析,就是在獲得網站王文量基本數據的情況下,對有關數據進行統計、分析,從中發現用戶訪問網站的規律,并將這些規律與產品目標及策略相結合,從中發現目前網站存在的問題,為進一步改善網站,滿足用戶需求,提升用戶體驗提供依據。


          常見的用戶分析內容包含以下幾個方面內容:

          (1)用戶在網站的停留時間、跳出率、回訪率、新用戶、回訪次數、回訪相隔天數;

          (2)注冊用戶和非注冊用戶,分析二者之間的瀏覽習慣;

          (3)用戶所使用的搜索引擎、關鍵詞、關聯關鍵詞和站內關鍵詞;

          (4)用戶選擇什么樣的入口形式(廣告或者網站入口鏈接)更有效;

          (5)用戶訪問網站流程,用來分析頁面結構和網頁覆蓋數據;

          (6)用戶在頁面上的網頁熱點圖分部數據和網頁覆蓋圖數據;

          (7)用戶在不同時間段的訪問量情況等;

          (8)用戶對于網站的設計及字體配色的喜好程度等。


          通過研究發現,80%的用戶僅僅使用了軟件20%的功能,而那些沒用的功能不僅浪費開發時間,也使軟件更加難以使用。一個成功的軟件應該是簡練精干的,可以單獨職能化的化解決的單個問題,要以滿足用戶最直接要求為 i設計中心。


          一、了解用戶需要什么

          很多網站往往為了滿足不同用戶的需求而增加功能,增加的功能必然需要再界面中用視覺呈現出來,這就會使網頁內容越來越多,很多的功能摻雜在一起,如果不經過過濾,必然會違背原來閱讀的初衷,所以每一個功能的增加都要慎重。


          用戶對于互聯網功能需求也和對軟件的功能要求一樣。既喜歡簡單的,也喜歡復雜的。而且用戶的體驗需求也會隨時隨地的發生變化。這里的復雜不是指很難用、流程超級復雜、容易出錯的用戶體驗,而是指豐富的功能。


          首先如何讓用戶體驗更簡單呢?當然將復雜的功能去除是最好的,如果實在無法去除某個復雜的功能,那就應該將其隱藏。因為大多數情況下,不常用的功能要比經常使用的功能占據更多的空間。


          真正好的用戶體驗其實是給用戶所需的任何功能,為用戶設計一款“復雜”的產品,并將這款產品從表現上簡化,讓基礎功能操作簡化,給擴展功能保留使用入口即可。這個設計思路最具代表性的例子就是Microsoft Office和Adobe

          系列產品。

                        


          用戶的需求并不是一層不變的,短期內用戶會因為某種強烈的需求要一個產品。隨著市場和行業的不斷發展,用戶對于一個產品的評價也會隨之發生變化。例如肯德基剛進入中國市場,被人們認為是一種的象征,小朋友以吃一次肯德基為榮。隨著經濟條件的發展,人們對于肯德基的體驗就完全不一樣了,熱量過高,不利于健康。這是一個很典型的對一個產品評價的變遷的過程。


          用戶的期望值會因為因素而發生變化,有的來自外部的環境,有的來自產品自身,有的來自用戶成長。這些影響期望值的因素都會相輔相成的影響。有的時候不是我們的體驗或者產品變了,而是用戶發生了變化,所以用戶體驗的設計,除了要考慮產品本身以外,還要考慮用戶所需要的。


          二、遵循用戶的習慣

          用戶通常會根據個人喜好做事,這就是習慣。習慣沒有好壞之分,關鍵要看根本的是什么。從用戶體驗的角度來說,任何產品都可以分兩種:遵循現有用戶習慣的產品和顛覆用戶習慣的產品。


          在設計網站時可以在技術上創新,在業務模式上改變,也要在以下幾點上遵循用戶的習慣。


          1、用戶的生活背景及文化背景

          生活和文化背景是必須要遵循的習慣。想去顛覆或是磨滅一個群體甚至是民族的習慣,基本上會付出慘重的代價。例如使用紅色表現喜慶,白色表現悲傷,是中華民族幾千年的一種傳統習慣。如果想去改變這個習慣,使用其他顏色肯定起不到好效果。比如:可口可樂官網就是用紅色做的主色調,而紅色也與“可口可樂”品牌主色調相統一,點綴少量黃色,非常符合中國的傳統文化,也更容易使中國人接受。


          2、用戶的生理狀況與需求狀況

          在設計網站頁面時,還要考慮到網站用戶群體的基礎屬性,例如年齡層、身體承受力等??梢詫㈨撁嬷械奈淖趾蛨D片做放大處理,使老年人可以清楚的看到內容。比如一些老年網站,會采用大號字體,強對比色便于閱讀,而且在設計的時候也不會使用過多的色彩,雖然整體視覺可能顯得簡陋不夠豐富,但是充分的考慮了老年人人群的特點。


          2、以“自我為中心”的心理

          人在評定事情好壞的時候,通常喜歡以自我為中心,所以用戶體驗設計時,必須滿足用戶這種需求。使每個用戶可以體會到以“自我為中心”的優越感,這樣用戶就會成為最忠實的客戶。例如很多人沉迷于網游就是因為在現實生活中會受到各種各樣的限制,而無法實現真正的以自我為中心,而在網游的世界里卻可以完全實現。


          二、顛覆用戶的習慣


          在設計網站時,設計師通常會根據網站內容把網站劃分為不同的區塊,然后在分別進行美化。設計師在思維定勢中 自我感覺良好,一旦突破了思維定勢就會有新的收獲。作為用戶體驗的設計師來說,有下面兩個方面可以顛覆。


          1、改變一些有獨特性的頁面設計

           在設計網站時,有很多頁面都具有獨特性,例如注冊頁、登錄頁和搜索頁。這些頁面用戶只會訪問一次或者幾次,而且這些網頁本身也是在網站發展的同時逐步完善的。所以,在用戶體驗的設計中,這些習慣就可以顛覆的。設計師可以根據個人的喜好對這些頁面進行設計、優化和修改,而不會影響用戶的習慣。


          2、發展中的知識和技術

          在網站設計中需要結合當前的潮流趨勢和的技術來表現網站,這樣才能給用戶帶來全新的體驗。頁面中流暢惡化便捷的交互應用,可以給用戶帶來良好的體驗。

          尊重用戶秀感可以快速讓用戶接受網站,同時也會由于尊重了用戶的習慣而減少產品對用戶的刺激,會使得用戶很難成為網站的忠實用戶。另一方面,如果不尊重用戶習慣,用戶可能很難馬上接受。所以在用戶體驗設計時,要根據網站具體情況自我權衡。

          最好的辦法就是在網站核心用戶體驗不變的基礎上,增加新功能、設計風格逐步變化、進行網站整體融合。

          轉自:站酷-忻蕓



          花了很多時間做設計分析,但對畫稿子沒什么幫助?

          鶴鶴

          如何產出一個對實際落地更有指導性的設計分析?本文結合實際項目中常常會遇到的一些問題,總結了前期設計分析的一些實踐經驗。

          設計分析是作為交互設計師必備的一項基礎能力,一套有效的分析思路可以幫助我們找準設計發力點,更效率的推導出合理的設計方案,它是一種思維能力,也是一種方法工具,但是在我們的實際項目中,常常會遇到這樣幾種場景:

          • 新手設計師或者第一次做活動的設計師,設計分析不知道要如何入手

          • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

          • 分析過程中發散了很多很好的點,但最后大多都落不了地

          這些情況常常會導致設計分析流于形式,套用了很多方法、花了很多時間、輸出了很長的文檔,內容看上去似乎很豐富,但落地的方案卻平平無奇,甚至也會自我懷疑設計分析真的有用嗎?

          總結下來,會出現這些場景的原因有兩點:首先是設計分析太泛,沒有聚焦到核心問題;其次是時間分配不合理,沒有抓到發力重點。那么結合我們目前的項目來看,怎樣做一個更有用的設計分析呢?

          活動中常見的項目類型

          根據活動產品化設計思路,可以把我們的日常項目分為兩類:迭代型項目以及探索型項目。

          迭代型項目是指過往已有過積累的成熟項目,例如大促主會場、我的專屬會場、榜單會場、攻略等等,通常是一些已經比較固化的經典業務,或基礎的功能類業務;探索型項目則是一些全新的業務方向,例如下沉會場、直播會場等等,剛處于進入期或成長初期。

          undefined

          如何完成一個有效的設計分析

          1. 迭代型項目

          迭代型項目容易陷入的一個誤區是時間分配不合理,沒有抓到發力重點,尤其是對于很多新手設計師來說,往往大部分的精力花在重復之前已經做過的內容,比如花了很多時間重新去分析用戶、分析方向、分析行業趨勢等等,但是對于已經比較穩定的迭代型項目來說,這部分背景內容相對來說已經比較固化(除非有明顯的變化),這就可能會導致重復分析出來的結論跟之前的差別并不大,也很難帶來實際業務提升。

          undefined

          既然迭代型項目過往已有過經驗和策略的沉淀,也經歷過多輪的數據迭代,核心思路應該是先定義要解決什么問題、然后才是如何解決,這樣才能找準關鍵發力點。

          要解決什么問題

          首先要思考是不是真的有問題,沒有問題的項目也可以不用再花時間做分析,效率做即可,例如像全部會場,本身的業務模式就比較簡單,過往的效果也相對比較穩定,如果不考慮進行突破性的創新,通常是可以效率復用的,這種時候則不需要再去做分析,畢竟也要考慮投入產出比。

          那么怎么定義要解決什么問題呢?有三個常用的思路:看數據、看用戶反饋、看運營策略。

          第一,從數據分析中找到關鍵問題,例如根據618的項目數據復盤,我們發現預售會場、品牌會場的頁面跳失率較高,那么雙11核心可以圍繞“如何降低跌失率?”“如何提升流量利益效率?”去進行分析,從而推導出更有針對性的設計策略。

          undefined

          第二,根據用戶反饋來找到關建問題,例如過往的主會場,用戶調研一直都會反饋主推樓層太長而找不到感興趣的內容,那么可以圍繞“如何更好的進行需求匹配?”“如何提升屏效?”來思考和分析,解決實際存在的問題,才更有可能提升體驗和數據。

          undefined

          第三,結合運營策略,很多業務雖然已經相對穩定,但隨著每次大促戰略的變化,運營策略上也會有一些新的需求,那么就根據這些差異化的訴求去找到發力點。例如針對我的專屬會場,在原會場定位不變的情況下,在近兩次大促中運營側都提出需要由這個會場來承載平臺服務內容曝光的訴求,那么服務內容如何匹配“專屬”會場的用戶心智,則是這個會場可以重點解決的問題。

          undefined

          如何判斷真正有效的解決方案

          在定義清楚核心要解決的問題后,就可以按照常用的設計方法進行方案的推導,在發散解決方案的過程中,如何判斷方案的合理有效,確保最后的可落地性,是讓我們設計分析有價值的關鍵,因此總結了兩個常用的技巧。

          首先要理解業務邏輯,減少無用的策略發散,很多時候我們的方案很難推動落地的原因,是沒有考慮到業務的訴求,越能夠深入的了解業務,才能更好的解決業務側的顧慮,保證方案的可落地性。

          其次是要跳出來從整體來看優先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節,有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關注到整體優先級,因此要學會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

          2. 探索型項目

          探索型的項目沒有過往的參考依據,相當于需要從零開始去探索如何做,對于設計分析的能力要求會更高,那么常常容易陷入兩種極端相反的誤區,要不就是容易被方法論套路,設計分析過泛但得不出實際有價值的結論,要不就是完全沒有頭緒,屬于想一步做一步的類型,分析的內容之間缺乏邏輯。

          undefined

          因此,探索型項目的核心思路是要先有分析框架、再做縱向深挖,就像畫交互稿的過程一樣,需要先定義交互框架,縱再進行交互細節的打磨,才能夠保證設計效率及效果。

          確定分析框架

          確定分析框架的過程主要分為兩步,一是先想清楚要分析哪些內容,包括哪些環節是必要的,哪些是重點的,時間要怎么分配。例如當我們第一次做寵物品類活動時,需要對這個品類有深入的理解,因此我們在前期需要去分析養寵人群的特征、寵物行業的發展現狀、京東寵物貨品的優勢等內容,而如果我們做的是一次大促的綜合會場,其主要用戶群體如果跟常規站內主流群體并無差異時,則不需要再花費大量的時間單獨去分析用戶畫像,因此,需要結合項目情況先想清楚需要分析的內容、以及這些內容的必要性和優先級。

          undefined

          第二步是梳理清楚內容之間的邏輯關系,常見的邏輯結構有兩種,一是遞進式的推導(A→B→C),分析維度之間是先后關聯的,通過嚴謹的邏輯步步推導而來,例如先梳理用戶畫像、才能進行用戶行為痛點的分析、進而推導解決方案;另一種邏輯結構是進行綜合歸納(A+B→C),即通過幾個不同的維度綜合推導,例如經典的五導家分析方法,結合用戶目標以及業務目標綜合推導出設計目標。

          undefined

          在很多設計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應用。以下是根據我們日常項目梳理的一些常用分析框架。

          undefined

          縱向深挖如何得到有價值的策略

          有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

          首先,策略要足夠具體、有差異化,盡量避免提出過于籠統的結論。例如針對如何提升流量利用率比較泛的策略就是要進行流量精細化運營,這個大的方向沒有錯,但如果只到這一步是很難指導具體內容落地的,所以需要細化到流量的渠道有哪些、這些渠道有什么樣的特征、針對不同的渠道用戶可以用怎樣的內容吸引他們,才能夠更準確的判斷是否會存什么問題。

          其次,策略最好能夠關聯驗證指標,可以參考UGD數據增長思路,在推導策略時要能預判它能帶來哪些數據指標的提升,以保證設計分析的結論是有理有據的。

          用戶體驗升級指南—規避用戶“無意識錯誤”的防錯法則

          鶴鶴

          用戶在使用軟件時不可避免的會進行誤操作;
          應如何通過設計,使得犯錯變得困難,從而提升產品易用性。


          大綱要點:

          1.行為預判     

          2.多重保險 

          3.限制行為      

          4.唯一性原則

          5.默認項復用      

          6.特征明顯

          7.感官反饋



          1.行為預判,走在用戶前面

          通過固定場景,判斷用戶接下來的操作,或對某些操作做是否執行的處理。

          ①.輸入銀行卡號,軟件在你輸入完成時自動識別發卡行,避免手動選擇錯銀行導致轉款失敗。 


          ②支付寶轉賬,在聊天窗口輸入純數字,系統會自動彈出“給對方轉賬xx元”的懸浮條提示,點擊懸浮條即可進行轉賬操作。對用戶誤把轉賬發送成信息的行為進行預判,提升產品易用性。 



          2.多重保險 ,二次確認執行。

          生活中很容易產生對文件進行誤刪或提交的誤操作,多重保險是對不可逆的操作進行雙重確認后再實施執行。

          如ios信息刪除頁面,刪除信息需進行以下三個操作:

          ①左滑調出刪除按鈕(把“隱性”特征轉化為“顯性”特征)

          ②點擊刪除,“確認刪除”彈窗彈出

          ③確認刪除,多重”確認“降低誤操作 



          3.限制行為,使錯誤無法發生。


          在固定字符的表單中。對其輸入的內容自動格式化,

          如支付寶注冊頁面,只提供數字鍵盤且只能輸入11位數,從而限制用戶行為。

          直接從源頭杜絕誤觸其他字符或多輸入的誤操作。

          當你開始輸入時,系統會自動將手機號隔成XXX XXXX XXXX的格式,方便用戶以最快的速度核對已輸入的手機號,畢竟相對于一長串的數字,被分成小塊的數字組合更容易被記住和看懂。



          4.唯一性原則,一個頁面干一件事

          按照順序分步進行,避免用戶在一個頁面完成多個任務。

          如接收驗證碼時,保持頁面的功能性是唯一的,手機號注冊頁只能填寫手機號,驗證碼頁面只能填寫驗證碼。利用頁面的唯一性減少誤操作率。



          5.默認項復用,優先預知用戶所想

          同一件事做兩次出錯的幾率肯定比做一次要大得多,對用戶已錄入過的信息儲存,以便如需再次錄入時的直接填充。

          如寄快遞購物時的填寫地址,定機酒時輸入人物信息,直接復用歷史信息,省時又不會出錯。 



          6.特征明顯,對比突出可適當夸大

          視覺效果上,夸大功能性特征,能夠有效地使用戶準確獲知該區域可實現的功能,向用戶呈現清晰的行為結果。


          ①如刪除彈窗,按鈕中文字的描述應決定用戶接下來的行為。

          “確認刪除”是用戶行為,”確定“則是對該彈窗內容的時間判斷,用戶是不會對彈窗內容進行細看的,所以在按鈕文字上就應明確用戶,準確地告知按按鈕所對應的行為。

          ②如Iphone的關機界面,app 內各個入口刪除等可操作按鈕



          7.感官反饋,視覺外的強化輔助

          解鎖界面不同狀態下的震感反饋,提示警告類的聲音反饋,警示錯誤的發生。







           轉自:站酷-假裝不是設計師




          谷歌的 10 個“Material Design”設計要點(上)

          周周

          編輯導讀:如今,谷歌可以說是科技領域規模最大、最具有影響力的公司之一。正因為如此,它們的數字產品設計會對整個行業產生巨大的影響,成為人們競相模仿的榜樣。在該公司的UI&UX(用戶界面&用戶體驗)設計指南中,設計師們提到了10條原則,不管是iOS還是安卓系統都同樣適用。在這篇文章中,作者從這10條指南出發,加上自己的經驗和相關案例,在設計方面為大家提供一些建議,希望對大家設計產品有幫助。

          1. 通過圖標和動畫傳達意思

          圖片來自Material

          在沒有其他方法的情況下,圖標可以成為理想的指示工具?!豆雀璨牧显O計指南》

          在《Design of Everyday Things》一書中,有“以人為本的設計之父”之稱的唐·諾曼(Don Norman)闡述了他對圖標的理解:圖標就是代表動作、同時可以指示該動作以何種方式完成的元素。在數字產品中,我們很少會出現“左滑-刪除”這樣的文字指示,而是通過左滑的動作引出一個紅色的小垃圾桶來闡明“左滑就會刪除”這樣的設定。

          在用戶和產品交互之前,插入動畫效果?!豆雀璨牧显O計指南》

          如果我們希望一款數字產品有著極簡主義外觀,那么我們可以借助動畫來達到這一點。在上圖的例子中,最開始畫面中甚至不會出現垃圾桶的圖標。在我們手指滑動后,也就是人機交互的動作產生之后,才會出現這一垃圾桶,同時也會強化“滑動表示刪除”這樣的信息。動畫效果有效簡化潔面、改善用戶體驗的功能。

          2. 有動畫效果的圖標

          圖片來自Medium|制圖Eddy Gann

          動畫可以展示圖標所代表的執行動作,從而增加流暢感和愉悅感。在兩個視覺效果之間插入帶有動畫效果的圖標,可以反映這兩個視覺效果之間的關聯?!豆雀璨牧显O計指南》

          在兩個動作之間增加一個過渡的動畫,這個效果我們應該很熟悉。最簡單的例子就是“播放/暫?!卑粹o。在點播放后,該圖標變成了暫停按鈕;點下暫停按鈕,該圖標又變成了播放按鈕。這個變化的圖標展示了播放和暫停兩個動作之間的關系。

          這只是一個簡單的案例?,F在想象一段更加復雜的經驗:比如將某個產品添加到購物車中,購物車圖標會出現裝進貨物的動畫效果;或者想象某一功能無法使用時圖標的彈出效果。

          帶動畫效果的圖標本身并不復雜,我們可以在Adobe XD中完成:通過給圖標添加預設效果,或者加入淡入、淡出的效果即可。

          動畫效果可以根據需要設計出簡單或復雜的運動軌跡。圖標雖然小,卻是影響用戶體驗非常重要的一環,我們可以通過設計復雜的運動軌跡來強調它的重要性?!豆雀璨牧显O計指南》

          請記住,如果界面上所有的元素和圖標都在動,那么用戶可能會不知所措。過度使用這一方法反而會削弱你想強調的重點。給圖標添加動畫應該適可而止。

          3. 調色板的生成和使用

          調色板生成工具|圖片來自Medium

          調色板生成工具(Material’s Palette Generator)可以調出任何你需要的顏色,色相,亮度,色度等都可以通過一系列算法調節出來,通過算法調出的色彩實用又美觀?!豆雀璨牧显O計指南》

          如果我們無法使用谷歌的調色板生成工具,手動調色就會變成一件非常麻煩的事。調色板生成工具最大的好處就在于它自動給你調出了同一種顏色的不同形態(如藍色從暗到明、從深到淺的形態),你就不需要再對照標準調色板一點點矯正了。不過即使沒有這樣的自動生成工具,你也應該仔細檢查并矯正自己的調色工具。

          4. 顏色

          • 在考慮如何使用顏色或顏色相關的問題時,指南中還提供了給界面選色相關的技巧和工具?!豆雀璨牧显O計指南》
          • 選擇令人難以忘記的色彩,以增強產品的品牌風格?!豆雀枭试O計指南》

          顏色對于數字產品的重要性,就像是鹽和胡椒粉對吐司的重要性一樣——添加太多了,就蓋過了吐司自身的風味;太少了,味道就會變得寡淡。在選擇配色以求增加品牌視覺效果時,一定要仔細考慮清楚給哪里添加什么顏色。

          通過有節制地在APP里添加顏色,你還可以突出相應的內容,如文本、圖片、按鈕等。你可能已經注意到了,Instagram和Twitter上面布滿了色彩鮮艷的圖片和圖標,與之相對應,它的用戶界面非常簡潔,不會喧賓奪主。

          色彩也可以是一種交互元素,要考慮它們在什么地方交互,希望達到什么效果。最重要的元素要用最突出的色彩?!豆雀枭试O計指南》

          當一個元素的色彩與周圍環境形成對比時,用戶會更理解它的重要性。我們可以給重要的元素增加“色彩權重”,這個概念是說增加色彩的飽和度,使用更加大膽、更吸引人的色彩,制造視覺沖擊。

          另外,我們可以將重要的信息加粗顯示,讓它在第一時間進入用戶的眼睛。簡單來說,如果一種信息比另一種信息更重要,那么前者就要在色彩和篇幅上勝過后者,好讓用戶直觀地進行區分。

          5. 文字類型生成工具

          文字類型生成工具|圖片來自Medium

          Google Fonts是谷歌研發的一款文字類型生成工具,可以使用它來調節字體、大小等。您可以根據需要調整和優化產品的文字設計?!豆雀璨牧显O計指南》

          字體設計是一門藝術,它不僅關乎選擇某一種具體的字體,更設計如何使用、粗細調節、比例調節等,目的是增加界面的可讀性,從而增強產品的實用性。谷歌研發的這款文字類型生成工具為設計師提供了多樣的選擇和排版支持。通過這一款文字類型生成工具,可以節省時間,迅速生成段落、標題、正文、按鈕等。


          文章來源:人人都是產品經理           作者:Danny Sapio.    譯者:Michiko


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

          辭典精譯 | 在UX中正確使用動畫的終極指南

          濤濤

          如今,很難用界面動畫給人留下深刻的印象甚至驚喜。它顯示了屏幕之間的交互,解釋了如何使用該應用程序,或者只是引起用戶的注意力。在瀏覽有關動畫的文章時,我發現幾乎所有的文章都只是描述了關于動畫的特定的用例或一般事實,并沒有遇到任何關于界面動畫通用規則的文章。在本文中我收集了界面動畫的主要原則和規則,以便給想要設計動畫界面的設計人員提供一些幫助。


          01 動畫的持續時間和速度

          當元素改變它們的狀態或位置時,動畫的持續時間應足夠慢,以使用戶可以注意到變化,但同時也要足夠快,以免引起等待。

          在動畫中使用適當的持續時間,不要太快,更不要讓用戶過長等待


          大量研究發現,界面動畫的最佳速度在200-500毫秒之間。這些數據是基于人類大腦的特殊性得出的。任何小于100毫秒的動畫都是瞬時的,根本不會被識別。而超過1秒的動畫時長會傳達延遲感,因此對用戶來說很無聊。

          最好在界面中保留動畫的持續時間


          在移動設備上,《材料設計指南》還建議將動畫的持續時間限制在200-300毫秒之間。至于Web端,持續時間應延長30%,大約為400-450毫秒。原因在于:屏幕尺寸越大,物體在改變位置時可以克服的路徑更長。因此,在可穿戴設備上,持續時間應縮短30%,大約為150-200ms,因為在較小的屏幕上,移動距離更短。

          移動設備的大小會影響動畫的持續時間


          Web動畫的處理方式有所不同,由于我們已經習慣了在瀏覽器中即時打開網頁,所以我們希望也能在不同狀態之間快速轉換。因此,Web轉換的持續時間應比移動設備短約2倍,150-200毫秒之間。在其他情況下,用戶將不可避免地認為計算機死機或網絡連接出現問題。


          但是,如果你要在網站上創建裝飾性動畫或試圖吸引用戶對某些元素的關注,則無需考慮這些規則。在這些情況下,動畫可以更長一些。

          大屏幕電腦=慢動畫?決不是!


          需要記住的是,無論平臺如何,動畫的持續時間不僅取決于移動距離,還取決于對象的大小。更小的元素或帶有小變化的的動畫應該移動得更快。因此,大而復雜元素的動畫在持續時間稍長的時候看起來更好。


          在相同大小的移動物體中,停下來的是經過最短距離的物體。與大物體相比,小物體移動得更慢,因為它們的偏移量更大。

          動畫的持續時間取決于對象的大小和移動距離


          當物體碰撞時,根據物理定律,碰撞的能量必須均勻分布在物體之間。因此,最好排除反彈效應,只在特殊情況下使用它才有意義。

          避免使用彈跳效果,因為它會分散注意力


          物體的運動應該是清晰和銳利的,所以不要使用運動模糊。即使在現代移動設備上也很難再現這種效果,并且根本不用于界面動畫中。

          不要在動畫中使用模糊效果


          列表項(新聞卡片、電子郵件列表等)在其出現之間應該有一個很短的延遲時間,每次出現的新元素應該持續20-25毫秒。元素出現較慢的話可能會惹惱用戶。

          列表項的動畫應持續在20–25毫秒


          02 緩和

          緩和有助于使物體的運動更加自然,這是動畫的基本原則之一。這一點在《迪士尼動畫原則》(The Illusion of Life: Disney Animation)一書中得到了充分的描述,這本書是由兩位重要的迪士尼動畫師——奧利·約翰斯頓和弗蘭克·托馬斯所寫。


          為了使動畫看起來不顯得機械和人造,物體應以一定的加速或減速的方式移動,就像物理世界中的所有活動對象一樣。

          與線性動畫相比,具有緩動效果的動畫看起來更自然(這里提示下:注意看每段豎格的間距)


          2/1 直線運動

          不受任何物理力影響的物體直線運動,換句話說就是勻速運動。正因為如此,它們看起來非常不自然,對人眼來說是人為的。


          所有動畫應用程序都使用動畫曲線,我將嘗試解釋如何閱讀它們以及它們的含義。曲線顯示了物體的位置( y axis=position )在相同的時間間隔內物體的位置如何變化(x axis=time)。在當前情況下,運動是線性的,因此物體在同一時間行進相同的距離。 

          直線運動曲線


          例如,直線運動只能在物體改變顏色或透明度時使用。一般來說,我們可以用它來表示物體不改變其位置的狀態。


          2/2 緩入或加速曲線

          我們可以在曲線上看到,在開始時物體的位置變化緩慢,而速度則逐漸增加,這意味著物體正在以一定的加速度移動。

          加速度曲線


          當物體以全速飛出屏幕消失時,應使用此曲線,比如說系統通知或者是界面卡片。但請記住,只有當對象永遠離開屏幕且我們無法調用或返回它們時,才應使用這種類型的曲線。

          將卡片滑出屏幕的加速曲線


          動畫曲線有助于表達正確的情緒。在下面的示例中,我們可以看到所有物體的移動持續時間和距離是相同的,但是即使曲線上的微小變化也可以影響動畫的氣氛。當然,通過改變曲線,你可以使物體盡可能地接近于真實世界。

          持續時間和距離相同,但卻是不同的氛圍


          2/3 緩動或減速曲線

          它與緩入曲線相反,因此物體會快速覆蓋很長一段距離,然后緩慢的降低速度,直到最終停止。

          減速曲線


          當元素出現在屏幕上時應使用這種類型的曲線——它以全速向上飛入屏幕中,然后逐漸減速直到完全停止,這也可以應用于從屏幕外部出現的其他卡片或對象。

          減速曲線,使動畫更好地呈現


          2/4 緩入緩出或標準曲線

          該曲線使物體在開始時獲得速度,然后慢慢地將速度降回零。這種類型的移動是界面動畫中最常用的。當你猶豫在動畫中使用哪種類型的運動時,可以使用標準曲線。

          標準曲線


          根據《材料設計指南》,最好使用非對稱曲線,使移動看起來更加自然和真實。曲線的末端必須比它的開始更加突出,以使加速的持續時間短于減速的持續時間。在這種情況下,用戶將更加關注元素的最終移動,從而關注元素的新狀態。

          查看對稱和非對稱標準曲線之間的區別


          當對象從屏幕的一部分移至另一部分時,使用緩入緩出功能。在這種情況下,動畫避免了引人注目的戲劇效果。

          卡片在屏幕上的移動以及相應的不對稱曲線


          當元素從屏幕上消失時,應該使用相同的移動類型,但用戶可以在任何時候將其返回到先前的位置。它涉及抽屜式導航等。

          抽屜式導航從屏幕上隱藏了標準曲線


          從這些例子中可以看出,許多初學者忽略了一個基本的規律——開始動畫并不等于結束動畫。與抽屜式導航一樣,它以減速度曲線出現,而以標準曲線消失。另外,根據谷歌的材料設計語言,物體出現的時間應該更長,以吸引更多的關注。

          側面菜單的出現和消失,分別通過減速度和標準曲線實現


          使用函數cubic-bezier()來描述曲線。之所以稱為立方,是因為它基于四個點。在圖上已經定義了具有坐標的第一個點0;0(左下)和具有坐標的最后一個點1;1(右上)。 


          基于此,我們僅需描述圖形上的兩個點,這些點由函數的四個參數給出cubic-bezier():前兩個是坐標x和y第一個點,后兩個是坐標x和y第二個點。 


          為了簡化曲線的工作,建議使用easings.net和cubic-bezier.com網站。第一個包含最常用曲線的列表,你可以將其參數復制到原型工具中。第二個來源使你可以使用曲線的不同參數,并立即查看到物體將是如何移動的。

          函數三次貝塞爾曲線的不同類型的曲線及其參數


          03 界面動畫中的編排

          就像在芭蕾舞蹈設計中一樣,主要思想是在從一種狀態轉換為另一種狀態的過程中,引導用戶注意一個流動的方向上。舞蹈編排有兩種類型——平等交互和從屬交互。


          3/1 平等交互

          平等交互意味著所有對象的外觀都遵循一個特定的規則。在這種情況下,所有卡片的外觀都被視為一種流程,可以引導用戶的注意力集中在一個方向上,即從上到下。如果我們不按照順序,那么用戶的注意力將會分散。所有元素同時出現看起來也會很糟糕。

          用戶的注意力應引導在一個流動的方向上


          對于表格視圖,它有點復雜。在這里,用戶的焦點應指向對角線,所以逐個地顯示元素是一個很糟糕的主意。單個展示元素會使動畫過長,并且用戶的注意力會呈鋸齒狀,這是錯誤的。

          卡片形式的對角線外觀


          3/2 從屬交互

          從屬交互意味著我們要有一個吸引用戶注意力的中心對象,而所有其他元素都從屬于它。這種類型的動畫給人一種有序的感覺,從而引起用戶對主要內容的更多關注。


          在其他情況下,用戶將很難知道該關注哪個對象,因此他的注意力將被分散。所以,如果有多個要設置動畫的元素,則需要明確它們的運動順序,并盡可能將動畫設置為最小的對象。

          只有一個中心對象的動畫很有必要,其余元素應是被引導的。否則,用戶將不知道關注什么對象


          根據材料設計語言,當移動的物體尺寸發生不均衡變化時,它們應沿著弧線而不是直線移動。這有助于使動作更自然。“不成比例”是指物體的高度和寬度的增加/減少是不對稱的,即以不同的速度進行(例如,一個正方形的卡片變成了一個長方形)。

          當移動的物體不按原有比例變化時,應沿著弧線運動


          當物體按比例改變其大小時,使用沿直線的移動。由于這種移動的實現比較容易,因此通常會忽略不成比例的圓弧移動的規則??纯磳嶋H應用的例子,你會看到線性運動的主導地位。

          尺寸的比例變化是沿著直線上運動的


          曲線上的運動可以通過兩種方式實現:第一種稱為垂直向外——物體開始水平移動并以垂直移動結束;第二種是水平向外——物體開始垂直移動并以水平運動結束。


          物體沿曲線的移動路徑必須與滾動界面的主軸線重合。例如,在下一張圖片上,我們可以上下滾動界面,相應的卡片以“垂直輸出”的方式展開-首先從右到下,然后向下。反向移動以相反的方式進行-即卡片首先垂直上升,最后水平移動。

          卡片的展開/折疊方向應與界面的軸線一致


          如果移動物體的路徑彼此相交,則它們將無法彼此移動。這些物體應通過減慢或加快自身的速度,為另一個物體的移動留下足夠的空間。另一種選擇-他們只是推開其他物體。為什么?因為我們假設界面中的所有物體都位于一個平面中。

          在移動過程中,物體之間不應相互穿過,而應為另一個物體的移動留下空間


          另一種情況,移動物體可以高于其他物體。但也不能通過其他物體消失或移動。為什么?因為我們相信界面元素的行為符合物理定律,現實世界中沒有任何固體物體能夠做到這一點。

          物體可以超越其他物體,然后移動


          結論

          從以上總結的規則和原則能明白,UX界面動畫是反映物理世界中存在的運動,如摩擦、加速等,模仿現實世界存在的行為。我們可以創建一個序列,讓用戶能夠理解期望從界面得到什么。如果動畫是正確構建的,那么它不會太引人注目,并且不會分散用戶的目標,動畫不應該影響用戶使用或完成任務。


          但是不要忘記動畫更多的是一種藝術而不是科學,所以最好的方法是在用戶身上試驗和測試你的決定。


          文章來源:站酷    作者:UX辭典


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

          工具型產品可用性測試怎么做?

          濤濤

          本文將針對酷家樂旗下云端建模工具——酷大師所做的可用性測試,說明工具型產品如何去做可用性測試。

          打造一款產品的過程中,我們需要時刻保持警惕:功能是否滿足用戶核心需求?交互流程能否做到簡單流暢?是否還有未知領域可以由用戶帶來啟發?進行一次準備充分的可用性測試,無疑是解答上述問題快捷有效的方式。

          下面我將結合本次針對酷家樂旗下云端建模工具——酷大師所做的可用性測試,說明工具型產品如何去做可用性測試。

          準備階段

          第一步:明確測試目的

          測試目的不同,安排的測試任務就不同,進而就會影響最終得到的結果。所以測試之初需要考慮清楚測試目的。國際標準化組織在人體工程學設計的人機交互部分( ISO9241) 把b2可用性c 規定為 3 個指標:

          • 有效性:用戶使用該系統完成任務的精度和完整性;
          • 效率:用戶使用該系統完成任務需要耗費的資源;
          • 用戶滿意度:用戶對該系統的舒適度和認可接受程度。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          結合這3個指標,我將本次測試目的設定為:

          • 了解用戶對酷大師現有主流程的使用現狀;
          • 了解用戶對酷大師的體驗滿意度及需求滿足情況。

          第二步:確定測試時間和環境

          測試時間:

          • 測試準備時間:建議為期2天。準備相關文檔、設備、場地、任務等。
          • 用戶測試時間:建議為期3-5天??啥虝r間內容集中進行用戶測試,或在工作日穿插進行測試。
          • 結果整理時間:建議為期5天。用于整理測試信息、落實產品迭代任務、撰寫總結報告等。

          測試環境:

          • 線下環境:邀約用戶到公司辦公室現場測試;
          • 線上環境:考慮到用戶路程及時間等限制性因素,也可在線上進行測試。
          第三步:安排測試設備
          • 操作設備:取決于目標用戶群體主要使用的設備,假如用戶都使用ipad,就要將ipad列為主要操作設備。
          • 錄音設備:測試結束后需要進行詳細的信息整理,錄音資料可以幫助回憶溝通內容。可使用手機自帶錄音功能或專業錄音筆。錄音前必須告知用戶,在征得許可后方能進行錄音。
          • 錄屏設備:工具型產品的操作過程中涉及很多細節,錄屏資料可以幫助工作人員進行問題定位??墒褂秒娔X自帶錄屏功能,或錄屏工具。
          • 遠程設備:由于部分用戶需在線上測試,可使用在線工具進行遠程協作,比如:zoom、騰訊會議等。
          • 記錄本和筆:測試過程中進行表格填寫時需要使用。
          • 文檔資料:主要包括測試過程中需要填寫的表格。建議打印n+2套,n是測試樣本數量,另外2套備用。
          • 場地準備:提前預約會議室,給用戶獨立的操作環境。
          • 測試酬勞:具體可根據公司政策進行準備。
          第四步.邀約測試樣本

          Nielsen在理論中認為5-8位用戶可以測試出85%的可用性問題,實踐下來確實如此,樣本數量建議控制在這個范圍。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在同一個產品的用戶中,新手用戶、永久的的中間用戶、專家用戶這三類角色通常是共存的。我們需要讓新手用戶快速和無痛苦地成為中間用戶;避免為那些想成為專家的用戶設置障礙;最為重要的是,讓永久的中間用戶感到愉快,因為他們的技能將穩定地處于中間層。

          本次測試中,我盡量使樣本中包含這3類用戶,比例為2:3:3。測試之后,就可以大概知道對于不同類型用戶來說,產品可用性和

          易用性情況,也可以得到多維度差異化的反饋。

          第五步:設計測試文檔

          測試中需要使用一些管理用戶信息或記錄用戶反饋的表格,在準備階段就要做好表格設計和打印工作。下面是具體的表格,可根據具體需求做相應調整。

          《用戶信息&排期表》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在這張表中管理測試用戶信息b2姓名、職業c 、測試安排「時間、地點」、測試工作人員「主持人、觀察員」。一場測試盡量安排一位主持人和一位觀察員作為工作人員相互配合。

          主持人負責與用戶溝通互動,推進測試進程;觀察員負責設備和資料保障,以及測試過程中的行為觀察和記錄。一個人獨自承擔主持人+觀察員角色的話,在用戶反饋密集而現場又出現臨時狀況時就會手忙腳亂,所以建議兩個角色分工協作。

          《用戶基本信息問卷》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在這張問卷中可以設計與產品相關的用戶基本信息問題,問卷設計原則為:

          • 關聯性:與需要測試的內容相關;
          • 層級性:問題層級依次遞進,使用戶回答問題時能夠思維連貫,由淺入深;
          • 隱私性:盡量避免涉及用戶敏感信息,必須涉及時需解釋原因,尊重用戶意愿。比如有些用戶不愿透露年齡、收入等信息。

          這張問卷使用在線工具呈現,比如騰訊問卷;也可現場打印紙質問卷進行詢問填寫。大多數用戶比較喜歡現場填寫。

          《單任務滿意度問卷》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          測試過程中,我們需要讓用戶完成一個完整任務,該任務需要拆解成若干單任務。在每個單任務結束后,立刻對用戶進行該單任務的滿意度詢問。

          《SUS系統可用性量表》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          用戶結束完整任務后,填寫該量表。該量表由10個題目組成,包括奇數項的正面陳述和偶數項的反面陳述。在結果整理階段,我們再對該量表進行分值計算。

          第六步:規劃測試腳本

          從開始到結束,需要主持人將整場測試的各個環節串聯起來,引導用戶操作,推動測試進程向前發展。為防止意外狀況出現,可以預設測試腳本,規劃情境和話術,并在預測試環節驗證及優化該話術。

          比如可以這樣開場:“首先非常感謝您今天能來參加我們的可用性測試,我是主持人XXX,這位是觀察員XXX。我們這次是對酷大師建模工具進行可用性測試,想了解您使用時的體驗和感受。

          在這里需要強調的是:我們測試的對象是工具,而不是您,所以您不必感到緊張……當您使用工具時,我們會觀察和記錄。今天的測試大概需要一個小時,測試過程中會有休息時間。測試過程中,請您將手機保持靜音狀態……“

          比如可以這樣進行兩個單任務環節串場:“好的,我們已經完成了第一個單任務?,F在有一份簡單的問卷,填完后可以稍微休息一下。

          「出示問卷,并作簡要填寫說明」「問卷完成后進行簡單訪談,用戶也稍稍休息后繼續」現在,我們開始進行第二個單任務「要清晰且大聲地說出這句話,以“鼓勵”測試參加者和提示記錄人員」……”

          具體話術依據需要測試的內容和情境展開,盡量做到專業、友好。

          第七步:設計測試任務

          可用性測試往往帶有一定目的性,而這些目的能不能達成,取決于任務與目的的關聯性以及用戶是否能夠給到對應反饋。通常,測試用戶是愿意給予反饋的,那么測試任務的設計就成為整個準備階段最重要的環節。

          做好測試任務的設計和拆解:需要具備從全局高度理解產品的能力;需要知道產品全鏈路的過去起源、現狀細節、未來走向;需要把控重點,拎出骨架;需要去繁就簡,以較少的任務成本測出最有價值的信息。

          本次測試中,我設計的主流程是:模型創建——材質鋪貼——模型渲染——模型發布——模型分享,并且我還希望測到拉伸、陣列、組編輯、移動、旋轉這樣的主功能。所以我將這兩塊有機結合,給到用戶創建一個「樓梯踏步模型」的任務。

          我將任務按照主流程拆解為5個單任務,主功能分布到其中幾個單任務中,且盡量做到兩個單任務中不重復使用同一個主功能。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          預測試階段

          大多數產品都存在一些限制因素導致的尚未解決的已知問題。這些問題在測試中出現的話,會轉移用戶注意力,削弱本次測試的價值,偏移本次測試的目的。

          另外,我們準備階段進行的種種規劃也需要得到驗證。結合這兩個原因,正式測試之前建議進行內部的用戶預測試。找出并修復測試環節中的漏洞,準備好各類突發狀況下的planB,以及修復影響正式測試的已知問題,提高正式測試的執行效率。

          正式測試階段

          第一步.測試開場,填寫《用戶基本信息問卷》

          本次測試是在工作日穿插進行8場一對一用戶測試。這樣可以放緩測試節奏,在兩場測試間隙有充足時間簡單整理上一場收集的信息,與下一場用戶確認測試安排,以及對突發狀況及時處理。

          正式開始前半小時,觀察員需確認設備都已調試妥當,資料都已打印完成。主持人可與用戶進行聯系,帶領用戶進入測試場所。主持人可以通過填寫《用戶基本信息問卷》了解用戶基本信息,幫助用戶消除在陌生環境下的溝通障礙。也可以使用戶以放松狀態完成測試任務,以開放心態為后續拓展性話題的展開做好準備。

          無論是填寫《用戶基本信息問卷》還是后續的問卷,建議采用主持人提問、用戶回答的方式收集信息。用戶的注意力集中于思考和溝通,就能夠提供更多有價值的信息,而不是忙于撰寫問卷。

          第二步.完成單任務,填寫《單任務滿意度問卷》

          主持人按照順序分步解說單任務。單任務測試過程中,工作人員不要去打擾用戶,也不要給用戶任何提示,所有的問題都等到測試結束再進行解答。

          觀察員需仔細觀察用戶操作,記錄用戶是否很容易判斷出如何操作,完成某個重要功能點時是否順暢;需隨時關注用戶表情,記錄下明顯表情相關聯的流程或功能點等等細節。

          一個單任務完成后,提示用戶稍事休息,然后提問《單任務滿意度問卷》中的問題。此時可以回答用戶操作過程中的疑問,也可以藉由操作中的細節做延展發散,詢問用戶操作感受。通??梢垣@得很多針對該單任務的意見和建議。這些意見和建議后續就需要記錄整理,作為優化任務幫助提升產品可用性和易用性。

          第三步.填寫《SUS系統可用性量表》,了解整體評估

          整個任務完成后,可以藉由填寫《SUS系統可用性量表》,了解用戶對整體的評估。由于量表的10個題目中,包括奇數項的正面陳述和偶數項的反面陳述,所以在提問過程中一定要陳述清楚題目。如果用戶認為有些問題無法回答,則視為其選擇中間值。在后續的結果整理階段,再對量表總分進行計算。

          在問題詢問過程中,可以有針對性地詢問原因。比如針對第2個問題“我認為酷大師建模工具的操作較為復雜,其實沒必要這么復雜”。

          如果用戶認為不復雜,則可以詢問哪些點非常簡單易用;如果用戶覺得復雜,則可以詢問哪些點覺得復雜。用戶告知原因的同時,常常會說出他認為比較簡單的解決方案。這些解決方案或者來自于競品,或者來自于實踐,或者來自于創新,常??梢詭椭覀冮_拓思路,走出認知盲區。

          第四步.拓展性訪談,測試收尾

          在這個環節可以不必拘泥于原定的測試任務。建議預留一定時間,大到行業發展,小到產品細節,與用戶進行一番深度探討。這些來自于一線的用戶常常會帶來一些新鮮的靈感,為產品未來的拓展提供一些線索,解決產品當下的一些困惑。

          由于我們一開始就對測試樣本進行了分類,所以也可以結合前面幾個環節的信息,對各分類下的用戶訴求和行為習慣進一步驗證、區分、歸納。

          結果整理階段

          第一步.SUS量表分值計算

          首先,我們需要計算SUS量表總分。奇數項計分采用“原始得分-1”,偶數項計分采用“5-原始得分”。由于是5點量表,每個題目的得分范圍記為0~4(最大值為40),而SUS的范圍在0~100,故需要把所有項的轉換分相加,最終再乘以2.5,即可獲得SUS分數。

          其次,我們可以獲得分量表得分。SUS量表中,第4和第10項構成的子量表為“易學性”(Learnability),其他8項構成的子量表為“可用性”(Usability)。

          為了使易學性和可用性分數能夠與整體SUS分數兼容,范圍也是0~100,需要對原始分數進行轉換:易學性量表轉換分數的總和乘以12.5,可用性量表乘以3.125。

          最后,我們可以將SUS量表分數換算成百分等級來解釋,找到對應評級。百分等級的意思是指測量的產品或系統相對于總數據庫里其他產品或系統的可用性程度。比如SUS得分是73分,其百分等級大約為67,意味著比大約66%的產品可用性更好。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          第二步.整理問題列表,推進迭代優化

          做完所有用戶的測試之后,我們一定會收集到很多涉及具體功能點的反饋。對于正向反饋,我們可以謙虛地接受,并且思考這些打動用戶的點如何復用;對于非正向反饋,我們應該冷靜地思考,它們將是本次可用性測試中最直接而有效的收獲!

          對這些反饋可以進行分類歸納,將其中能夠立即應用于產品的內容整理出來,按照優先級,放入產品迭代優化任務中。這些任務將提高產品可用性,在數據層面能夠幫助提升留存率。我們這次可用性測試中總共獲取97個有效反饋,其中62個整理進產品迭代任務,并且取得了用戶使用數據上的相應提升。

          第三步.撰寫測試報告

          整個測試環節通常只有2-3位工作人員,如果希望能和團隊一起分享測試的收獲,建議整理一份總結報告??梢允褂脀ord或者ppt形式,說明測試背景、測試用戶信息、主要結論、發現的問題、以及解決問題的行動項。

          總結升級

          經過幾場頗具收獲的工具型產品的可用性測試之后,我做了一些總結,希望能夠形成適應于工具型產品的可用性測試體系:

          1. 目的性

          工具型產品的可用性測試目的比較統一:幫助團隊優化體驗路徑;幫助團隊明確用戶使用產品時的體驗感受;幫助設計師驗證設計指標。

          2. 專業性

          完整的可用性測試全程都需要專業支撐,從籌備到進行,從任務到結果,每一個細節都需要考慮到位。在這過程中我們要盡量保證:流程規劃清晰;文檔整理完整;分工明確到位。

          3. 參與性

          大多數可用性測試是用戶體驗相關崗位人員發起,但是用戶對于產品的反饋與團隊每位成員息息相關,所以建議團隊共同參與。比如在這次可用性測試中,就邀請了產品經理和研發人員擔當觀察員或主持人;邀請用研人員給予專業指導培訓;在對測試反饋的問題進行優化過程中,也是團隊通力合作,推進迭代快速進行。

          4. 周期性

          可用性測試不是進行一次就結束的一場表演。而是結合產品進展情況,可持續實施的一種有效的快速驗證方式。

          可以在新產品上線后進行,可以在重要功能上線前進行,也可以在迭代優化后進行。建議周期性進行可用性測試,取得一些結果后立即應用于產品,隔段時間再次驗證,形成良性循環。亦趨近于精益用戶體驗中倡導的基本MVP理念。

          當然,每次可用性測試都需要工作人員投入大量時間和精力,所以專業賦能可以成為很好的解決方案。即團隊成員可以學習使用該方法,輪流進行周期性操作。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          寫在最后

          我們日常其實接觸并積累了大量專業方法,可用性測試只是其中一種。在不斷實踐的過程中才能真正體會到這些方法的魅力之處,在不斷落地的過程中才能打磨自身的方法論體系,形成屬于自己的一套打法,給產品設計帶來新穎的專業思路。

          文章來源:優設    作者:酷家樂UED 


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

          拼多多搶走了我媽,從淘寶手里

          周周

          編輯導讀:對于老一輩人來說,他們沒有趕上互聯網興起的時候,等到想要主動“觸網”時,才發現很多操作根本搞不清楚。盡管產品設計師已經極可能考慮到了老人群體的用戶體驗,但在實際操作中,老人家還是一頭霧水。這時,操作越是簡單的產品,越能夠贏得他們的喜愛。本文作者從自身經驗出發,對這類現象進行分析,與你分享。

          上周某天吃完晚飯,我媽遞過她的華為手機怯怯地問我:你有空嗎?我想叫你幫我跟那個商家說換一個快遞,我們家這邊的百世快遞的站撤了,叫他們不要用這個快遞。

          我腦海中閃過一個念頭:嗯?最近我沒有幫她付款啊。但隨即也是接過她的手機打開了淘寶。我媽立刻阻止我:不是淘寶,是拼多多。隨即自己打開了她微信里的拼多多小程序,演示給我她找不到商家客服。我跟她說,這個功能要用APP才行,于是幫她下載了拼多多APP并很快解決了問題。

          弄完之后,我們又展開了這樣的對話:

          我媽:哎呀,這個拼多多真是太好了,物美價廉,超方便!你怎么不早教我用!

          我:我自己都不怎么用拼多多?。?/span>

          我媽:這個是我的舞友上周教我的!我打開一看,哇,好多有用的東西,又便宜!第一天我就買了幾百塊的!

          我:但是拼多多很多假貨啊!

          我媽:我又不像你們追求什么名牌!有什么假貨可言?一條裙子30塊!

          我:……

          我媽:而且!以前我在淘寶總要你幫我付款,現在我用拼多多自己用微信就可以支付了。

          我:我早就叫你開個支付寶賬號,你自己又不開!

          我媽:那么麻煩,我不會,你又不教我!而且又要綁定銀行卡,萬一哪天我的錢被人家騙走,那些什么黑客……

          我:哪有黑客黑你,你又不是馬云……

          我媽:還有,拼多多退貨很方便!以前我在淘寶的時候,退貨要你幫我搞,還要在家等快遞上門,很不自由,現在我自己去菜鳥驛站退就得了。

          我:好吧。

          我媽:以后我就用拼多多,我那些舞友都在用!

          我:你開心就好。

          我回頭想了想,這是一個以用戶定位和產品特征為優勢搶奪用戶的典型場景。

          首先看看以我媽為原型的粗略用戶畫像:

          • 年齡特征:60歲左右
          • 工作與生活特征:退休在家,時間較多
          • 消費能力:退休金4000元左右
          • 家庭情況:已有孫輩
          • 人際關系:以廣場舞舞友、同學、工友、插友為主的人際關系圈,集聚在微信上
          • 消費態度:不追求牌子,追求低價
          • 網購習慣:淘寶的老用戶,但沒有支付寶賬號;網購品類主要為衣物及家居用品
          • 觸媒習慣:微信(微信群、朋友圈)、今日頭條

          為什么我說拼多多是從用戶定位和產品特征這兩個維度搶奪走了我媽這樣的淘寶用戶的呢?

          首先,我用的是“搶奪”這個詞。

          我并沒有用擠占、分流這樣的詞。因為,在跟我媽的交談里,我已經感受到她心里估計“從此淘寶一生黑”了。也確實,一個月以來我媽沒有再叫我在淘寶付款過。所以,我想我媽大概率未來不會再用淘寶了,也就是說,淘寶直接流失掉了我媽這個用戶。

          其次,來看看用戶定位。

          根據上面我列出的以我媽為原型的用戶,多嗎?我簡單查了一下。

          根據國家統計局官網上發布的《中華人民共和國2019年國民經濟和社會發展統計公報》,60周歲以上的人口約有2.5億人,60-65周歲的人口約有83250000人,分別占人口總數的18.1%和6%;根據中國互聯網信息中心官網發布的《第46次<中國互聯網絡發展狀況統計報告>》,截止2020年6月,我國手機網民用戶規模達9.4億。

          那么,根據這個比例可以推算,這樣的用戶大約在5千萬—1億的規模。

          這么大的一個用戶群體,實際上是淘寶自己放棄掉的。自從前幾年淘寶打假貨的行動和品牌化(力推天貓)的戰略執行以來,實際上大量的縣城以下、60歲以上的用戶都被淘寶放棄掉了。

          以我媽為原型的這批用戶,他們大多數沒有支付寶賬號,但在微信上有錢,但除了平時發發紅包,菜市場便利店買點東西,基本上還是沒有用出去。于是,這批用戶沉淀在微信錢包里的海量的錢,很難直接轉化到淘寶上。

          另外一個關鍵的地方在于,他們對淘寶是有怨言的,但在拼多多出來之前,沒有替代物。某種程度上來說,對用戶而言,忠誠度是很虛無的。真正對品牌有感情而產生“忠誠”的用戶極少極少,品牌還是得需要不斷優化產品,滿足用戶的需求。

          品牌也好,產品也好,本質上是為用戶提供價值,而不是要跟用戶“談戀愛”。

          這是很多品牌的一個誤區。沒有在自身的產品上下功夫,去了解用戶瞬息萬變的需求,而去打“情懷”,講“文化”。所以,我們可以看到當某些品牌醉心于自己的“情懷和文化”之時,其競爭對手在了解用戶需求和優化產品而推出競品后,瞬間打垮行業老大哥的案例。

          最后來講講產品特征。

          我媽使用淘寶的流程是怎么樣的呢?

          挑選商品——下訂單——點擊“找人付款”——發送需支付的訂單到我的淘寶賬號——退出淘寶——打開微信——告訴我發了一個訂單——發紅包給我——我看到微信或淘寶信息——點擊需支付的訂單——支付——退出淘寶——打開微信收紅包。

          而她使用拼多多呢?

          挑選商品——下訂單——支付。

          當我列出這兩個產品使用流程之后,我猜如果你是我媽,你也會用拼多多了。

          在我媽跟我的對話里,還突出強調了“退貨難”這個點。實際上是淘寶的物流服務不好嗎?并不是。我一直覺得淘寶的物流雖然不如京東,但并不差,而且也不斷在優化升級。但為什么我媽還是覺得不好呢?這一點不能單純地從物流本身來看,而得回到淘寶的產品來看。

          在淘寶上,推出了一個功能,叫“找人付款”。當時我覺得這個功能很好,解決了我幫我媽買單時,她要跳出淘寶從微信給我發鏈接的麻煩。但最終卻帶來了一個重要的弊端:當要退換貨時,我這邊無法執行,她那邊又不知道如何操作。

          而當我從PC端登上我媽的淘寶賬號之后,PC端的退換貨服務非常麻煩和繁瑣,讓我都研究了差不多一個小時才解決。而最后,我媽那邊又無法支付退貨費用,我在PC端也支付不了,也不能“找人付款”。總之,整個過程極其麻煩。雖然淘寶也意識到了產品上的缺陷,但目前的情況而言,這樣的產品還是對于我媽這樣的用戶非常不友好。

          而拼多多呢?它基于微信這個社交生態圈。加上沒有什么太多余的功能,我媽很快就能上手了,自己操作還是比別人代操作方便多了。

          談到這里,我還意識到一個重要的問題。

          從產品對人際關系的影響而言,淘寶是負向的,而拼多多是正向的。從某種程度上而言,60歲以上的這代人,是被互聯網拋棄了,所以當他們想搭上這波潮流時,不得不面對自己的兒女,需要向他們請教,怎么用怎么學。這一點首先就會讓不少子女心煩,不少父母自卑。

          再進一步,如果每次父母網購都得“捆綁”上子女時,對人際關系是正向的嗎?而在拼多多上購物時,他們不僅可以大大優化自己的產品使用流程,還能跟自己的老朋友們一起拼單,互惠互利,這對人際關系的影響有很大的正向作用。

          你有什么被別的產品搶走的故事嗎?

          一點個人小想法,想到哪寫到哪。

          如果你有不同的意見和想法,歡迎評論或留言。


          文章來源:人人都是產品經理           作者:@源記物語


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

          Apple 的設計哲學:網頁篇

          周周


          Apple 致力于讓每件產品都賞心悅目,與其說官網是產品展示平臺,倒不如說它是蘋果產品分支的延續。從 Apple.com 找設計靈感是每一位設計師都做過的事,那它到底有何魅力?文章對Apple的網頁設計展開了梳理分析,與大家分享。


          一、沉浸與交互式體驗

          每當有新產品發布時,我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段時間發布的 iPad Pro 也一樣。

          這背后是 Apple 基于 webGL 技術,創造的一種沉浸與交互式產品體驗。

          1. 連續性

          我們在產品介紹頁可以看到,蘋果使用了大量的滾動 scroll 來體現連續性。

          一方面,滾動作為大多數 Web 用戶最自然的操作,學習成本極低。

          另一方面,在冗長的頁面下,滾動能讓產品特性保持更自然的轉場銜接。

          iPad Pro 的連續性

          2. 趣味性

          另外,采用了大量的動畫式轉換(animated transition),即操作時展示的動態效果,以此來增加趣味性。

          伴隨著豐富的、若隱顯現的章節文案,就像電影的旁白一樣,娓娓道來。

          通過滾動的方式增加交互性,這是明智之舉。試想一下,如果只放置已渲染的演示視頻,那么用戶的操作會受到限制,只能在視頻中前進或后退,毫無樂趣可言。

          AirPods的趣味性

          二、言之有序

          1. 秩序感

          說到言之有序,我們看 iPad 的頁面介紹。四款產品,分別是:iPad Pro、iPad Air、iPad、iPad mini。

          拍攝角度的秩序感,可謂妙不可言。

          iPad的秩序感

          • iPad Pro 的拍攝角度接近于正側面。
          • iPad Air 是四分之三側面。
          • iPad 是正面。
          • iPad mini 是俯視。

          如此一來,即顯得有序,也不會導致視覺疲勞。

          2. 設計語言

          其次,官網與 iOS 保持協同的設計語言,給用戶呈現了一致的感官體驗。

          從 iOS 11 開始,蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合,轉向的 Medium + Bold ,以此增強信息傳播中的識別力。

          HomePod

          另外,高斯模糊的標題欄背景、產品的投影等設計語言也保持系統一貫的風格。我們可以很清晰的看到 Web 設計的同步轉變。

          三、層次

          1. 視差

          第三是視差帶來的層次感。

          蘋果奉行包豪斯的無裝飾和極簡的理念。當然,它不是那種附庸的美觀及外表的光鮮,而是將復雜難懂的技術以簡潔的形式傳達給用戶。

          Mac Pro 視差滾動

          在信息層次方面,Apple 的編排設計由淺入深,猶如抽絲剝繭。很好的利用了視差滾動,傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。

          2. 視覺張力

          不僅如此,樣式上富有視覺張力?;驍U張、或收縮、或吸引、或排斥之感覺,呈現刺激與震撼。舉兩個例子:

          A13芯片的擴張力

          擴張力:整個畫面以 A13芯片 為視覺中心點,元素和布局圍繞這個視覺中心點向外擴張。采用發散式的視覺引導,視覺張力就出現了,讓人感覺巍峨壯觀。

          Pro級攝像頭的排斥力

          排斥力:通過元素的大小對比,可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫,傳達空間意識。視覺上被其構圖、美感觸動。

          四、高級感

          再聊聊蘋果的高級感是怎么來的?

          1. 視覺降噪

          我們都知道,高飽和度的色彩,會影響人的情緒波動。相反,低飽和度的配色,對人眼的刺激較弱,會有一種冷靜且克制的高級感。

          iMac Pro 高級感

          回過頭來看蘋果官網的大部分頁面,除了產品界面色彩 和 按鈕藍 之外,其他的文字、背景、控件一律采用黑白灰色系,以此營造高級感。

          甚至是 iPhone 11 Pro 新出的暗夜綠,也是高級灰中加了一點點綠而已。

          換言之,減少使用顏色的數量,降低色彩的飽和度都能削減色彩對人的情緒,起到提升產品高級感的效果。

          iPad 留白

          除此之外,恰當的留白可以更加突出產品內容,讓重要的信息更準確的傳達。并且能營造出廣闊的空間感,讓畫面得到延伸,呈現一種意境美。

          所以我們做設計時應當多做減法,避免無意義的視覺元素堆砌,反而能讓你的設計更有高級的氣質。

          這又印證了現代主義建筑大師密斯·凡德羅的那句話:Less Is More。

          2. 配圖

          當然,只有留白是不夠的。既然是做宣傳,那么一份高分辨率、精致的配圖就顯得尤為重要。

          蘋果官網大部分的產品都是采用實拍+后期修圖,而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果,這一點能看到蘋果對于品質的追求。

          Designed by Apple in California

          不僅如此,蘋果產品圣經《Designed by Apple in California》,以及壁紙同樣是由攝影師拍攝完成。有興趣的同學可以看下面這個幕后制作視頻,相當硬核。

          3. 蘋果式文案

          做過英文 Web 的設計師都知道,英文往往比中文更好設計,相同的布局英文出來的效果也更好看。

          這不是崇洋媚外,心理學有個詞叫做「母語羞澀」。簡單來說就是,中文對于我們來說,太常見了會讓人產生一種廉價感(實際上是羞澀感)的心理感受。

          老外也一樣,你可以看到美國企業:蘋果、麥當勞、星巴克都是使用圖形 Logo,而日本企業不用母語,而是用英文,比如 SONY、TOYOTA、Canon。

          你的下一臺電腦,何必是電腦。

          回到蘋果官網,我們看到一部分文案是英文產品名稱,這個不會感覺羞澀。

          那中文部分怎么辦呢?比較有意思的是,Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差,但基本上能明白字面意思。

          其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格,來凸品牌氣質。舉幾個例子:

          • 重復:比如說 iPad Pro「你的下一臺電腦,何必是電腦?!?/span>
          • 雙關:比如說 AppleWatch 的「它會時時關心你的心?!?/span>
          • 排比:比如說 iMac的「從極速,到神速,任你提速?!?/span>
          • 押韻:比如說 配件 的「可重復充電,又可圈可點?!?/span>
          • 對比:比如說 iPad mini 的「身量小,能量大?!?/span>

          4. 儀式感

          最后一點。生活要有儀式感,蘋果官網也有儀式感。

          國際婦女節專題

          在一些特殊的日子里,例如三八節當天,友商選擇打廣告促銷。而蘋果推出了國際婦女節專題,致敬女性的偉大,這一做法頗具人文情懷。

          不過話又說回來,感動歸感動,還是參與友商的打折活動香。

          #相關閱讀#

          Apple 的設計哲學:交互篇

          Apple 的設計哲學:UI 篇

          Apple 的設計哲學:聲音篇


          文章來源:人人都是產品經理           作者:阿洋


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

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          濤濤

          最近國外的設計平臺頻繁出現一類內容,大概類似于「產品設計中的倫理道德與用戶體驗」,里面的內容有引起我的一些思考。

          我先給大家舉個例子,來解釋一下上面這句話的意思。

          以前,我們聊界面的設計,說界面當中如果有兩個按鈕,就要引導用戶走向主要操作,弱化次要的。類似于下圖:

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          這時候一定會有一些設計師告訴你說,這類界面,要以左邊這種形式去設計,因為無論從視覺角度、優先級角度還是企業利益角度來說,左邊這種都更符合用戶操作的邏輯。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          或者,如 PayPal 上底部的「移除卡」功能,故意在層級上做的很弱,顏色的處理讓按鈕看起來甚至是不可點擊的。

          雖然「移除」對于產品來說是一個危險操作,產品不希望用戶進行這一操作。但是對于用戶來說,當他們想要這個功能的時候,說明意愿強烈,這時候這種設計會讓用戶產生糟糕的體驗。

          于是就有人提出說:

          • 為什么呢?難道就不考慮想要跳過的那部分用戶了么?
          • 產品設計就是只考慮對企業有利的用戶,而忽視掉那些不想付費的用戶?
          • 為什么我們的界面設計不能從更公平的角度去考慮呢?
          • 難道因為這些糟糕的設計頻繁的出現,我們就要認為這是好的設計了么?

          為什么,用戶登錄注冊就這么簡單,但是有些用戶想要注銷賬號卻如此麻煩?難道對于這些想要注銷賬號的用戶來說,用戶體驗就不重要了么?

          其實,我覺得這個問題,可以從兩個角度來說明,分別是「目的」和「義務」。

          作為產品團隊的一員,我們的價值在于給公司創造利益,想方設法得到用戶的支持與廣告商的青睞。所以我們設計的產品都會有特定的目的。

          比如,引導用戶去購買產品或平臺中的商品,以讓企業能夠存活,持續運營下去。

          但這并不是說,企業把一些對用戶無用的商品賣給了用戶,用戶買的這份商品,對他們來說一定是有價值的。產品并不是在欺騙用戶購買無意義商品。

          比如平臺支付了音樂或視頻的巨額版權費,方便用戶在線上收聽與觀看,那么用戶為這些內容付費是否應當?

          企業做這些事,從用戶與廣告商身上獲取利益,本質就是為了賺錢,這一點無可厚非。

          所以在產品界面的設計中,如文章開頭的示例,采用左圖的形式,突出辦理會員的按鈕,引導用戶付費成為會員,似乎也沒什么問題。

          它不過是利用了「信息優先級」的概念。我們需要幫助用戶去理解界面上所呈現的信息,目的是為了讓用戶更好的操作。如果所有信息的權重是一樣的,反而會影響用戶的使用,甚至造成體驗障礙。

          而逆向的,比如不辦理、跳過類似的出口也有給到用戶,雖然從視覺上相對弱化了,但絕不應該阻礙用戶去點擊。

          從這點來說,上圖示例的問題不是在弱化了按鈕的視覺效果上,而是按鈕太小,可能會導致用戶誤觸「去辦理」,讓不想辦理的用戶頻繁點錯;或者過分弱化界面上的重要元素,明明在眼皮底下,卻給用戶找不到的錯覺,這才是根本性的問題。

          比如一些引導頁,在屏幕上設置了三個類似「跳過」的按鈕,結果只有一個是有效的,產品為了讓用戶點擊廣告給企業創造收益,利用這樣的方式達到目的,這才是所謂倫理道德的缺失。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          我再舉個例子。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          連續包月,相比普通包月,策略大多都是第一個月有優惠價,以引導用戶辦理連續包月服務。好處是,大多數用戶辦理了連續包月,就會長期使用,它弱化了用戶的決策意識。

          除了部分辦理完第一個月就取消服務的用戶,只是為了這個月用,利用這樣的漏洞省點錢,不過這也僅限于第一次辦理了。

          那么我們作為設計師,就應該從為公司盈利的角度去設計界面,引導用戶辦理連續包月服務,而不是普通包月,在界面上做出差別。

          同樣的,當每個月用戶需要自動扣費時,就應該告訴用戶,過兩天又要一次扣費了,做一個提醒。而不單單是成功辦理后,就再也不通知了,這是不對的,畢竟用戶每個月都在為產品付費,這樣的通知是產品的義務。

          如果用戶辦理的是年會員,已經單次就付清年費,那就沒必要反復提醒(也沒什么可提醒的)。

          在這個例子中,用戶體驗與倫理道德的界限很清晰,所以我并不覺得它們是相互矛盾的。

          我們還可以舉很多例子來說明這個問題。

          比如 Windows 系統下卸載軟件頻繁的下一步,甚至還會有錯誤引導的設計。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          再比如,在一些產品里關注了某個人,但是有一天想取關的時候,總是找不到取關按鈕。或者,一些產品里并不重要的信息,總是閃著紅點引導用戶去點擊等等。

          我們常常會去分析按鈕的各種樣式,比如是否有圓角,是否有投影,是否要漸變等等;也會去梳理按鈕與文案的關系,比如按鈕中的文案與邊框的間距,文案的大小要適配載體的比例等等;甚至,還會去分析按鈕的位置,比如取消按鈕應該在左邊還是右邊,取消按鈕與關閉按鈕的區別等等。

          但似乎,我們很少會去探討按鈕背后的這些事件,我們都知道按鈕是用戶與某個事物間接的交互控件,但我們從來都只注意于按鈕的外形與按鈕位置所應有的邏輯,而沒有真正去探討按鈕所承載的這些問題。

          比如用戶點擊了「會員辦理」的按鈕,會發生什么事情?我們是否應該在下個月用戶扣款之前提醒他們?或者,頻繁的在產品里濫用并不重要紅點提示,會不會影響用戶對于該產品的使用頻率?

          這才是我們需要延伸出來思考的事情,而不單單是按鈕或者某個控件本身。我們思考的遠不止目的,還有義務。

          所以。

          我并不覺得在產品界面上引導用戶執行操作有什么問題,相反,問題在于在引導的同時,不能阻礙用戶進行其他的操作,給予用戶合理的控制權,才是最重要的。

          產品設計的目的在于正向邏輯的用戶操作體驗,而產品設計的義務在于給予用戶拒絕的權利。


          文章來源:優設    作者:和出此嚴


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



          交互設計原則之格式塔定律

          鶴鶴

          在做交互設計或者視覺設計時要遵循一些既有的原則,其中非常重要的一條就是【格式塔定律】

          一、什么是格式塔原理?

                  格式塔心理學誕生于1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。“形狀”和“圖形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。

                 格式塔學派主張人腦的運作原理屬于整體論,“整體不同于其部件的總和”。例如,我們對一朵花的感知,并非純粹單單從對花的形狀、顏色、大小等感官資訊而來,還包括我們對花過去的經驗和印象,加起來才是我們對一朵花的感知。

                 格式塔心理學家認為這些原則之所以存在,是因為頭腦具有天生的傾向,可以根據某些規則感知刺激中的模式。(是不是覺得hin神奇)

                 比如,這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景,白色為圖形,則是一個花瓶;如果以黑色為圖形,白色為背景,則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。

          二、什么是格式塔原理?

          1、接近性原理
          接近性原理說的是物體之間的相對距離會影響我們感知它是否以及如何組織在一起?;ハ嗫拷ㄏ鄬τ谄渌矬w)的物體看起來屬于一組,而那些距離較遠的則自動劃為組外。              

          接近性原理的應用1--將相關元素彼此靠近放置

          使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如,在Ant Design的標題區域中,“ 搜索”功能與站點的主要導航位于同一行。但是,主導航和搜索之間的多余空格表示它們屬于不同的組,因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出,此空格至關重要。


          但是,在較小的屏幕上,無法保持此間距。為了避免將這些區域視為一個整體,頁面收縮寬度的時候,搜索后的文字隱藏了。



          接近性原理的應用2--構建清晰的結構

          應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益,從而有效地將標題與下面滾動的頁面內容區分開。此外,大頁腳的單一統一背景色  可有效地表示該區域中的所有鏈接都屬于一個組。

          創建清晰的邊界是一種強大的視覺提示,可以壓倒其他分組原則,例如接近性或相似性。因此,當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時,它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分,那么我們可以用線框畫出邊界來達到目的。

          2、相似性原理

          如果其它因素相同,那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理,這也就是我們平時做視覺設計時的原理,比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀?為什么這里用這個顏色?為什么這兩個尺寸不一致?等等,細細體會這個相似性原理就會給我們答案,讓我們在畫設計稿時能夠有理有據。


          A相似性原理之形狀:

          在上圖中,我們頭腦中自然而然的會分成“四列”,也就是圓形一列,三角形一列,然后再圓形一列,三角形一列,而不會看成“三行”


          B相似性原理之顏色:

          應用共享的顏色來表示某些項目是相關的,因此可能具有相似的功能,這很有效。通用顏色往往比其他特征(例如形狀)更加突出,因此可以用于組合不同類型的元素并傳達它們確實相關。         

          在用戶界面設計中,顏色通常用于指示常用功能。例如,使用單個鏈接顏色作為與用戶交流可點擊內容,鏈接顏色應僅保留給交互式文本和其他可單擊元素,因為用戶會意識到所有具有此特征的項目都是相關的,并且以相同的方式工作。因此,鏈接顏色不應用于關鍵字,不可點擊的標題或實際上不可點擊的附近圖標。

          如上圖,就是一個用色的反面例子,“ 消息中心”中的所有按鈕均為綠色,因此用戶必須花時間確定哪個是提交表單的主要按鈕。(此外,“ 提交”按鈕離消息區域很遠,并且根據Fitts的定律,這種缺乏接近性也會降低用戶的速    度。)

          相同顏色的按鈕將被視為具有相同的重要性級別。因此,應為主要操作性按鈕保留單獨的顏色,以幫助它們在輔助按鈕中脫穎而出。

          C相似性原理之大小:大小也可以用來表示關系。大小相似的對象可能被認為是相關的,通常具有相同的重要性。

          在用戶界面中,我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度,并且在所有其他條件相同的情況下,將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構,并使頁面易于掃描,因為人們可以立即看到并理解這些類型分組。

          例如,在產品列表頁面中,每個單獨的產品列表都以相同的大小(和相同的形狀)顯示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時,就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。


          下面是我最開始嘗試的招聘系統首頁的改版:

          根據上面的相似性原理和接近性原理就可以很容易看出來,這個頁面結構和邏輯不清晰:

          1.待處理和招聘日程兩個模塊之間的區分不夠清晰:因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕(相似性原理),讓用戶在心理上產生聯想,同時這兩個模塊之間只靠間距來區分,區分的太弱了(接近性原理)

          2.招聘日程頭部日期與下面的面試安排卡片聯系太弱:因為面試卡片用了非常強的邊界區分的線條(接近性原理-構建清晰的結構)確實在面試模塊之間構建了清晰的結構,與此同時卡片與頭部的日期之間看起來沒有什么關聯。

          3.首頁的選中效果太弱,分析這個頁面的層級,左側首頁選中才應該是最重的,能讓用戶第一眼就知道在系統中的位置,很顯然目前來看很容易忽視首頁這個位置,關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。

          根據格式塔原理中的相似性原理和接近性原理,對頁面的結構進行了調整,就看起來清晰多了。

          所以,我們在制作完設計稿后,可以應用格式塔原理,分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。


          3.連續性原理

          視覺傾向于感知連續的形式而不是離散的碎片。

          連續理解起來是很簡單的,但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。

               

           4、封閉性原理

          視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

          閉合可以實現統一整體,這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考,就是不閉合時候也會實現統一的整體,更確切的說,這種現象是一種不完全的關閉。這些圖形與設計給人以簡單,輕松、自由的感覺。所以,完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo,咬掉的缺口喚起人們的好奇、疑問,給人巨大想象空間。

          5、對稱性原理

          我們傾向于分解復雜的場景來降低復雜度。


          6、主體/背景原理

          我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素,其余則是背景。這個原理經常會在海報設計中應用,這也是為什么我們做海報,做平面時,一定要制作好背景,背景的氛圍很重要。

          文章來源:站酷   作者:ZZiUP

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

          日歷

          鏈接

          個人資料

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

          存檔

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