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

          首頁

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

          ui設計分享達人

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

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

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

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

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

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

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

          活動中常見的項目類型

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

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

          undefined

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

          1. 迭代型項目

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

          undefined

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

          要解決什么問題

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

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

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

          undefined

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

          undefined

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

          undefined

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

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

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

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

          2. 探索型項目

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

          undefined

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

          確定分析框架

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

          undefined

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

          undefined

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

          undefined

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

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

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

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


          文章來源:站酷  作者:大蔥設計

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

          產品問答:產品同質化怎么破?

          資深UI設計者

          產品該如何避免同質化?本文作者依據工作中項目實踐的所思所想,從產品同質化的產生原因出發,結合企業和用戶的具體應用案例,就此話題分享了自己的想法,供大家一同參考學習。

          這篇文章只是想從個人理解的角度回答下標題問題,如有不足,歡迎指正和討論。

          一、為什么會有產品同質化?

          產品是需求實現的載體,是企業和用戶實現價值交換的媒介。需求是有來源的并不是憑空可以創造的,這也就意味著可見的、可交換且可盈利的需求在一定程度上(沒有新元素加入的情況下)是有限的(這和需求本身的無限性并不沖突)。再也不是移動互聯網初期一片藍海,站在風口就可以起飛的時代了。

          除了這個外部因素外,新業務的試錯成本往往比已經驗證過可行性的產品來的高的多。因此,為求穩,也有不少本身有實力的公司會進入相同的賽道一爭高下。

          但是沒有差異的產品對用戶來說由于替代成本低,很難維持穩定的用戶群體。本文分別從用戶分析和企業核心競爭力兩個角度分析,在同質化中尋找突破口。僅為作者本人經驗和觀點,如有不足和問題,歡迎溝通和指正。

          二、從用戶出發,精準把握產品定位

          1. 飛豬 VS 攜程

          因為前段時間去成都需要訂酒店,原本是想單純的做下比價的。但是卻意外的發現兩個APP酒店的推薦邏輯差異甚大。

          根據推薦結果不難發現,攜程的關鍵詞是商務型、中端酒店,而飛豬則更偏重于經濟型、酒店公寓(民宿),且兩者在整體均價上也是拉開了差距的。

          攜程作為出行行業的老大哥,在移動互聯網還沒有普及時,就已經占據旅游出行機酒業務的半壁江山了,特別是商務出行板塊。而酒店線上預訂業務本身就是偏重于供給型,沒有資源就沒有話語權。

          而在這種情況下,飛豬通過抓住近年旅游行業爆發的契機以及大眾對民宿接受度的提高,把握年輕群體對休閑游、窮游的訴求,加之其對小型公寓酒店、民宿的扶持和曝光(19年成立了菲住酒店聯盟,實現聯盟會員共享),實現了這部分用戶和商家的在線交易。

          雖然從表象上看產品的形式是相同的,都是酒店預訂,但是產品本身的定位和底層邏輯的不同,各自圈定了不同的用戶實現了差異化競爭。

          2. 巧克力VS口紅

          上面攜程和飛豬的例子是基于一個小的賽道在做細分,如果只將目光放在這個層面,那只是在“分餅”,但是這種情況下餅的大小總是有限的,如果不換個角度“把餅做大”,在競爭嚴峻的當下也很難長久的不被打倒。

          之前在阿里媽媽的公開課中看到過這樣一句話:今天巧克力最大的競爭對手是誰,不是糖果,不是堅果,而是口紅。

          這是基于當今消費并不只基于個人的需要,而是越來越多的扮演著情感表達、場景營造的角色(基于阿里媽媽2020消費觀察數據),25歲男性對口紅價格的接受度甚至是女性自用的三倍,口紅逐漸蠶食了巧克力在男女戀愛市場中穩固的禮物寶座,想想在口紅一哥李佳琪的一聲聲“OMG,買它”中,多少男性也同時乖乖的掏出了腰包。

          因此,我們差異化的思考不應該只局限于品類下人群的思考,也應該基于不同的場景去挖掘場景下的用戶群體。

          三、從企業出發,發揮企業核心優勢

          1. 美團優選 VS 橙心優選 VS 多多拼團

          今年年初的疫情,雖然對各大行業都造成了不同程度的損傷,但是卻“社群團購”這個模式看到了曙光。

          艾媒咨詢數據顯示,在疫情的刺激下,2020年社區團購市場發展迅猛,市場規模預計將達到720億元,而未來隨著市場的良好增長態勢,2022年中國社區團購市場規模有望達到千億級別。

          各大平臺也在下半年爭相加入這個賽道:美團、滴滴、拼多多相繼推出了美團友選、橙心優選和多多拼團,均將其作為下個階段的業務重點。

          本身社群團購這個模式本身是可以成立且存在用戶體量龐大。但是,從松鼠拼拼到呆蘿卜,都昭示著生鮮、社群并不是一個好啃的骨頭。

          從三個平臺目前呈現出的產品來看,產品邏輯是一致的,依然是通過團長建立社群拉流量下單并獲得提成的模式,前期搶地盤搶團長的價格戰看來是在所難免了(某鹿已經為能夠薅到羊毛平臺羊毛開始暗自竊喜了),但是價格戰始終是雙刃劍,并不是長久之計。

          這就需要深究,相同的模式,企業通過什么實現差異化競爭。這三家平臺加入這場戰役,憑的到底是什么核心競爭力,總不能真的是指望靠燒錢燒到行業第一吧。

          回歸社群團購這個模式本身面向的群體是偏價格敏感型,且因為社群本身快速傳播的特質,對品質的要求更為嚴格了,真正是要求物美價廉。對供應鏈和履約的要求十分高,也難怪乎有人說“社群團購,始于團長,終于供應鏈”。

          對于美團來說,O2O的基因是刻在骨子里的,本地現成的數以萬計的線下商家都是潛在的團長,且這些團長是自帶線下流量的;對于線下B端的管理和運營也是輕車熟路;此外線下商家支持以供應商模式入駐美團優選為平臺供貨,對于平臺品類的豐富度提升有極大幫助;外賣配送的管理經驗讓他在物流上也占有相當優勢。

          滴滴原來的行業布局和社群團購看起來似乎是毫不相關的,但其對在線下司機的管理、運營上是有一定沉淀的,而對于團長的管理在這個點上是可以互通的,在團長履約上是具有一定保障的。而滴滴因為有貨運的布局,其在物流上是具有一定優勢的,社群團購雖然時效要求沒有外賣高,但也都是要求次日達的。但在供給上的劣勢也是十分明顯的。

          早期多多是從生鮮水果拼團開始做起,不排除他在這塊供應鏈的運營和把控上是有積累的,且從早期的生鮮價格來看,其價格優勢較為明顯。同時因為拼多多原生用戶群體中一大部分都是對“白牌”價低質優商品存在相當高接受度的用戶,相信價格和品牌差異(限于標品,非生鮮果蔬類)依然會延續成為多多拼團的優勢。

          但拼多多目前一直只有線上電商業務,本次社群團購是其首次轉戰線下履約的嘗試,其挑戰難度也是不言而喻的。

          所以基于以上的剖析,從我的角度來說,這三家中,我個人目前是更看好美團優選未來前景的,他底層在供應鏈上的優勢差異是目前另外兩家還無法達到的。不過這個領域盤子不小,各家發揮優勢的話后續還真不好說。對于這場仗,我拭目以待。

          總結

          基于以上論述,即使是看似“同質”的產品和業務,但是通過對業務的理解,對用戶的挖掘,對企業自身優勢的把握而實現“不大相同”的邏輯,我認為這就是身為產品經理很重要的意義所在了。希望我們都可以做出各自領域與眾不同的產品來。

          文章來源:人人都是產品經理    作者:麋鹿產品   

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

          亞馬遜成功背后的體驗設計邏輯:成功的設計并不需要美觀

          周周

          亞馬遜作為一個知名的電商平臺,它的成功背后卻有一個很難讓人理解的設計邏輯:成功的設計不一定是美觀的。為什么會這么說呢?本文將從四個維度展開分析,希望對你有幫助

          B端產品中,Web端表單如何設計

          周周

          編輯導語:B端產品往往由于業務體量龐大,導致信息復雜,同時對業務的性的要求很高;服務于B端的業務,不能夠出信息錯誤,填錯一個信息,就會引發巨大的問題。本文結合筆者自己的工作經驗,總結了大型B端業務中表單的設計方法,供小伙伴參考。

          一、表單的定義

          表單是信息添加、錄入的通用形式;其作為獲取用戶輸入的重要交互方式,也承擔著將問題和答案進行配對的角色。

          二、表單的設計原則

          設計原則是任何一種解決方案的指路燈,它們體現解決方案應包含的基本目標。

          針對互聯網表單設計,我倡導的原則如下:

          1. 盡量減少痛苦;
          2. 說明填寫完成路徑;
          3. 考慮情境;
          4. 確保一直溝通。

          三、表單的結構

          我們先看看表單的結構,表單主要由5部分組成:

          1. 標題:這個元素幫助用戶引導完成表單填寫的整個過程,尤其在你對信息進行分組方便用戶填寫時,特別有用。
          2. 標簽:告訴用戶相對應的輸入字段的含義。
          3. 輸入域:包含了文本框、密碼框、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
          4. 提示信息:包含幫助信息、占位符和反饋信息提示。
          5. 操作按鈕:包括提交按鈕、保存按鈕、復位按鈕和一般按鈕;用于將表單數據傳送到服務器上。

          四、表單的表現形式

          1. 標簽

          標簽根據標簽與輸入域的位置關系,分為:左對齊、右對齊、頂部對齊、內聯標簽、圖標標簽和浮動標簽。

          每種標簽樣式都有自身的優點與局現性,根據不同的場景選擇適合的標簽樣式,能提高用戶閱讀效率,同時還能降低信息填寫時的錯誤率。

          1)頂部對齊:根據Matteo Penzo 發布的關于標簽放置的文章表明:采用頂部對齊的標簽樣式,瀏覽表單所需的時間最短;如果希望用戶能快速掃描填寫表單,頂部對齊的標簽是一個不錯的選擇。

          頂部對齊的結構,使得能放下更長的標簽;但對于縱向空間是一個挑戰,當填寫信息過多時,表單就會很長。

          • 優點:有最快的瀏覽和處理速度,同時標簽長度彈性大。
          • 缺點:非常占縱向空間。

          2)左對齊:左對齊標簽,文字開頭按閱讀視線對齊,符合人們的閱讀習慣,是有利于閱讀的。

          瀏覽表單所需時間最長,但是緩慢完成率并不總是一件壞事——如果表單要求敏感數據(例如提供駕駛證、身份證、銀行卡號等,可以故意減緩用戶的填寫速度,來確保填寫的準確性)。

          左對齊的結構需要更多的橫向空間,因此在移動端的呈現上可以是個問題。

          此外,在屏幕空間有限的情況下,也會一定程度上限制了標簽和輸入框的長度。

          • 優點:文字開頭按閱讀視線對齊,方便閱讀,節約縱向空間。
          • 缺點:填寫速度慢,標簽長度和輸入框彈性小。

          3)右對齊:右對齊使得標簽和輸入之間的距離固定,有明確的視覺關聯。

          對于簡短的表格,右對齊的標簽可以有很快的完成時間;但由于標簽長短不同,左邊緣參差不齊,整體掃讀表單的時候不容易了解全部信息。

          與左對齊類似,在屏幕空間有限的情況下,也會一定程度上限制了標簽和輸入框的長度。

          • 優點:時間較短,節約縱向空間。
          • 缺點:整體可讀性低,標簽長度和輸入框彈性小。

          4)內聯標簽:內聯標簽由于它對空間的占比很小,往往運用于移動端的界面設計中;但如果在交互上處理不好,會有很大的缺陷。

          內聯標簽是用作提示性文字,來告訴用戶應該填寫什么內容,但用戶在填寫的適合,它就會消失;因此用戶無法仔細檢查他們是否寫下了所要求的內容,這增加了錯誤的可能性。

          另外一個問題是:用戶可能會把占位符文本誤認為預填數據,因此忽略它(正如尼爾森諾曼集團的眼動追蹤研究所證實的)。

          • 優點:空間占比小。
          • 缺點:在增加錯誤的可能性。

          5)圖標標簽:圖標標簽是內聯標簽的一種演化形式,在一定程度上緩解用戶的困惑和自我懷疑的心理。

          但就圖標而言,用戶需要時間來反應它所代表的意思——若表意性不強或者并不是常見的圖標樣式,用戶就要思考和猜測它的含義。

          此外,輸入項一多,還得記憶那個圖標所對應的意思。

          • 優點:空間占比小;在一定程度上緩解用戶的困惑和自我懷疑。
          • 缺點:可能造成用戶的認知負擔,增加用戶記憶成本。

          6)浮動標簽:用戶在輸入時,內部標題(提示信息)進行浮動位移,即節省了空間,提示性信息依舊在。

          但相比其他幾種標簽樣式來說,需要一定的開發成本。

          • 優點:空間占比小,無需用戶對標簽進行記憶
          • 缺點:需要一定的開發成本

          關于標簽樣式的選擇

          2. 輸入域

          輸入域是表單的核心主體,包含了文本框、選擇器、開關、復選框、單選框、步驟條、滑塊、上傳、標簽頁等控件(按類型分)。

          選擇適合的控件樣式,能在一定程度上提高表單填寫的效率。

          在輸入域中,存在多種控件樣式,那么在設計產品的過程中,我們該如何選擇,如何取舍呢?

          以下是我在日常工作中的一些摸索,也包括借鑒前輩的一些經驗。供大家參考。

          1)文本框

          文本框包含了單行文本框和多行文本框。

          針對單行文本框的設計建議:

          a. 選擇適合的大小,它的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。

          如下圖即一典型案例,一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理的話,容易誤導用戶對所需輸入金額的判斷,造成極大不安全感。

          b. 采用字段掩碼,自動匹配特定數字的輸入格式。

          例如:電話、身份證、銀行卡等;按照7加減二法則,根據用戶的記憶結構來最大化提升閱讀體驗。

          c. 彈出鍵盤應與需要輸入的文本類型相匹配(移動端)。

          d. 涉及到金額輸入時,當用戶輸入的金額超過千時,出現最高分位提示,每多輸入一位,最高分位隨之增加。

          e. 文字輸入最好有自動補全、自動建議功能,減少不必要的文字輸入,減少出錯。

          例如:填寫地址欄通常是表單中最成問題的部分,像地址自動填充(基于用戶的定位和輸入提供準確的建議)的工具使用戶能以更少打字量完成輸入。

          f. 有限制輸入時,給予用戶明確的提示,增加用戶感知,減少出錯率。

          知識擴展:什么是7加減二法則?

          早在19世紀中葉,愛爾蘭哲學家漢米爾頓觀察到,有一個神奇的7±2效應;意思就是人們的短時記憶的信息量是7個,可能會上下浮動2個。

          針對多行文本框的設計建議:

          使用可拉伸的文本框比固定框更好,從使用體驗講,可變化的文本框使頁面整體效果更統一。

          固定文的文本框當輸入文本超過其設置的寬度,會出現內滾動條,當頁面上出現兩個滾動條時(大頁面的滾動條),在使用操作上會帶來一定的混亂。

          2)選擇框

          包括下拉列表、選框、開關、日期選擇器等。

          對于選擇框有如下幾個建議:

          a. 避免設置默認值:除非您認為大部分用戶將選擇該值,尤其是必填字段。

          為什么?

          因為你可能會增加錯誤,用戶會快速掃描表單,所以他們可能會跳過一些已經有默認值的字段。

          但是這個規則不適用于智能的默認值,也就是根據用戶的信息設置的默認值;因為智能的默認值可以使表單更快,更準確地完成。

          例如:根據定位數據預先選擇用戶所在的國家/地區。

          不過,請謹慎使用。

          b. 當選項很多時,提供檢索功能。

          c. 提示信息要明確,要讓用戶明確自己選擇的是什么。

          3)單選框與復選框

          a. 按一定的邏輯進行選項排序,例如根據發生的可能性、難易程度、風險大小來排序。

          b. 選項應該易于理解,容易區分。

          c. 盡可能提供默認選項。

          4)關于控件的選擇

          a. 選擇框優于輸入框。

          任何高密度的操作,都會引起用戶的不適;因此,在輸入項的選擇時,用選擇來代替鍵盤輸入。

          • 一方面:簡化用戶的操作,點擊次數遠小于輸入,減少用戶的操作密度;
          • 另一方面:減輕用戶的認知、記憶負擔。

          相較于輸入框,選擇操作步驟少,相對來說效率較高;同時,用戶用思考輸入值,也不用承擔輸入錯誤要重新輸入的風險。

          用戶可以通過選擇項,清晰明確的知道有哪些值可以選擇,對于一些無關緊要,或者用戶較難理解的輸入項,可以預制默認值,可以照顧到各階段的用戶。

          b. 單選框與下拉選擇框。

          單選框較為適合選項較少(少于五個),同時選擇項之間較為類似,需要強調或對比時,可以優先考慮單選框。

          另外,當選項能見度和快速響應優先時,也建議優先考慮單選框。

          因為相較于下拉選擇,用戶可以通過展示出來的選項,直接選中目標選項,提升輸入效率。

          下拉選擇框較為適合選項較多(超過五個),有默認選項或者選擇項之間有較大差異,同時下拉選擇,最好不要引起隨后輸入項數量以及頁面的變化;否則下拉選擇的收起以及頁面的變化,易引起用戶不適。

          若選項過多,超過二十個,最好引入模糊匹配以及一定排序規則(首字母排序、數字排序等),方面用戶提前預知選項的大致位置,或通過模糊檢索找到相應的選項。

          5)關于必填項

          大多數情況下,所有字段都是必填項,只有幾個字段是可選的,一般用“*”標記必填字段。

          但星號并不適合所有類型的用戶,記得之前客戶問星號是什么意思?

          它是頁面中的標簽還是描述中的標簽;同時,并且紅色會從用戶方面引起負面關聯,因為紅色表示錯誤。

          為了避免這種誤解,可采用文本框內暗提示。

          它也是一個比較清晰標志必填項的方式,并且還很節省空間,也能在一定程度上起到視覺降噪的作用。

          3. 提示信息

          提示信息可以分為引導性提示(幫助文字、輸入框提示、錯誤提示信息)和反饋性提示兩種。

          這里主要想講講錯誤提示的設計:

          1)關于錯誤提示的最佳位置

          Javier Bargas-Avila和Glenn Oberholzer對表單驗證的研究發現——在表單頂部顯示所有錯誤信息,會給用戶的記憶造成較高的認知符合,會強制用戶回憶每個錯誤輸入框中的錯誤消息。

          錯誤信息提示在輸入框行間顯示是減少記憶認知負荷的有效方法。

          它可以幫助當場識別錯誤而不是靠回憶錯誤,縮短反應時間,提高表單填寫效率。

          因此,錯誤信息提示與錯誤的字段鄰近放置可以獲得最佳性能。

          下面來看一個簡單的例子,如下圖:

          當我們在錄入客戶信息時,假設填寫錯誤手機號碼,按照上面的論述,錯誤提示可以最直觀的顯示在這4個位置。

          哪一個位置是最佳位置呢?

          答案是:右邊。理由如下:

          a. 錯誤信息提示右邊,符合人們從左到右的閱讀習慣;用戶視覺路徑自然流暢,很大程度上減少了用戶的精力和視覺工作。

          放在左邊則恰恰相反,同時左邊與用戶期望相違背,因為左側放置更高優先級的元素,是我們的直覺。

          但事實上用戶需要專注于糾正他們的輸入,因此輸入框應該是更重要的元素。

          b. 對于上邊的錯誤信息提示,有著更高的認知負荷。

          當標簽頂部對齊時,錯誤提示和輸入框中的提示這兩個文本靠得很近會產生視覺噪音,用戶注意力被分散,很難專注于其中一個,并且可能混淆它們。

          c. 放置下邊的錯誤信息提示,雖然不符合從左到右的閱讀習慣,但它確與自然的從上倒下的閱讀流程相對應。

          手機屏幕缺少水平空間,把錯誤信息提示放置在下方是個不錯的選擇。

          雖然它可能會增加用戶閱讀文本時的認知負荷(與類比上邊的錯誤信息提示),但可以通過將它們隔開足夠的間隔來防止這種情況。

          綜上所述,如果是web端請選擇放置在右邊,如果是移動端則放置在下邊。

          當然,如果開發時間有限,都選擇放置下邊也可以,方便適配。

          2)幫助信息

          有時候需要幫助性信息,來輔助用戶完成表單填寫。

          當文本簡短的時候,可以直接放在改輸入框的附近。

          當文案過長的時候,就需要做氣泡框——獲取鼠標焦點,則展開信息,失去焦點則消失(在氣泡展開時,切忌勿擋住input輸入框)。

          也有些產品是將幫助信息放在頁面頂部,如果是針對全局幫助性信息,則可以采用這種方式。

          如果只是針對某個元素提醒,則應將兩者放在一起,讓用戶知道當前處于什么地方,在針對什么進行引導、輔助。

          五、復雜業務表單布局結構探索

          在復雜業務表單設計中采用單列布局,大家有沒有遇到過類似的問題,例如:

          • 客戶1:“單列右側空白區域過大,留白多,表單太長啦?!?/span>
          • 客戶2:“單列縱向占比大,表單太長,我看不到全部內容?!?/span>
          • 客戶3:“怎么不采用多列,多列我能看的內容多啊”等等…

          針對這些問題,我們團隊從自身的業務出發,對復雜業務表單布局進行了相應的探索。

          1. 多列與單列的探索

          首先,我們根據下圖的規則對復雜業務的表單布局進行多方案的實驗:

          方案一:采用4列布局,標簽頂對齊。

          那為什么標簽不采用右對齊呢?

          四列布局,頁面已經很擁擠,加上標簽長度長短不一且最大長度也無法確定(用戶自定義),所以放置采用了標簽頂對齊。

          總體上來看,縮減的長圖并不理想。

          方案二:三列布局,標簽右對齊的方式。

          由于三列布局,頁面空間較大,嘗試著把標簽右對齊,總體上達到了縮減表單長度的目的。

          但字段若出現換行,則頁面信息模塊是混亂的。

          根據CXL研究所的發現:單列表單比多列表單完成得更快一些。在這項研究中,參與測試的人完成單列表單的平均速度比多列表單快15.4秒;多列布局雖然縮減了表單長度,空間利用率也提高了,但整體的填寫效率降低了,這與表單設計原則相違背。

          同時從開發效率來看,單列成本較低(多列需要做響應式);從業務承載上看,單列擴展性更強,適合復雜多樣的業務場景(多列適合交單一的場景)。

          綜上,最后還是采用單列布局。

          2. 單列布局在復雜業務中運用

          面臨的問題該如何解決?

          我們團隊重新審視了客戶的這些反饋:空白區域過大、留白過大、表單太長、我看不全、不知道什么時候可以填完等等。

          我們嘗試把這些問題翻譯成:我無法預知表單的填寫內容,我想要是把空白的地方也利用上我是不是就看全了整個表單。

          如果是這樣,用戶的本質述求就是想要掌控感。

          對現有的單列布局做了以下幾個處理:

          • a. 采用卡片式布局,區分內容;
          • b. 增加引導式的定位錨點;
          • c. 在錨處加入微動效反饋,給予用戶確定感。

          感謝閱讀!本文給表單設計提供了一個基本的指南,在具體項目中,你可能需要根據產品特性和用戶需求進行調整。


          文章來源:人人都是產品經理           作者:@Nick 


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

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

          周周

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

          6. 利用聲音和觸感喚起用戶的情感

          這里的聲音特指“Hero sounds”,用于襯托一些喜慶的、重要的高光時刻,它們常被用來激起用戶的情感,或烘托一種喜悅的氣氛,從而塑造產品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds:慶祝用戶進行了某項操作;歡迎用戶使用新的應用程序或體驗;確認用戶成功使用某款產品。——《谷歌聲音設計指南》

          聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到,Hero sounds出現的次數不應該頻繁,否則無法突出其重要性。通過在同樣的環節提供同樣的聲音,久而久之用戶會將這種提示音與成就感掛鉤,從而增加對產品的粘性。如每成功更新一次應用程序就會出現慶祝的聲音,或者每次待辦事項標記為完成后就會出現慶祝的提示音。

          不管我們是否注意到這一點,我們所聽到的產品的聲音與自己的感覺都是相掛鉤的。無論是手機發出的“叮咚”的消息提示音,還是MacBook的廢紙簍在清空時發出的揉紙的聲音,都在某種程度上影響著我們的情緒,也幫助我們更加了解用戶界面上發生的一切。

          觸覺可以和聲音配合使用,也可以單獨使用。舉個例子,在手機黑屏的時候,觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時,觸覺應該強有力、傳達愉悅的情緒?!栋沧坑|覺設計指南》

          除了聲音之外,觸覺設計(如震動)也是一種刺激感覺的好方法,可以為用戶提供更加完整的體驗。用戶可以通過觸覺提示來嘗試、學習使用某一款產品。在有了不同的觸覺體驗后,我們將會對產品的某些功能有更加深入的了解。

          舉個例子,如果某個用戶通過APP進行付款,但在付款過程中出現了錯誤。這時候APP會進行一連串緊張、短促的震動,對用戶進行錯誤反饋。當用戶熟悉了這種震動模式之后,下一次再感受到這種震動,就會立刻知道付款出現了問題。

          產品設計師很容易忽略聲音和觸覺這兩個板塊,而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果,可以為用戶體驗錦上添花。

          7. 通過動圖表達獨特的風格、塑造個性化品牌體驗

          圖片來自Material

          動圖可以增加用戶的好感,在互動中為用戶增加個性化體驗,也可以表現品牌獨特的風格。——《谷歌手勢設計指南》

          動圖是我自己設計的產品Confetti中一個非常重要的因素,這是一款運動追蹤APP,是為那些追蹤自己生活習慣的用戶設計的。在設計這款產品時,我希望可以為用戶創造出一種滿足感,鼓勵他們培養好習慣。在這款APP中,我大量使用切換功能,通過不同的手勢,界面或進程可以平滑過渡,使用起來非常便捷。當一個好習慣完成時,還會出現彩屑動畫飛舞的,加強用戶的滿意度。

          簡言之,動圖可以應用于不同的場景,通過過渡和變化的吸引用戶。

          動圖可以強化兩種元素之間的聯系,實現快速切換,迅速解決特定的任務。動圖可以讓用戶專注于眼下最重要的事,不被其他因素所干擾。——《谷歌手勢設計指南》

          在2020年,你的產品可以在一秒之內激怒用戶。正如塔拉斯·斯凱斯基(Taras Skytski)在《用戶體驗設計中動畫使用的終極指南》中指出的那樣:“眾多研究發現,界面動畫的最佳速度在200到500毫秒之間。這一數字是通過研究人類大腦運行機制所得出的。100毫秒及以下的動畫因為速度太短而無法被識別,而超過1秒的動畫則會造成一種延遲感,讓用戶感到不舒服?!?/span>

          通過動圖及產生的動畫效果(如切換)可以改善用戶體驗,同時保證可以迅速找到需要的版面,而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間,又不能改善體驗,那么這種環節就沒有必要存在。

          8. 通過圖像進行交流,并區分和突出產品特性

          圖片來自Bribble|制圖Elena Petkovska

          我們或多或少都有這樣的體驗:打開一個界面,里面充斥著太多文字和太少的圖像。在用戶體驗設計中,展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產品,而是希望通過圖像對一款產品進行直觀的視覺理解。

          你所選擇的圖像應該能夠清晰地展示產品特點,不管是用戶自己上傳的圖片,專業攝影師的圖片,還是插畫風格的圖片,它們都應該能直觀展示產品外觀,反應產品的特點?!豆雀鑸D像設計指南》

          APP里的插圖和所有的視覺元素一樣重要,好的圖片可以讓用戶界面更加生動,使用戶體驗更加完善。恰當的圖片還能展示品牌風格,成為無聲的“故事講述者”。

          我們應當有目的地使用圖像,作為總體內容的補充而非替代。照片或者插圖最好能夠傳達足夠的信息,如產品外形、風格,APP的用途,狀態等。媒體界有這么一句話:一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網站上找到高質量的圖片。

          9. 關注產品的像素密度

          圖片來自Material

          用戶界面設計中應該關注產品的像素密度,讓界面可以適應不同的屏幕?!豆雀柘袼孛芏仍O計指南》

          像素密度(PPI)是用來衡量每物理英寸的像素數。另一個常用的單位是DP(Density-independent pixels,有時候簡稱為DIP)。像素密度=屏幕寬度或高度(以像素為單位)/屏幕寬度或高度(以英寸為單位)。

          在設計界面時,我們不應該只關注像素,還應該關注不同設備的像素密度。這樣可以讓我們在做設計時保證元素適當縮放,以適應不同屏幕的尺寸。

          舉個例子,我們現在有一個按鈕素材資源,大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示;在一個320ppi的屏幕上它就會擴大成400 x 100 px,相當于原始素材的兩倍大。

          通過以上例子我們可以了解,在像素密度不同的屏幕上,素材呈現的狀態是不一樣的。在實際應用中,素材可以會被放大三倍甚至四倍,如果素材不夠清晰,就會在拉大后虛掉。這就需要我們在選擇素材時格外謹慎,嘗試在不同設備上打開并檢查。

          素材密度如何適應屏幕尺寸?舉個例子,iPhone XS Max的屏幕是414 x 896 pt,注意這里的尺寸是物理尺寸pt,而非像素。如果以像素為單位計算,那么它的屏幕是1242 x 2688 px。所以當我們為iPhone XS Max設計應用產品時,我會首先考慮用414 x 896 pt的素材,然后在輸出素材時將其乘以3。

          10. 考慮設計在線/離線狀態

          圖片來自Material

          離線狀態可以讓用戶知道這款應用程序沒有連接網絡。如果你的產品有一些功能需要聯網使用,你最好能向用戶明確顯示連線狀態?!豆雀桦x線設計指南》

          離線訪問功能是設計師經常忽略、對用戶體驗影響卻非常重要的一環。雖然有些功能離線也可以使用,但是在能聯網的時候,最好還是主動提示用戶,推薦他們連接網絡。

          如果有可能的話,要提前告知用戶下載相關信息,以便脫機訪問。最常見的例子就是Spotify等音樂應用程序,它允許用戶下載歌曲,以便在沒有網絡的時候也能繼續聽歌。

          假如你的產品不像Spotify或者Netflix那樣需要下載具體內容,你可以發揮創意來設計在線、離線兩種模式。

          谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子(在谷歌瀏覽器連網的過程中,離線畫面會出現一只霸王龍,按空格鍵或者向上的箭頭就能控制霸王龍——譯者注)。這個小游戲填補了用戶等待連線的時間,將消極體驗轉變成了積極體驗。

          11. 總結

          我希望這份設計指南可以為你提供一些想法。除了谷歌的設計指南之外,我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網站找到關于用戶界面和用戶體驗的設計指導,在這一領域進行更深入地探索。


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


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

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

          ui設計分享達人

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


          用戶行為分析

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


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

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

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

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

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

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

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

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

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


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


          一、了解用戶需要什么

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


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


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


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

          系列產品。

                        


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


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


          二、遵循用戶的習慣

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


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


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

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


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

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


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

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


          二、顛覆用戶的習慣


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


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

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


          2、發展中的知識和技術

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

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

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

          轉自:站酷-忻蕓



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

          ui設計分享達人

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

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

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

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

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

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

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

          活動中常見的項目類型

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

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

          undefined

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

          1. 迭代型項目

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

          undefined

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

          要解決什么問題

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

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

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

          undefined

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

          undefined

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

          undefined

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

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

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

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

          2. 探索型項目

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

          undefined

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

          確定分析框架

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

          undefined

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

          undefined

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

          undefined

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

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

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

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

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

          ui設計分享達人

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


          大綱要點:

          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

          在沒有其他方法的情況下,圖標可以成為理想的指示工具。——《谷歌材料設計指南》

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

          在用戶和產品交互之前,插入動畫效果。——《谷歌材料設計指南》

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

          2. 有動畫效果的圖標

          圖片來自Medium|制圖Eddy Gann

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

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

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

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

          動畫效果可以根據需要設計出簡單或復雜的運動軌跡。圖標雖然小,卻是影響用戶體驗非常重要的一環,我們可以通過設計復雜的運動軌跡來強調它的重要性。——《谷歌材料設計指南》

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

          3. 調色板的生成和使用

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

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

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

          4. 顏色

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

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

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

          色彩也可以是一種交互元素,要考慮它們在什么地方交互,希望達到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩設計指南》

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

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

          5. 文字類型生成工具

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

          Google Fonts是谷歌研發的一款文字類型生成工具,可以使用它來調節字體、大小等。您可以根據需要調整和優化產品的文字設計。——《谷歌材料設計指南》

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


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


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

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

          資深UI設計者

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


          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 從屬交互

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


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

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


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

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


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

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


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


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

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


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

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


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

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


          結論

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


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


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


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

          日歷

          鏈接

          個人資料

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

          存檔

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