<strong id="jzqzp"><pre id="jzqzp"><xmp id="jzqzp"></xmp></pre></strong>
<tt id="jzqzp"><span id="jzqzp"><blockquote id="jzqzp"></blockquote></span></tt>

          首頁

          如何進行表單體驗優化-中臺系統

          周周

          本篇文章將分享Web端表單體驗優化等相關內容,分析設計師在設計B端類產品時如何讓用戶愉悅并的填寫表單。

          表單作為基礎通用組件,也是在各個企業級中臺中出現頻率最高的元素之一。在用戶界面中表單無處不在,比如:用戶注冊登陸頁、支付頁、用戶反饋、共享信息數據錄入等不同類型的表單。當我們使用/設計表單頁面時看似是按鈕、輸入框等表單組件進行組合搭配使用,看似簡單,但是在實際業務使用中卻有著無數可推敲的細節冒出來,常常給設計師造成較多的困擾。

          那么在實際工作中哪些內容會給設計造成困擾呢?舉幾個例子:在實際的業務中很多產品因為業務導向需要入海(非中國區方向),所以就存在表單標簽對齊方式問題,如果右對齊可能在中文的情況下表單標簽預設寬度正好合適,但是當用戶切換到多語言時因為語言差異會導致折行嚴重等一些列問題,相當影響體驗;設計師常常疑惑表單標簽是頂部對齊、右對齊還是左對齊,他們的差異點在哪呢?必填與非必填項以什么形式告訴用戶會更加合理呢?表單按鈕放在頁面哪個位置體驗會更佳呢?

          所以我們不能忽視這些設計細節,往往一些好的設計細節提升總會給用戶帶來不一樣的用戶體驗。針對以上這些舉重若輕的問題我們一一明確、拋出并與大家一起來進行由淺至深的探討「如何提升表單體驗」。

          重點概覽

          一、表單分析

          二、體驗與優化
          三、排列與布局
          四、寫在最后 

          表單分析

          1.1 表單的重要性

          在上面的前言中也提到了表單作為基礎通用組件,也是在各個企業級中臺中出現頻率最高的元素之一。并且在《Web Form Design》一書中 Luke Wroblewsk 也提到了“表單決定了最關鍵的界面中交互的成敗”,當用戶使用網站時會有一個特定目標,如果設計得好,網站將實現有效性。效率、用戶主觀滿意度以及特定用戶在特定使用環境下所達到的特定目標,也是設計師想要達成的最終目標。表單往往是目標用戶和整個產品的一所橋梁。因為,盡管人機交互的發展進步,表單仍然是用戶在網絡中進行交互的主要方式。所以表單是被認為完成目標的最終,也是最重要的階段。

          我們以淘寶來舉個典型的例子,淘寶屬于國民電商平臺也是亞洲較大的網上交易平臺,提供各類優質商品。從平臺的特性來講,它以用戶下單并成交作為最終目標。其中支付表單起著一個關鍵的作用,用戶從購買到支付完成以分步形式進行,第一步填寫基本信息并提交訂單,第二步選擇商品并選擇支付貨款至第三方,第三步買方確認收貨并自動打款給商家,第四步完成訂單并評價。在填寫表單時中間沒任何阻斷,用戶能很順利的按步驟完成訂單。淘寶支付表單屬于比較典型的分步表單。

          1.2 拆分表單

          我們簡單提一下表單組成(網上有很多詳細的相關文章),一個完整較復雜的表單是由7個基本組成部分,表單類別、表單標簽、表單基本組件、占位提示、幫助信息、按鈕、校驗。表單可以包含以上組成部分,但不是一定都要有,比如:移動端填寫驗證碼時為了減少用戶操作,當用戶填寫完成之后直接提交表單驗證。

          表單類別:第一時間告訴用戶此段落的表單大致內容,減少用戶理解并承擔著概括內容的作用;

          表單組件:包含了輸入框、下拉框、日期選擇器、時間選擇器、開關、上傳等十幾種類型,是形成表單的核心內容;

          表單標簽:表單標簽承擔著對輸入項或設置項的解釋作用,所以表單標簽需要合理設置,核心點是幫助用戶快速理解每一項字段的作用;

          占位提示:使用通用的認知提示并且以較弱的方式呈現給用戶,用戶填完信息即消失。注意:占位提示不能替代標簽,因為消失的占位提示會拉長用戶的短期記憶,如果沒有表單標簽用戶將無法在提交表單前檢查他們填寫的所有信息。文章下面會詳細分析。

          幫助信息:當表單標簽不足以對輸入項準確說明時,這時候需要使用文本提示用戶。它不僅能讓用戶提前感知輸入后的樣式,還能夠有效的告訴用戶該如何輸入以及表單提交后達到的目的。

          按鈕:當用戶完成信息錄入時,按鈕能夠對表單內容進行校驗或提交。

          校驗:對用戶信息錄入內容進行校驗并給出對應的錯誤提示。如:內容是否為空、類型格式是否正確、是否符合業務邏輯等等。校驗時有兩種規則,分別是使用即時校驗(失焦即校驗)和點擊提交按鈕以后的最終校驗。狀態分別為錯誤、警示、成功。

          1.3 表單類型

          基礎表單

          較為簡單的一類表單,把所有表單字段平鋪在頁面中,字段內容較少。當用戶輸入少量信息即可完成一個簡單快速的任務。例如:此類型表單常常用在簡單的登錄注冊中。

          分步表單

          較為復雜的一類表單,把一個相對復雜的表單字段拆解為多個步驟進行。根據業務屬性進行步驟分組利用步驟條告訴用戶所完成的流程和進度,當用戶每次填寫都意味著一次節點完成,整個流程結束給予明確的結果反饋,并以提交成功為最終。分布表單有利于減輕用戶由于表單大而復雜的造成的填寫負擔,并且能減少用戶表單填寫出錯率。

          分組表單
           將一個復雜表單拆解歸類分組。分組表單與分布表單特點較為相似,都可以減輕用戶因為表單大而復雜的造成填寫的負擔,并且能減少用戶表單填寫出錯率

          體驗與優化

          1.1 必填項or可選項

          在設計表單時大多數設計師都習慣性的使用星號表示必填字段。但那么問題來了,針對必填項和可選項用那種形式才是最科學的呢?我們簡單分析一下。


          當表單中的必填信息多于非必填信息時,如果使用紅色星號表示必填項,那么大量紅色星號導致增加用戶的認知負擔,使得用戶無法快速識別哪些是必須填寫的,哪些是不必須填寫。并且使用紅色星號會帶給用戶一些恐懼感,它增加了出錯的風險并降低了表單填寫率。因此在表單設計中,當必填項多于非必填項時,隱藏紅色星號標記,通過暗提示標記可選項的形式來幫助用戶識別。

          紅色星號對于不同用戶也會存在不同的認知差異。對比較有經驗的用戶可能表意較為明顯,但不代表所有用戶都能理解,比如一些非中國區用戶使用國際化產品時存在不同認知,因為每個國家本地化差異較大導致認知差異。

          還有一點是表單中視覺噪聲越少可讀性越強,因此當必填項多于非必填用非必填字段提示用戶會更好。

          1.2 單列布局or多列布局

          多列表單字段會導致用戶視覺路徑變長,因為如果表單中有水平相鄰的字段,則用戶必須以Z樣式進行視線掃描,整體的效率和工作量都更大,使清晰的路徑變得模糊并加長用戶閱讀時間。多列表單可能會存在用戶跳過他們實際要輸入的必填字段,將數據輸入到錯誤字段中。而最終校驗信息時用戶得反復檢查錯誤項導致用戶放棄填寫。

          如果表單使用單列,則完成的路徑是頁面垂直向下的一條直線,單列布局能夠給用戶呈現一條清晰的視覺路。因此,表單較為簡單時盡量避免將表單分成多列,在業務場景允許的情況盡量使用單列(部分業務訴求和一些特定場景要求,多列布局會更節省垂直空間,但是多列布局需要考慮字段之間的關聯性,這里不強求一定只能使用單列布局)。

          1.3 將復雜的表單分為幾個簡單的步驟

          在設計師設計表單時可能業務場景復雜、字段較多,即使設計師把很多不必要的字段都刪除也解決不了根本問題。所以,這時候設計師需要將大型任務分解為一系列較小的任務,使得表單更加的簡潔。這種方式的好處是能將步驟以視覺的方式傳達給用戶數量、名稱、說明等信息,更加提高用戶滿意度并且能激勵繼續填寫。

          但是設計師需要注意的是不要太過于細化步驟以及在小型彈出窗出現過多的步驟,過多的步驟不利與用戶填寫和記憶,反而增加用戶負擔。

          1.4 按鈕的位置

          按鈕放在頁面左下角比較好還是放右下角比較好?這是設計師在設計表單時常常糾結的一個問題。其實在14世紀西方活字印刷術的發明人約翰·古騰堡提出一個概念古騰堡法則(Gutenberg Diagram),又稱對角線平衡法則。它指出用戶在瀏覽頁面或一些布局時,視線往往趨向于從左上角到右下角進行掃描。左上角是第一視覺落點區(主視區),而右下角是最終視覺落點區(終點區)。與之相對,右上角和左下角則是視覺盲點。用戶的視覺移動端規則是從上到下,從左到右。

          所以,界面中的左上和右下是用戶視覺最為重點關注的位置。遵循古騰堡法則,設計師應該把界面的關鍵元素放在主視區,終點區可以放按鈕、強提示,盲點區可以用來放一些相對次要的內容,如輔助圖形、文字信息。

          同理,表單中會出現組合按鈕,比如:取消與確認、提現與充值。根據古騰堡法則,用戶使用界面時從第一視覺落點區是主視覺區(Primary Optical Area),最終停留在結尾的終點區(Terminal Area)。

          如下圖是一個彈窗類型的表單,如果根據業務訴求確認操作重要程度強于取消操作,那么確認按鈕應該放在取消按鈕的右邊。因為確認按鈕放在右側(終點區) 用戶關注度會更強。

          1.5 占位提示避免代替表單標簽

          常規的占位提示作用是使用通用的認知提示并且以較弱的方式呈現給用戶,當在字段中填入內容這些提示通常會消失。


          設計師常常遇到表單字段較多并且頁面空間有限的情況,為了減少橫向節省空間設計師常常的做法是將表單標簽刪除,使用占位提示文本作為信息提示。但是設計師必須有意識知道到這種方式適合使用在較為簡單的表單中,比如:表格中點擊修改名稱操作,彈出氣泡并且氣泡中只存在一個字段?;蛘呤窃谟脩舴浅J熘牡卿涀缘容^為簡單的表單填寫時使用。但是當用戶需要填寫大量字段信息時不建議使用占位提示代替表單標簽的方式。原因有兩點:1. 當用戶選中文本框填寫時,占位內容即消失,這時候用戶無法檢查并確認其所寫的內容是否符合預期。2. 當用戶看到文本框中已經回填內容了,誤認為占位提示是默認回顯內容,造成內容已經填完不需要再操作的錯覺。

          針對上面問題也不是沒有解決方案,在Material Design中有提供針對上面的問題的解決方案,我們這邊暫時稱其為“浮動標簽”,默認情況下輸入框內顯示占位文本,當用戶輸入內容以后占位文本浮動到內容上方與內容左對齊。 

          1.6 校驗反饋及時并準確

          設計師通常認為用戶在填寫表單時能夠很順利的完成表單錄入,但事實相反。在實際的使用場景中,特別是在一些業務較為復雜的表單中用戶極易發生錯誤,這時候需要需要明確的校驗信息、準確的校驗時機、輸入的限制提示。

          錯誤提示校驗

          錯誤校驗提示一般存在于錯誤率較高情況下出現,如:在登錄注冊時,要求用戶填寫手機號,如果用戶輸入的手機號碼不符合特定的輸入格式,那么這時候需要明確標記錯誤原因,準確的幫助用戶找到問題并解決,避免錯誤提示描述模糊不清誤導用戶。錯誤提示一般會采用“雙重視覺強調”來顯示錯誤,除了輸入框突出顯示外,同時需要在輸入框下方加入紅色指導文字。如下圖所示為西瓜視頻登錄注冊場景下的截圖:

          限制與格式提示

          在表單中如果出現特定格式時務必要提前告知用戶??梢栽谳斎肟蛑酗@示概括回答的方式引導用戶,如:請輸入日期,eg:mm/dd/yy。這樣便于幫助用戶提前感知,減少表單填寫錯誤率。

          校驗時機

          為了避免用戶在提交時表單時出現大面積的報錯問題,設計師可以使用實時校驗的交互形式。如:在用戶輸入完成之后鼠標失焦后進行信息校驗,但是需要注意的是在實時校驗時避免用戶還沒有輸入完成即出現校驗誤導用戶,所以需要準確判斷鼠標是否失焦。如下圖所示為西瓜視頻登錄注冊場景下的截圖:

          1.7 字段長度與輸入預期成正比

          在實際業務中,設計師常常習慣把每個表單字段都設置成相同的寬度,在視覺效果上看感覺會比較統一,但是這種做法實際上體驗欠佳。字段的寬度應該向用戶暗示所需輸入內容的長度從而減輕判斷負擔。在Ant Design 4.0 系列分享的文章《整齊劃一?不如錯落有致》中分析到錯落有致的排版表現似乎比整齊劃一的左圖更舒適,因為在視覺上我們更容易將右圖的空間和內容視為一個和諧的整體。但左圖過度的對齊導致暗示隱性的截斷,我們慣性視覺會產生表單字段右側空間缺了一大塊的錯覺。

          文章總結到“表單寬度的處理方式核心旨在解決兩個問題:1. 暗示填寫內容長度;2. 表單項布局排列效果,我們通過設置合理的默認寬度尺寸和描述關系,就可以讓設計師們跳過部分繁瑣磨人的細節思考,快速搭建表單寬度合理且舒適的頁面?!?/span>如下圖所示:

          排列與布局

          1.1 定寬or自適應?

          表單做定寬還是做自適應?哪個“更好”的這個問題時常困惱著我們。其中Button、Radio、CheckBox等本身是定寬組件還好,它根據內容自適應即可,但是當遇到Select、DataPicker、Cascader等類型時就會開始糾結這個問題。在實際的業務中不論是做理想中的定寬還是自適應,很多情況下瀏覽器窗口大小不一可能導致在一些極限情況下都會產生不盡人意的情況。腦補一下,比如:在筆記本的小屏幕下左對齊并定寬效果還不錯,但是當你把頁面呈現在較大顯示器下,這時候頁面右側又會呈現出大面積的空白。參考AntDesign提供的典型頁面以下三種樣式是都會造成不同的反面效果。


          所以在實際業務場景中如果沒有明確自適應和特定自定義寬度的需求時可以通過以下幾種方式處理。

          將關聯性強的字段分組
          如果頁面橫向寬度足夠大時,可以將一個區域中字段較多、并具有關聯性字段進行分組,這樣不僅有利于空間布局上的利用,還可以通過字段之間關聯性暗提示幫助用戶更好理解。格式塔心理學中有多種分組原則,可以使字段之間具有相關性:接近度,相似度,連續性,閉合性和連通性。將非結構化字段分組為幾個機構化的集合提高表單的可用性。

          設置字段寬度梯度

          可以給字段設置幾檔寬度梯度的尺寸,我們可以站在AntDesign這個巨人的肩膀汲取一些相關經驗,其中4.0系列分享的文章中總結到其經過對十幾個業務線梳理,將組件寬度定義了5中高頻的空間尺寸,分別是: XS(80~160px)、S (160~280)、M(280~360px)、L (360px~480px)、XL (480~560px)。根據原理,我們可以假設原子寬度XS為100,那么通過尺寸的倍數+間距的方式來計算其他的四種尺寸(間距暫定8px情況下得到:S=208px、M=316px、L=424px、XL=532px),通過此計算方式也是用來解決視覺對齊規則,如下圖所示:

          1.2 表單標簽頂部對齊or右對齊or左對齊

          在設計表單時到底是左對齊、右對齊還是頂部對齊呢?這個問題也是在實際業務中設計師發問頻率較高的一個棘手問題。其實,不論是哪種方式都有相對的利弊,需要根據實際業務場景提供不同的解決方案。在Matteo Penzo《Label Placement in Forms》文章中有分享過關于表單標簽放置的研究,下圖是Matteo Penzo研究總結得到的瀏覽時間表:

          表單字段頂部對齊

          將表單標簽放置在其對應輸入字段的正上方,并垂直左對齊排列,用戶只需依次向下瀏覽即可看到標簽與輸入字段兩個元素。其優勢是橫向屏幕空間足夠,能夠比較友好的適配多語言適合非中國區業務表單使用。并且根據上面Matteo Penzo的時間表上看,頂部對齊的瀏覽和填寫的效率也是3種常規的對齊方式中較高的一種。不足點是會占用較多的縱向垂直屏幕空間,此外應當注意每組表單標簽和輸入字段與其他字段組的間距,以免層級區分度不夠的問題。

          表單字段右對齊

          將表單標簽放置在其對應的輸入字段的左邊,標簽右對齊。其優點減少了占用屏幕的高度,并且表單標簽與輸入字段關系較近,所以用戶在填寫表單時效率較高。不足點是由于表單標簽的字數不可控(特別是針對非中國區業務時,多語言切換可能會出現超長的文案,甚至出現折行的情況),可能會造成左側參差不齊的問題,導致可讀性不高用戶在查看表單時比較費勁,并且不太適合非中國區業務。 

          表單字段左對齊
          將表單標簽放置在其對應的輸入字段的左邊,標簽左對齊。表單標簽和輸入字段距離較遠,用戶從左至右瀏覽時間變長,并且根據上面Matteo Penzo的時間表上看,左對齊的瀏覽和填寫的效率是3種常規的對齊方式中最慢的一種。但是,如果業務需要用戶對表單放慢速度并謹慎填寫(復雜表單或者表單中含有大量高級設置的陌生數據時),左對齊的方式會減少部分用戶的出錯率。但不太適合非中國區業務。

          1.3 表單布局類型 

          常規布局(簡單)

           在實際業務中當表單字段較為簡單時可使用,表單字段至上而下單列排列布局,用戶只需縱向閱讀填寫,填寫完成率較高。

          多列布局(較復雜)
          垂直空間有限并且表單含有較多填寫字段的復雜表單時,可將具有相關聯字段放在一個卡片區域中進行歸類,將多個字段組合在一行,形成多列排布的暗提示幫助用戶更好理解。

          區域分組布局(復雜)
          表單含有較多填寫字段的復雜表單,可將具有相關聯字段進行分類并以標題區分的形式進行字段分組,并且表單字段都在一個卡片區域內。

          卡片分組布局(高復雜)
          卡片分組布局一般用來處理高復雜類型表單。當業務中希望頁面承載眾多表單字段時,可將信息相關性弱的字段拆分為多個部分,并通過多個卡片分組承載不同類型字段,每個卡片都需有個卡片類別標題。 

           

          寫在最后

          本篇文章從分析表單在產品中為何如此的重要,總結了在日常工作中設計師常常遇到的表單類型和布局,設計師可通過文章中的建議和案例進而合理的選擇并靈活應用。以及在實際的業務應用場景中設計師如何規避和注意一些設計細節進而提升表單的體驗。文章通過一些案例進行分析,希望大家能夠通過此篇文章更多的是受到啟發(而不是限制),能夠在日常工作中靈活應用并舉一反三。這里需要強調的是作為產品設計師不論是表單設計還是全局的頁面設計,都需要有理解業務本質的能力和全局的業務思考能力,不然常常會被稱之為“喂,那個畫圖的設計”。

          文章來源:tob.design

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

          組件化設計思維

          周周

          組件化設計思維,能夠提升設計團隊的生產力,讓設計師專注于設計上的創意,同時讓設計師完成更多產品需求和提升團隊的溝通效率
           


           

           

          寫在前面 


          組件化設計的流程,經過實際工作的鍛煉和思考,具體可以拆分為 3 個方面:

           

          1. 明確組件化設計的內容。

          2. 場景設計走查。

          3. 組件化設計驗證效果。

           


           


          一. 組件化設計的案例(界面展示篇)


            

            


           


           


           小結:

          組件化設計,需要設計師要有一個整體性的設計思維,要有很強的設計能力和良好的溝通協作能力,同時設計師要深入理解業務,這樣組件化設計才能很好的在團隊內落地推行。

          組件化設計的優點有很多,能夠提升設計師的輸出效率,讓設計師更專注于設計上的創意思考,提升溝通效率。

          二. 原子設計方法論

           

           

           

          原子設計方法論是由國外設計師 Brad Frost 提出的,他從化學元素周期表中得到啟發,發現原子結合在一起,可以形成分子,然后形成組織。

           

          Brad 把原子設計的方法論應用到界面設計中,用心觀察會發現,界面是由一些基本的元素組成,顏色、文字、圖標等都是一個個原子。

           

          原子設計方法論,是由原子、分子、組織、模版和頁面共同協作,可以幫助我們創造出一套符合公司產品的設計系統。

           

           


           

           

          原子設計方法論是為了幫助我們去建立設計系統,目前逐漸被國內外的一些大公司,應用于創建統一的公司產品設計系統。

           

          接下來,我們以金融產品為例 ,對原子設計方法論進行拆解,深入思考原子、分子、組件、模塊和頁面在界面設計中的定義是什么,以及對應的元素是什么,元素之間又是如何組合的。

           

           

          原子

           

          用戶界面設計中的原子,是構成界面的基本元素。是一個單獨的元素,如圖標、標題、色彩等以及原子之間組合形成的新的元素組合。

           


           

           

          我們開展一個項目時,為了保證各個頁面保持統一的設計風格,我們會制定一套視覺規范,定義的內容包括:字體、顏色、柵格和圖標,這些就是界面中最基礎的原子。在關鍵的設計元素上,保證各個設計師達成一致,這樣就能很大程度的保證不同頁面的設計風格統一,并在這個基礎上去探索更有價值和創意的設計方案。

           

           

           

           

          分子

           

          兩個原子即可組成一個分子,以按鈕為例:包含了文字、色塊、柵格。

          文字傳達含義,顏色定義了按鈕的特性,柵格為按鈕定義了一個尺寸和規范。

           

           


           

           

          把單獨的元素做一個簡單的組合,是我們做界面設計的一種方法,組合的方式簡單且可復用性很好,作為開發者可以根據規則進行編寫代碼,提升產品的迭代效率和產品的一致性。

           

           

          界面設計中的表單為例,表單是一個非常常見的設計元素,一個表單分子由分割線、文案、Icon和分割線等原子組成。原子組合之后,可以得到是一個可以應用在功能模塊的組合。

           


           

           

           

          組織

           

          我們把分子和原子做組合,就可以創建復雜的、可擴展性的模塊,然后變成一個組織。

           

           

          組件在提升設計師設計效率方面有著很重要的意義,設計師可以把界面中常用的組件模塊進行分類整理,比如:圖片、卡片、輸入框等,可以解決設計師日常的設計需求。

           

           

          以金融產品為例,基本分為 3 類 :內容、表單、卡片化的設計。

          每個卡片化的內容設計盡量保持統一性,這樣方便負責不同模塊內容的設計師復用同一個組件,就可以完成不同頁面的設計,提升項目的設計效率。

           


           

           

           

          模板

           

          模版一般應用在設計系統的交互階段,保證原型階段的多方案的展示;模版內容,后面可以優化,這樣可以降低設計的成本。模版的價值可以讓設計師,更專注于頁面的結構化設計排版和對頁面布局的思考。

           


          那模版的原理是什么呢?

          就是產品的原型圖,就是組織和分子的組合,會先形成一個完整的頁面框架,作為一個初步的設計方案,作為團隊項目的前期溝通所用。

           


          以教育和金融界面為例,如下圖:

           


           

           

           


           

          界面

           

          界面設計是把占位符內容替換成產品設計需要的文案,在模板的組合上進行完善,會形成界面的設計方案。

           


          界面設計是模板的具體的展示設計,是真實內容的設計方案。

           


          通過圖標和文字的組合,清晰的展示用戶所需要的場景,加上內容,就會變成一套完整的界面設計方案。

           


          如下圖所示:

           


           

           

           

          以金融產品的場景設計為例,有了實際的內容后,我們可以發現通過組合組件,就能很好的呈現界面內容。

           


          如下圖所示:

           


           

           


          小結:

          原子設計方法論為界面元素提供了應用規則和組織整理,原子設計方法論在建立設計系統、團隊協作、產品迭代優化等方面,都有很好的價值和意義。

           

           

           

           

          三. 組件化設計的流程 ?

           


           

           

          設計規范和 Ui kit 是我們管理一個或多個App統一性和設計效率的工具,同時探索如何更有效的提升設計效率。像 滴滴等Ant Design 設計系統,他們的產品體驗非常好,用戶使用產品時能夠有效的滿足其需求,良好的用戶體驗背后都有著一套好的產品設計系統在運作。

           


          如下圖,國外的金融產品運用組件規范化后的界面設計展示 :

           


           

           

          系統性的組件化設計思維的好處是 :

           

          1. 產品設計迭代優化時,版本和版本之間的差異性就可以得到很好的解決。

          2. 界面設計之間的設計風格和設計樣式就會統一。

          3. 界面設計的效率和質量會穩定輸出。

           


          在我們所經常使用的 App 產品中,如 蘋果、Airbnb、自如、Ant Design 等,用戶體驗都非常好,用戶使用產品時能夠快速的解決需求,優質的用戶體驗背后都有著一套強大的專業設計系統所幫助。

           

           

           

           

          思考:我們為什么需要組件化設計 ?

           


          一. 統一產品設計體驗

           

          1. 以京東金融為例,在京東金融最近更新的版本中,我們看到財富界面和生活界面,同樣的模塊可以復用,對于復用性高的內容,應該提煉為通用組件,提高設計效率。

           


           

           

          2. 如上圖所示,對于會員專區或者熱門活動是金融類產品中最為常見的產品形式,在京東金融的首頁出現,布局往往是左右結構,或者上下結構;因為這類產品具有較強的引導屬性,所以會把右側的運營的插畫設計相對突出,以吸引用戶的注意力。會員專區的卡片化設計,具有較強的復用性,可以列為通用組件,這樣就可以保證兩個產品界面的卡片化的設計風格和樣式上的一致性原則。

           

           

           

          二. 提高團隊協作效率

           

          1. 面對相同的設計需求時,可直接調用相關組件,節省重復性的設計工作,提升溝通效率。

          2. 借助組件化設計,可以快速開展工作,達到復用的價值。

          3. 通過設計語言可以完成一個界面設計,在下面案例中,主要的元素由文字、柵格線、Icon 等組成界面結構,確定好排版布局和圖標的設計風格后,完成產品的界面設計。

           


           

           

          三. 降低開發成本

          1. 在實際工作中,如果每次制作一個新頁面都設計不同的組件,開發就要寫新代碼,增加開發時間成本。

          2. 如果我們常用的模塊作成組件庫,開發遇到相同的組件時,可直接調用組件,復用相關代碼,這樣可以降低開發成本。


           


            

          組件化設計流程,

          經過實際工作的鍛煉和思考,具體可以拆分為 3 個方面:


          一. 明確組件化設計的內容

          我們需要整體思考,明確可以復用的的內容、組件,以熱銷理財場景為例,金融產品都會需要用戶進行選擇理財產品,可定義為理財產品的卡片化設計組件,適合組件化設計的模塊。產品已有組件的優化,設計師要具體分析,分析組件體驗現狀,發現問題然后針對性解決問題。


          使用產品的場景設計、交互體驗、設計風格三方面都要思考,推出更好的產品設計的解決方案。以京東金融的財富和首頁的界面設計為例,應用的都是卡片化設計的理財模塊。在開發新項目的時候,同樣可以調用同一個理財產品的模塊化組件,不僅能保證產品上體驗的一致性,也能降低團隊的設計成本。如下圖所示:

           

           

          二. 場景設計走查

           1. 全面體驗走查線上的移動端產品設計,對用戶的交互行為鏈路有一個清晰的理解,思考當前線上的產品體驗。

          2. 線上產品功能的迭代一般業務方都會有一個周期性安排,因此在走查時要及時和業務方溝通,在這個基礎上再進行組件化的方案設計。

          設計師使用金融產品,在設計的時候要考慮到每一個環節。

          我們先來看下京東金融的案例,這兩個閃屏運營彈窗除了場景不一樣以外,其他元素都是高度統一的,組件化設計的優勢在于,只需要改變組件的部分元素就能適配各種場景。如下圖所示:

           


           

          三. 組件化設計驗證效果(如下圖)

           


           

           

          組件化的設計方案完成對接開發上線后,我們需要從兩個方面來驗證組件優化后的效果:

          1. 組件化設計是否可以滿足各業務方的需求和場景化的設計。

          2. 通過定性數據追蹤功能是否能促進業務的關鍵的設計指標的提升,這些數據可以是轉化率等數據指標,用戶的反饋也是一個很好的輔助驗證方法。

           

          四 如何建立組件化設計系統 ?

           


           

           

          每個團隊的體量和業務訴求不一樣,個性化的組件化設計系統包含有設計原則、設計語言和組件庫,這是一個爭議的概念。

          建立設計系統的原因:

          1. 建立設計系統,可以方便團隊協作,保證體驗上的一致性。

          2. 設計過程中,發現每個業務的形態,以產品的不同場景為出發點,使用一套設計系統,會提升用戶體驗。

          3. 幫助產品的迭代和優化,同時提升產品和用戶的體驗好感度。

           

           


           1 設計原則(設計理念、品牌指導)


          設計的本質是解決問題,制定設計原則時要建立在這個設計中心思想上。

           


          蘋果的設計系統:

           

          把審美作為第一要素存在于設計原則中。

          1. 創意審美的重要性。 

          2. 隱喻的價值。 

          3. 易用性原則。 

          4. 及時的反饋。

            

          安卓的設計系統: 

          1. 跨平臺的設計適配原則。 

          2. 材料的設計價值思考。 

          3. 圖形、強調、大膽的設計語言。

          4. 動效的服務設計價值。

           

           

           

          2 設計語言(色彩、字體、柵格、圖標)

          色彩的視覺語言規范,我們需要定義產品的基礎色板和中性色板,基本色板包含了產品的主題色和輔助色,生成每個顏色的亮色和暗色的衍生色。中性色板包含黑白灰,這類顏色在界面設計中使用,能讓頁面內容具有良好的層次關系,提升閱讀的效率和用戶體驗。

           

          字體規范是界面設計中的構成之一,用戶通過文字來理解和達成目標,完整的字體系統能有效的提高用戶的體驗和理解效率。字體的規范定義需要從三個方面出發:字重、灰度色、字階。


          界面設計的排版布局一般使用的 8 柵格法,它能適配不同尺寸的屏幕分辨率,界面元素大小和間距都是8 倍數為基準。

          圖標設計,隱喻,保持圖標之間一致的設計風格和表現形式。系統圖標為例子:以1@x圖為例子,常見的尺寸有: 16px、24px、32px、48px等。

           


           

           

           

           

          3 阿里系團隊,制作的 Kitchen 組件化設計系統 很好 :(如下圖)

           

           

           


           

           


           


           



           


           


           


           


           


           

           

           

           

          五.  Banner 組件化設計、B 端組件化設計等平面組件化設計的案例如下:

           

           

           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

          總結 :

          佐藤寫過一本書[佐藤可士和的超整理術],里面講述了他自己是如何通過整理自己的思路、對話、工作室、隨身物品等設計來讓工作變得并且最終對自我更加深入的了解 。


          生活和工作離不開“整理術”,優秀的設計應該要從“ 整理和總結 ”開始,比如:組件化的設計思維,可以看做是一種 “設計的整理術” 。

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



          10分鐘帶你看懂支付寶的交互設計(首頁篇)

          周周

          支付寶作為一個“簡單、安全、快速”的支付工具,其交互設計與其他產品有何不同呢?不同的原因為何?

          這篇文章是《10分鐘帶你看懂支付寶的交互設計》的(一)首頁篇,后面還會繼續更新。

          下面進入正文:

          一、了解支付寶的產品定位

          體驗操作系統:手機iPhone6s;

          支付寶版本號:10.1.58;

          在開始產品分析前,我們先來看看支付寶的產品定位。

          所謂產品定位,包括以下三方面:使用人群、主要功能、產品特色。如圖1所示:

          圖1  產品定位

          從百度上支付寶的網頁介紹(圖2)和百度百科(圖3)的介紹中,可以看出支付寶的產品定位為:致力于為廣大用戶提供“簡單、安全、快速”的支付解決方案。

          那么支付寶的產品定位可分解為:

          • 使用人群:廣大用戶;

          • 主要功能:支付;

          • 產品特色:簡單、安全、快捷。

          圖2  支付寶網頁介紹

          圖3  百度百科介紹

          二、整體分析

          當用戶打開支付寶,看到的第一個界面,就是支付寶的歡迎界面,支付寶的歡迎界面很有特點——停留時間很短(因為時間太短,導致我無法成功截屏,所以這里就不放圖了)。為什么支付寶的歡迎界面從來不像其它APP(如抖音等)一樣會有一個廣告呢(如圖4)?

          這與我們之前提到的支付寶的產品定位有關,支付寶作為一個“簡單、安全、快速”的支付工具。當用戶打開它時,多數場景下,都是用于支付,作為一個以“快速”為特色的工具類產品,就限制了它不能在歡迎界面做太長的停留,也不能做廣告(盡管這種廣告的收入很大),因為這樣會造成用戶極大的不舒適。

          舉個例子,當你早上急急忙忙的起了床趕去教室上課,在食堂買早餐時,打開支付寶付款,(原本你的內心就很著急)卻還要像其它APP一樣看一段廣告!我想你此時一定會默默的罵馬云,并且心里會慢慢開始對支付寶產生一種厭惡的情緒。

          如果你有一天看見支付寶歡迎界面都開始做廣告的時候,請相信我,支付寶一定活不到102歲那一天!

          圖4  抖音歡迎界面的廣告

          任何一個成功的APP,用戶進去見到的第一個界面,一定是該產品最想讓你看到的界面,也是存放產品主要功能的界面。在支付寶中,它的首頁就是最主要的界面。

          從整個支付寶APP的布局來看,底部采用五個Tab導航,分別是首頁、財富、口碑、朋友、我的,當處于相應界面時,底部導航會變成支付寶的品牌“藍”(圖5所示),這個設計有三個作用:

          ①在視覺上與其它導航相區別,表示用戶當前所處頁面;

          ②利用品牌的顏色加強用戶對品牌的認知;

          ③增強APP的界面一致性。

          圖5  支付寶底部導航

          在首頁這一界面,從整體看,總共被劃分為了六個板塊,從上至下分別是核心功能區、擴展功能區、信息通知區、活動展示區、其它產品區、導航欄(如圖6)。

          整個頁面布局清晰,因為是以塊狀來劃分層次,可擴展性也比較強(可以根據需要劃分頁面層次,同時界面改變也不會太大,不會影響用戶的正常使用)。

          在未來,如果支付寶需要發展其它重量級產品,就可以很方便的加入首頁。(這里教大家一個方法——如何看出一個界面的模塊劃分,只需要把眼睛瞇起來,不去關注內容,而是關注框架,就可以輕易的看見該界面的層次結構了。)

          圖6  支付寶首頁層次劃分

          三、核心功能區

          我們按照從上到下的順序來分析支付寶的首頁。

          核心功能區位于頁面頂端,是視覺焦點,又有一個支付寶的品牌“藍”作為底色,一下就成為了視覺重心,很顯然這個位置應該存放支付寶的主要功能,也就是支付功能。

          支付寶的支付功能包括哪些呢?限于技術,目前支付寶主要通過識別二維碼進行支付,所以掃一掃自然就是最常用的功能,所以放在第一個,付錢、收錢隨后,敢預言,不管以后支付寶的版本怎么改,他的支付功能始終位于首頁,而且是首頁的視覺焦點。為什么此處卡包也置于頁面最顯眼的位置呢?

          與支付寶的很多活動有關,因為很多商業活動都靠贈送各類卡卷來實現(也就是所謂的商業需求)。將搜索框置于頂層,看似搶了核心功能的風頭,其實不然,設計師巧妙的在這里進行了處理,首先將搜索框的大小變?。ǖ遣挥绊懹脩舻恼|c擊),然后將掃一掃那一欄的圖標變大,將字號也變大,視覺重心依然回到了掃一掃那一欄。但是為什么會將搜索框置于如此明顯的位置呢?

          首先隨著支付寶的功能越來越多,由于頁面的第一層級裝不下,就會根據優先級進行排序,將優先級靠后的功能放入后一層級,因此很多功能的層級就會比較深。有了搜索框之后,用戶就可以通過首頁的搜索,快速進入用戶需要的功能(用戶需求),另外一方面,又可以在搜索框進行商業推廣(商業需求)。

          將通訊錄也置于顯眼位置,是支付寶對于社交功能的探索,從此處可以看出,支付寶對于社交功能的渴望。加號打開是掃一掃、收錢、乘車碼、智能管理,將掃一掃置于該層級,可能是為了方便單手操作的用戶,這樣不管哪只手操作,都能方便的進行使用。

          四、擴展功能區

          擴展功能區,也就是支付寶擴展業務或第三方合作方入口,4*3的設計,與上方掃一掃、付錢、收錢、卡包對齊,增加了整個頁面的整齊度,該區域的圖標、字號,都相應的減弱,避免喧賓奪主。

          大家注意看(圖7),最后一個圖標是更多,擴展性極強,只要有第三方想和支付寶合作,馬云只需要增加一個廣告位,然后笑著用自己的支付寶收錢就好了(我猜后期版本,支付寶會把“更多”這個按鈕做的比其它按鈕更搶眼一點,因為這是一個很大的流量入口,能夠滿足很多商業需求)。同時,該區域還有一個很好的交互方式,當用戶進行長按圖標,就可以進行調節,給了用戶自主權。

          圖7  首頁—更多

          五、信息通知區

          在信息通知這一欄,當有新的信息時,左邊的螞蟻會拿著一個信封微微擺動,不注意根本看不見,但是當你觀察到了,你就會覺得好可愛,支付寶好用心啊,心里默默就會給支付寶一個好評,這就是情感化體驗,給用戶一個小驚喜。同時右邊有一個小紅點,會誘惑你去點擊,去閱讀信息,當你閱讀了信息之后,就只有螞蟻的觸須在動,信封就消失了(見圖8)。

          圖8  信息通知區

          六、活動展示區

          在活動展示欄(圖9),雖然這個條目已經處于視覺中心以外,但是,聰明的設計師絕不會浪費任何一個可以利用的界面,于是設計師就利用輪播的圖片來吸引你的眼球,輪播的好處在于,一方面可以播放多個廣告(擴展性也比較好),另外一方面運動的物體可以吸引用戶的眼球(這個原理源于在古代我們的祖先為了安全,總是會關注到運動的物體,這也就是為什么大多數網頁中的廣告都采用動畫的形式,就是為了吸引你的眼球,去點擊它。

          圖9  活動展示欄

          七、其它產品區

          其它產品區,就是一些活動和商業推廣的入口(這就純屬于商業需求,為別的產品引流)。

          說一下這里的設計吧,這里的“惠支付”字號比上面都還要大,是不是會搶了風頭,答案是——不會,因為這已經是頁面底端了,如果再不通過這種方式來強調這個版塊,可能用戶根本就看不見了。

          同時,設計師利用親密性原理——在視覺上挨得近的我們會認為是一組,而沒有采用實線來分割,使整個界面簡約了不少(圖10)。

          圖10  “惠支付”

          在首頁,為了讓用戶知道下面還有內容,故意漏出一半的內容,告訴用戶下面還有內容,同時,當整個頁面下拉時,掃一掃、付錢、收錢、搜索,加號的圖標就會置于頁面上方,驗證了我之前分析的一些結論(核心功能始終置頂顯示、始終放在用戶一眼就能看見的地方),當滑到低端時,一句文案“我是有底線的”,讓人感覺這個APP還有一點人性、俏皮可愛,同時明確的告訴用戶該頁面已經結束了。

          可能是因為支付寶是塊狀的結構,為了避免發生誤觸,所以進行頁面切換時,并不支持左右滑動切,只能通過下方Tab導航進行切換。

          八、總結

          從對支付寶的首頁界面進行分析,可以看出,在進行交互設計時,不僅要重視用戶體驗,同時要兼顧商業需求(當然還有技術,但是這里我不做表述),在兩者發生沖突時,要考慮兩者的優先級和重要性,綜合考慮,尋求一個最佳點。

          比如歡迎界面的廣告,支付寶就永遠不能做,因為這樣做下來用戶體驗會很差,可能會流失一大批用戶,但是支付寶可以在APP內接入廣告來實現商業需求,這就是考慮用戶體驗、商業需求之后做出的決定,從而設計的界面,是一個很好的案例。

          很多時候,交互設計更像是做減法,知道哪些該減去,而不應該做加法,把所有功能胡亂疊加,導致用戶體驗極差。用戶體驗差的產品,商業價值一定是無法實現的。

          當然,除了像12306這種強勢的APP……

          文章來源:人人都是產品經理     作者:交互設計汪

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

          Web導航設計

          周周

          一、導航的定義

          牛津詞典上有對Navigation一詞在互聯網領域的解釋:

          the way that you move around a website or the Internet when you are looking for information

          翻譯為:你在瀏覽網頁時四處移動尋找信息的方式

          也就是說用戶看到的,影響其尋找信息的因素都可視為導航。


          二、為什么需要導航

          交互上:

          用戶在使用傳統方式閱讀時,所處的空間是單向的,只能向前或向后翻頁;

          而在網頁領域,所有的內容都存放在各自的URL里,信息在多維度多空間里相互交錯,各有聯系,可跳躍的閱讀方式讓用戶很容易失去位置感。

          試想一下我們在大型商場里暈頭轉向的場景,會常常抱怨其導視系統的糟糕,網站有過之而無不及。

          業務上:

          從潛在用戶想要了解某個產品時,導航就開始起作用了

          影響點擊量網站排名高低,搜索帶來的點擊量

          影響轉化網站的易用性,訪問者轉化為潛在客戶和客戶的概率

          設計者創造易用的表單,展示有用的信息,建立流暢的交互,這些都要靠導航來引導用戶達到。


          三、從信息構建模式給導航分類

          1.內容

          內容涉及到的東西很多,內容之間的相互關系也不確定,因此不同內容導航需要不同的導航模式

          1)種類

          不同行業,不同業務重點對內容的分類方式不同

          種類可以是符合大眾認知,具有并列關系的信息,

          也可以是按照設計者的意圖創造出的種類,并區分其優先級

          種類導航的出現無形中建立了用戶心中對某類產品的預期信息架構,使其在瀏覽信息時更有方向性,例如在瀏覽一家服裝店鋪時,用戶在進入導航列表前就對種類有了預期,諸如男士上裝,男士下裝,女士上裝、女士下裝、配飾,包袋等。


          2)字母

          以字母順序排列信息。適用于信息量超大,且不存在主次、重要級關系的內容。常見于聯系人列表,地區導航,介紹人名,合作伙伴等場景。


          3)自然屬性

          以時間,地理位置等屬性組織信息架構。

          時間:展示在一段時間內發生的事情,以時間為導航可以直觀地感受到信息的變遷,立體感更強。例如一個企業的發展歷史

          地理位置:展示在不同地理位置的事件信息,空間感更強


          2.層級

          也叫做結構導航,根據信息的上下級關系、主體信息架構等因素將信息有序排列。分為全局導航和局部導航。

          全局導航往往指頁眉和頁腳,存在于網站的大部分頁面,便于用戶隨時跳轉。 

          頁眉:用戶進入網站關注到的點,將網站進行功能分類后,將導航文字放置在頁眉上

          頁腳:此空間是為隱私和法律鏈接保留的,還會加上聯系方式,也有許多內容繁重的網站會把站點地圖放置在頁腳。

          雅各布·尼爾森把全局導航在網站中的作用形象地比喻為機艙座位下的救生衣 ,你只要知道它哪 ,而不必時時關注它,需要時立即找到穿上即可。


          局部導航是是更深層級的導航,不作用于全局,存在于特定的功能區,可分布在頁面各部分。


          3.功能

          業務上必要的一些功能入口,通常貫穿全局,例如很多網站的個人信息,用戶需要在大部分時刻都可直接接觸到該功能。根據用戶的心理模型,這類功能會存在于頁面的右上角。


          4.搜索

          用戶使用較多,也是最重要的導航方式之一。當帶有明確的目的性或無法通過內容,層級導航找到想要的信息時,用戶會在搜索框內嘗試輸入一些信息。

          而讓用戶主動搜索會出現下面的情況:用戶無法清晰表達或錯誤地表達其想要搜索的內容,導致系統無法匹配上對應的信息,

          為了讓搜索導航更有效地發揮其作用,出現了自動填充,模糊搜索,推薦搜索,搜索歷史,搜索糾正等一系列導航功能,這些功能都是為了想辦法將用戶引導到他可能需要的頁面上。


          5.網站地圖

          以類似地圖的樣式來展示網站頁面之間的層級關系,并提供相應的鏈接??梢曅詮?,便于用戶找到想要的信息。


          四、導航的常見樣式

          1.文字與圖標

          考慮到排版布局,樣式美觀,除了用文字本身的含義用作導航外,圖標也經常被用作導航,分為純圖標導航和文字+圖標導航,這里圖標的風格會很大程度上影響這個頁面的視覺效果


          2.橫向導航

          將導航文字橫向有序地排列,獨立性強,占用空間較少,可放置的導航條目有限,但這個局限性也可以成為優點,它要求設計師創造出簡短,易于理解,且滿足業務需求的標題。

          當內容過多時會選擇在單個導航下放置下拉顯示二級導航,下拉顯示的二級導航可以很長或采用滾動顯示的方式,這種臨時的模態導航可以最大限度地利用到屏幕空間。

          很多網頁的橫向頁眉導航會保持滑動時固定的樣式,便于用戶時時找到主頁面的入口。


          3.豎向導航

          占用空間較多,通常放置在頁面左邊位置,用不同的底色或分割線將其與主內容分開,內容文字一般采用左對齊,便于閱讀,導航層級過多時會采用點擊展開的樣式,上下滾動的常用交互也讓豎向導航容納的內容更多。

          部分豎向導航是可隱藏或收縮的


          4.混合導航

          在擁有復雜信息的網頁中,會將橫向導航,豎向導航等其他樣式混合使用,


          5.面包屑

          面包屑導航是位于頁面頂部或底部的一行內部鏈接,在不同層級的鏈接之間用“>”分隔,可讓訪問者快速返回上一版塊或根網頁。許多面包屑導航都將內容最寬泛的頁面(通常為根網頁)設置為最左邊的首個鏈接,并在右側列出更具體的部分。

          占用很少的空間并提供主導航實現不了的深層次定位功能。

          面包屑的使用讓網站的結構更加清晰,強化用戶的心理層級模型,并實現跨層級跳躍

          6.分頁與無限滾動

          分頁顯示的內容數量固定,有時用戶可自定義內容數量,此外頁面上通常有當前頁,任意頁,上一頁,下一頁,首頁,末頁的鏈接。具有定位性,當用戶需要回到之前瀏覽過的某個位置時,可采用分頁的形式


          無限滾動希望用戶只注意當前頁的內容且不能快速到達頁面的底部,適用于無法預測用戶何時能夠找到需要的信息的情況。在一些圖片展示,內容推送的網站上設計者不知道用戶想要的內容,同時也要展現網站內容豐富,資源庫深不見底的特質會采用交互上更簡單的無限滾動模式。

          7.突出的版式

          一些設計者想要用戶優先注意到的內容,會采用突出的版面設計,通過改變文字圖形的大小,顏色等與其他一般性內容形成對比或使用海報,彈窗等形式試圖引導用戶行為。


          五、導航設計的建議

          根據上面第三和第四點,分別從信息層和表現層給出導航設計的建議

          信息層

          1.信息結構盡可能扁平

          多花一些時間去考慮信息體系結構,可根據首頁規劃全局的導航,首頁是用戶在網站中導航的起點,考慮如何讓用戶盡可能方便地從網站上的寬泛內容(首頁)轉到他們所需的更加具體的內容。


          2.重視導航的順序

          當同一級別的導航數量很多時,順序變的更加重要。根據用戶的認知習慣,開頭和結尾作為關注度(看到的)和保留度最高(剛剛發生的)的地方,其內容更加突出。


          3.SEO優化

          良好的網站導航結構可以幫助搜索引擎了解哪些是網站站長認為重要的內容,盡量用一些具體的描述詞語而非大而寬泛的詞匯,例如“產品”,“服務”。雖然搜索引擎的搜索結果是在頁面級別提供的,但它也希望了解頁面在網站這個更大層面上的角色。導航中關鍵詞的使用會影響其在搜索引擎中被搜到的質量。


          4.創建網站地圖

          用于顯示網站結構的一個簡單頁面,通常包含網站頁面的分層列表。如果在網站上查找頁面時遇到問題,用戶可能會訪問此頁面。此外搜索引擎也會訪問此頁面,以便使抓取范圍盡量覆蓋網站的全部頁面。


          表現層

          1.一致性

          同一類型導航的視覺表現與交互操作在整個網站頁面中要保持一致,清晰一致的導航可以讓用戶預見每一步操作的結果。


          2.清晰性

          顏色與大?。何淖诸伾c背景顏色的對比,標題與內容的字號大小,這些最基本的元素直接影響導航的清晰度

          留白與裝飾:與平面設計中原理一樣,留白讓網站頁面布局平衡,張弛有度;裝飾與留白相結合,讓導航表現得更精美,也有助于視覺分割

          強調與弱化:有些導航起引導作用需要突出,有些起輔助作用需要弱化,強弱對比結合豐富了視覺層次,并讓導航起到它該起的作用


          3.凸顯超鏈接

          將可點擊的超鏈接文本與常規文字在樣式和交互上進行區分,常見做法有下劃線,文字顏色,加粗,鼠標懸浮變色。


          4.在常規位置放置導航

          網頁發展的幾十年讓用戶對網頁產生了一些常識性認識,例如用戶會在進入一個網站時去頁眉或側邊欄尋找主導航,盡量遵循這些常規用法。


          5.導航數量不宜過多

          無論是全局或局部導航,數目越多用戶處理和記住信息的難度越大,可以通過分組分層來提高信息瀏覽效率


          6.側邊欄

          側邊欄導航會占據一部分的屏幕空間,將其與主內容部分進行分割有助于用戶,例如用反差較大的背景色形成導航區與內容區

          加入導航收縮功能,以便更好地利用屏幕空間,特別是在一些小尺寸屏幕上。


          六、導航設計審查:

          在做完網頁設計后可以根據瀏覽網頁的一般習慣,通過以下幾個方面對導航設計進行簡單審查

          問自己以及團隊其他成員以下幾個問題

          1.這是什么網站

          2.網站有哪些主要內容

          3.導航看上去是否像是導航,可點擊的

          4.導航的名稱是否會引起歧義

          5.現在處在網站的哪個層級

          6.如何進退

          7.具體的功能是否會在預想的地方出現

          8.怎么進行內容搜索

          借助工具

          9.使用Google Analytics對網站的訪問情況進行回顧并進行一些評估

          例如一些頁面的瀏覽量極低于預期或相較于同類頁面瀏覽差距過大,就要考慮是否是指向該頁面的導航出現了問題。


          總結

          導航的最終目的是簡化獲取信息的過程,具體以何種方式表達還需要取決于業務內容,但總體上要以用戶易接受的方式呈現。用戶若是能在獲取信息的過程中按照設計者所想的方式前進并感受到暢通無阻的快感,導航便是成功的。


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


          聚合者:數字時代的主導

          雪濤

          互聯網技術的快速發展,數字化的時代也在悄悄來臨。數字化時代,誰才是真正的領導者?互聯網時代和數字時代的不同在哪里?本文作者對這些問題提出了自己的一點思考,與你分享。每一個時代的來臨總是會有一些跡象來印證它,來詮釋它。

          互聯網時代如此,數字化時代同樣如此。

          當數字化的浪潮在零售、金融等行業里翻涌,一個以數字化為主要標簽的全新時代正在一步步走向我們。

          接棒互聯網的現實,注定了數字化本身就生而不凡。

          同樣地,數字化可以以互聯網為鏡,審視自身的成敗得失。

          同互聯網時代僅僅只是對傳統行業的上下游進行去中間化的處理不同,數字化時代更加關注的是對于傳統行業的底層改造以及基于這種改造衍生而來的重構與再造。

          這一邏輯決定了數字時代與互聯網時代的最大不同,就是傳統行業的構成元素將發生深入而又徹底的根本性變革,由此帶來的是行業本身更加顛覆性的改變。

          在數字時代,聯通人們生產和生活的“毛細血管”將不再僅僅只是簡單意義上的互聯網,而是更加本質和更加徹底的數字。

          在互聯網時代,建構于互聯網技術之上的聯通是基于互聯網平臺的中介和撮合來達成的,雖然效率得到了一定程度的提升,但是,這種提升的幅度與效率都是不可持續的。

          等到流量紅利見頂,平臺的中介和撮合作用難以發揮,行業的運行效率又將陷入到新一輪的困境之中。

          數字化便是在這種大背景下誕生的。

          同互聯網技術不同,數字時代的效率提升首先做的是行業底層元素的深度改造,改造完成之后,再對新的元素進行重新建構,并且產生新的行業形態,從而達成通過深度改造行業來提升效率的目的。

          雖然在這個過程當中,大型的數字技術提供者們依然扮演著相當重要的作用,他們可以憑借原始的技術積累占得先機,但是,數字時代的效率提升已經不再是簡單意義上的撮合和中介,而是變成一種由內而外的自我進化。

          效率提升同樣是由內而外產生的。

          此刻,僅僅只是簡單地去中間化必然無法達成這一目標,必然需要更深層次的變革才能獲得發展。

          由此,我們幾乎可以確定的是數字時代的產業變革要比互聯網時代的產業變革更加徹底和全面。

          我們都知道,在互聯網時代,出現了以阿里、騰訊、京東、美團為代表的大型互聯網平臺,人們生活的方方面面幾乎都集中到了這些大型的互聯網平臺上面。

          可以說,這些大型的互聯網平臺引領并且推動著互聯網時代的發展。

          當數字化時代的號角吹響,新戰役即將打響。

          那么,在數字時代,誰才是真正的主導者呢?

          正如上文所講,互聯網時代是以撮合和中介為主打的發展模式。這種發展模式決定了互聯網時代的發展必然是建立了強大的流量基礎上。

          于是,坐擁海量流量的互聯網平臺理所當然地成為這個時代的引領者和推動者。

          當數字時代來臨,它的發展模式是建立在對于傳統行業的內在元素和流程進行深度調整和重構的基礎上的。

          因此,只有那些真正能夠改造傳統行業的內在元素,并且可以再造傳統行業的運行流程的玩家,才是數字時代的引領者。

          改造傳統行業的內在元素并不是一件容易的事情,它需要的是從傳統行業的流程和環節著手,通過新技術的應用讓傳統行業的內在元素發生根本性的改變。

          然而,這種現象僅僅只是在數字時代的早期階段出現。

          在數字時代的早期階段,只有那些真正能夠不斷賦能傳統行業,對傳統行業進行數字化改造的賦能者,才是真正意義上的引領者。

          這就是我們現在所看到的產業互聯網時代。

          當產業互聯網時代完成了對于傳統行業的流程和環節的數字化改造之后,傳統行業那種煙囪林立的封閉狀態開始被改變,信息孤島開始被聯通。

          此刻,數字時代開始進入到一個全新的發展新時代。

          這個階段,才是真正意義上的數字化時代。

          如果我們再去一味地對傳統行業進行深度賦能,對傳統行業的內在流程和環節進行數字化的改造,而不關注改造后的成果,必然會面臨新的困境和難題。

          于是,數字時代開始進入到全新發展階段。

          這個階段,真正考驗玩家們的不再是賦能的能力,而是如何將業已被數字化的流程和環節進行重塑和再造的能力。

          值得注意的是,在這個階段,不同流程、不同行業之間的壁壘業已得到了上的消弭,信息自由流動,數據高度共享。

          如何將這些行業內部的不同流程,甚至是不同行業的數字元素進行再度整合,并且發揮出最大的作用,甚至衍生出新的行業物種,才是考驗玩家們的地方。

          在這個階段,真正的引領者將不再是單純意義上的賦能者,而是變成了聚合者。

          這里的聚合者,就是把那些業已被數字化的行業內部的流程和環節,業已被數字化的不同行業真正能夠重新拼接和組合的玩家。

          同賦能者僅僅只是做簡單的賦能不同,聚合者必須對不同的流程、不同的行業有深度且全面的把控,并且有能力對流程和行業進行再造和整理。

          當聚合者們完成了對于傳統行業的深度改造和重新整合之后,新的產業才能出現,數字化才算是真正完成,數字化時代才算是真正來臨。

          如果我們僅僅只是把數字時代停留在早期的賦能階段,缺少了對于傳統行業的重整,那么,這樣的數字化只能算是完成了互聯網時代并未完成的工作,卻沒有做好真正自己要做的工作,僅僅只是半拉子工程。

          只有完成了行業內部流程和元素的數字化改造,并且衍生出來了新的行業物種,數字時代才算是真正來臨。

          當越來越多的跡象出現,一個以數字化為代表的全新時代正在來臨。

          正如互聯網時代出現了以大型互聯網平臺為代表的引領者一樣,數字化時代同樣會有其推動者和引領者。

          在數字化時代的早期階段,那些真正能夠對傳統行業進行深度賦能的玩家——賦能者——才是這個階段的引領者。

          當數字化完成,特別是當數字化時代的發展進入到行業的重塑與再造的階段之后,那些真正能夠將業已改變的行業進行再造的玩家——聚合者——才是數字化時代真正意義上的引領者。

          文章來源:人人都是產品經理    作者:孟永輝



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

          用超多產品,解構今日頭條設計背后的邏輯

          雪濤

          今日頭條的出現顛覆了傳統新聞產品(如網易、新浪和搜狐新聞)。

          傳統新聞依靠著編輯人員的推薦,將新聞觸達給用戶,而今日頭條則依靠著新聞算法,拋棄傳統人工分發的思路,使分發效率數以萬計的提升,其迅速崛起,成為頭部新聞資訊產品。

          今日頭條作為新聞信息流的頭部產品,里面的設計細節和設計邏輯值得我們思考和分析。

          信息流樣式

          什么是信息流?信息流有兩部分組成,信息流=信息+流。

          信息指的是內容,這些內容可以是新聞、視頻、圖片等,所呈現的樣式多為列表或卡片。

          流指的是瀑布流,可以無限滑動瀏覽。

          所以信息流就是可以無限滑動瀏覽內容信息。

          信息流的樣式的好壞,會直接影響到信息的展現效率和點擊率,從而影響到用戶獲取信息的效率和整體閱讀時長。

          下圖為今日頭條首頁推薦頻道的信息流:

          用超多產品,解構今日頭條設計背后的邏輯

          將信息流樣式進行簡單分類,使用最多的四種樣式為純文、左文右圖、短內容、大圖視頻。如下圖所示:

          用超多產品,解構今日頭條設計背后的邏輯

          純文樣式用于新聞中沒有圖片的情況,當文章中沒有圖片時,這時候采用改樣式。列表含有:標題、來源、評論數、發布時間。

          對于含有圖片時候,采用左文右圖樣式。目前新聞對于含有圖片的列表樣式,一般有3種分別為:左文右圖、左圖右文和三圖。

          左圖右文的樣式,強化圖片,弱化標題。對于新聞資訊來說,圖片無法準確的表達其新聞資訊的內容,所以這種樣式目前沒什么產品使用。

          目前市面上絕大部分產品都采用左文右圖,例如今日頭條、網易新聞、騰訊新聞、新浪新聞等。只有是搜狐新聞采用左圖右文。

          用超多產品,解構今日頭條設計背后的邏輯

          三圖則通過圖片吸引用戶點擊查看,更加通過圖片引導用戶點擊,好處是可以提升點擊率,但是整個信息流顯得亂,影響用戶閱讀。

          用超多產品,解構今日頭條設計背后的邏輯

          和網易相比,頭條信息流閱讀起來更加舒服,視覺壓力減少,這是基于今日頭條三圖樣式占比很少,如下圖所示,網易新聞信息流插入三圖樣式導致整個信息流雜亂。

          用超多產品,解構今日頭條設計背后的邏輯

          對比下網易新聞和今日頭條信息流樣式,如下圖所示:

          純文,今日頭條的標題顏色更深,網易的相對而言淡一些。頭條的列表高度比網易的高,這意味著,頭條的屏幕展示條數比網易新聞的少,但是整體的空間感和留白呼吸感更舒服。同時今日頭條含有發布時間,使得用戶觀看新聞資訊時,能夠感知新聞的實時性。

          用超多產品,解構今日頭條設計背后的邏輯

          左文右圖,頭條的列表比網易的要高一些,對比來看,頭條的標題更加明顯,圖片含有圓角半徑,使得頭條整體看上去更舒服。

          用超多產品,解構今日頭條設計背后的邏輯

          大圖視頻,兩者的區別不大,依然是標題文字顏色、封面圓角和發布時間的差異性。

          用超多產品,解構今日頭條設計背后的邏輯

          小結:

          頭條流整體的空間感、留白,標題顏色對比做的比較好。

          留白相對于網易更多一些,相同的屏幕空間,展示的內容信息會少一點,屏幕展示效率會低一些。但用戶在閱讀過程中舒適度更強,同樣的情況下用戶的閱讀時長會變長。

          信息流分發

          什么是信息流分發?通過一定的設計策略,將用戶的流量合理的分配到其他各個地方,從而達到產品的設計目標,促進流量利用最大化。提升流量最大限度的轉化,獲得更大的商業化價值。

          今日頭條的信息流主要包含5個模塊:置頂模塊、資訊列表、廣告模塊、短內容、其他功能模塊的卡片入口。如下圖所示:

          用超多產品,解構今日頭條設計背后的邏輯

          推薦流頂部的置頂內容,最多置頂兩條,這里是因為相關政策原因。

          在正常信息流第一條之后,插入廣告,為平臺做商業化營收。之后就會根據用戶的閱讀習慣,給用戶推薦信息內容,并時不時的插入廣告等。

          今日頭條沒有編輯運營,所以幾乎所有的新聞都來自于機器算法。少了編輯人員的人工運營,使得今日頭條有巨量的內容按照不同用戶的閱讀習慣推薦用戶不同的內容。

          搜索欄

          在新聞信息流產品里,搜索欄所承接的使用場景主要有兩個。一個是提供搜索新聞功能,通過關鍵詞對當前或過去的新聞進行搜索。

          另一個是在搜索模塊提供熱搜新聞,提供用戶閱讀。

          那么如何提升搜索欄的點擊次數。今日頭條將熱搜新聞以提示語的形式展示在搜索欄滾動,吸引用戶。同時為了更大限度的展示新聞條數,采用一排兩個的設計,保證的提升點擊率。

          用超多產品,解構今日頭條設計背后的邏輯

          用戶點擊搜索框之后,搜索框里面內置第一條熱搜關鍵詞。用戶可通過鍵盤上的搜索,進行搜索。也可以點擊搜索欄下方的兩個熱搜新聞進行搜索查看。

          短視頻

          視頻標題內置于播放器中,這樣的好處可以減少卡片高度,讓視頻曝光量提升,缺點是用戶如果想看視頻標題介紹時,則需要點擊下播放器,標題才能再次出現。

          用超多產品,解構今日頭條設計背后的邏輯

          標題置于播放器里面,頭條可以展示2.5條,而好看視頻將標題置于外面只能展示2條,如下圖所示:

          用超多產品,解構今日頭條設計背后的邏輯

          對于廣告業務來說,收入的一個重要指標則是廣告曝光量,為了提升廣告的收入,則必須降低視頻高度,使得廣告曝光效率得到提升,以此提升收入,所以頭條將標題放置于播放器里面符合商業目標,但是不符合用戶目標。

          小視頻

          小視頻的布局設計大致有兩種,一種是抖音式布局,采用頭像和操作項位于右側。這樣的好處是,視頻的互動量很明顯的展示出來,可引導用戶互動。但對視頻的內容有一定遮擋影響。

          另一種是好看視頻式布局,將頭像昵稱、操作項放在底部,弱化視頻的互動數據。讓用戶專注于視頻內容。

          用超多產品,解構今日頭條設計背后的邏輯

          今日頭條的小視頻采用和抖音一樣的布局。頭像和操作項放于右側。但是為了引導用戶評論,在界面底部加入了輸入框,引導用戶評論,為了讓用戶更加方便的看評論。上滑手勢變成了調起起評論。

          用超多產品,解構今日頭條設計背后的邏輯

          短內容流

          推薦流里面的短內容(微頭條),點擊進入短內容feed流。而非短內容詳情頁。用戶如果想看詳情,那么需要用戶再次點擊。

          用超多產品,解構今日頭條設計背后的邏輯

          這種設計明顯體驗不好,估計產品為其他短內容導流。這樣的交互設計,可以使得整體的短內容流的曝光量提升好幾倍。

          這種做法犧牲了體驗,用戶如果需要看詳情,則需要連續點擊兩次。這是為了業務指標作出犧牲的設計。

          文章來源:優設    作者:Echo的設計筆記 


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

          設計師必看的個人中心設計指南

          周周

          個人中心作為app類的重要頁面,無論是交互設計師還是視覺設計師,都需要對個人中心的設計過程做到胸中有數,本文就“個人中心”版塊進行分析與總結,一起進步。




          文章來源:站酷

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

          抖音關閉所有電商外鏈,劍指京東、淘寶?

          雪濤

          編輯導讀:疫情之下,短視頻直播帶貨意外創造出了流量+電商這種新型合作模式,更是給抖音直播電商的發展添了把火。8月26日,抖音宣布:10月9日后,抖音直播間只支持小店商品,第三方來源的商品將不再支持進入直播間。至此,抖音想要打造電商閉環的野心終于顯露,本文作者對此展開了分析討論,與大家分享。

          8月26日,抖音正式官宣將在10月9日起關閉直播間的電商外鏈,第三方來源的商品將不再支持進入直播間購物車。也就是說像淘寶、京東等其它平臺的的商品將無法在抖音直播間內實現直接跳轉購買。

          而對于抖音這一舉措,其實我們并不難看出字節跳動想要在電商業務上與阿里、京東等電商平臺“扳一扳手腕”的決心。

          今年六月,字節跳動便成立了以“電商”明確命名的以及業務部門,結合其目前所擁有的產品矩陣,開始全面進軍電商業務,以解決字節跳動在信息流廣告與直播營收達到天花板之后的下一步商業化難題。

          這便與2020年最紅的風口——“直播電商”不期而遇,因此字節跳動火速開展抖音直播電商方面的布局,力求新的商業化出口。

          • 8月6日,抖音發布美妝品類直播帶貨新規,非抖音小店的其它電商平臺,例如淘寶、京東、蘑菇街等渠道的美妝類產品只能通過巨量星圖,發送任務單才能上架購物車,而抖音小店則不會受影響。
          • 8月17日,巨量星圖發布公告,自8月20日起,對于第三方平臺上架銷售的商品,平臺將會抽取20%的服務費用,抖音小店則僅收取5%。
          • 9月6日,不僅僅是美妝,全品類商品都需要通過巨量星圖發送任務單才能上架購物車。
          • 并且自10月9日起,第三方來源的商品將不再支持進入直播間購物車,也就意味著自10月9日之后,非抖音小店上架的第三方平臺商品將無法在抖音上進行直播帶貨。

          從之前發布的章程中我們可以看到,抖音從2019年下半年方才進行電商業務布局,迄今為止才運營了不到一年時間。那為何字節跳動就敢憑借“直播電商”開始與運營了數十年之久的淘寶和其它電商平臺進行“正面對決”?直播電商真的有這么大的“魅力”嗎?

          一、直播電商的魅力

          1. “直播電商”——2020年最大的風口

          2020年初,一場突如其來的疫情牽動著全國上下乃至全世界的目光,全中國進入封閉階段,而直播電商也迎來了其飛速發展的契機。受2020年疫情爆發和超長假期的疊加影響,線下購物渠道近乎完全關閉,然而在物流恢復后,線上電商獲得了良好的發展時機。

          同時直播和短視頻用戶數和使用時長激增,企業神速轉型,品牌線上滲透率提升,直播電商作為快速提升流量轉化效率成為品牌宣傳銷售新陣地,也成為各大平臺競相角逐的熱點賽道。

          根據艾媒數據顯示,截止至2020年3月,中國網絡直播用戶規模達5.6億,其中直播電商用戶規模約2.7億,占比48.2%,而受疫情影響,有近7成的用戶經常觀看帶貨直播。

          根據數據顯示,經過前幾年直播帶貨所帶來的市場教育,特別是受此次疫情影響,用戶對于直播電商的接受程度明顯提高,成為了用戶生活、娛樂、購物的重要組成之一。

          直播電商所帶來的影響力,已成為2020年最受關注的營銷活動。

          2. 直播電商如何帶動用戶進行消費?

          還處于線下購物時代時,我們常常會看到銷售員在某個門店或是某款商品前大聲吆喝,又或是樹立起打折促銷的立牌等各種促銷活動。當顧客被吸引過去時,銷售員往往會通過他們精湛的話術來誘導顧客進行購買。顧客則是被撬動了理性,成為了“沖動消費者”。

          如果說電子商務是重構了人-貨-場的概念,將銷售渠道由線下改為線上的話,直播電商則是將這種線下的營銷模式與購物體驗搬到了線上。

          傳統的電商模式是由消費者瀏覽商品信息去進行商品的挑選,它將商品提供給消費者的模式轉變成為由消費者選擇產品的模式,而其中主要是人與物的對話;而直播電商不同,影響的是消費者進行選擇的過程,實現的是人與人之間的對話。

          而為什么人與人的對話會實現更好的營銷效果?

          結合我們之前所提到的線下營銷方式能夠刺激消費者的購買欲望來看,直播電商則是進一步強化了撬動消費者理性的方式。得益于直播所帶來的沉浸感與互動感,使得消費者對于商品的信任程度在不斷的上升,更容易去實現銷售活動。

          《烏合之眾:大眾心理研究》中曾提到“從智慧的層面上看,群體總是要比被孤立的個人水平低,更容易受到群體感受的驅使”,表明一個人或個體進入到群體當中后,就會被群體帶動,去做一些原本個體不會去做的行為。

          而直播帶貨也是如此,用戶通過彈幕、評論、刷禮物等方式組成一個無實型的整體,再由主播作為關鍵意見領袖進行領導,并給予相應的優惠作為動力驅動,使得用戶受到“群體”的驅動,實現“沖動消費”。

          直播電商通過更強的互動方式來提升用戶再進行購物時的信任感,以此減少用戶在進行商品消費時的思考空間,提升情感驅動的價值,從而促進消費者實現沖動消費行為,也因此取得了比傳統電商促銷更好的銷售業績,成為了近兩年最受關注和歡迎的營銷方式之一。

          二、抖音在直播電商中的布局

          抖音其實早在2017年便開始進行電商業務的布局,知道搭乘2020年電商直播的“快車”,便正式開始著手扶植電商業務的發展。

          4月1日愚人節當晚,中國最后一個初代網紅“老羅”伴隨著節日“歡快的氣息”,開啟了自己在抖音的首場帶貨直播。世人皆笑談老羅迫于生計開始“下?!?,殊不知掙錢嘛,生意,不寒磣。

          根據抖音官方數據顯示,這場直播累計觀看人數超4800萬,訂單量50.8萬,單場銷售額1.1億元,音浪收入335萬元。雖然相較于李佳琦雙十一單場直播破10億的“奇跡”仍有一段差距,但若是排除雙十一等直接因素,老羅這次直播熱度也可排進直播電商前三的位置。

          而之后伴隨著“羅永浩直播帶貨”首秀所帶來的熱度,抖音開始全面布局直播電商業務。

          在功能端:

          • 5月7日,抖音小店開放個人身份入駐,可入駐服裝、鞋靴、運動戶外、廚具四大行業,不需要營業執照即可申請,只需繳納500元保證金;
          • 5月15日,巨量星圖上線直播業務,提供達人精準推薦,在線下單等功能;
          • 5月15日,DOU+上線“直接加熱直播間”功能;
          • 5月26日,抖音直播間新增點贊功能;
          • 5月29日,巨量星圖上線“投稿任務”,強化達人變現;
          • 6月初,抖音上線「抖店」APP,有消息顯示,小店商家數量已近百萬。

          同時,抖音通過各類推廣活動進行造勢,持續獲取熱度與大眾關注。

          • 5月15日-17日,抖音啟動“515王牌直播間”主播排位賽,陳赫、王祖藍、羅永浩分別排位前三;
          • 5月22-6月25日,抖音正式上線“元氣學院”;
          • 5月23日,抖音直播“百萬開麥”主播扶植計劃再升級,除了提供千萬曝光支持外,還能幫助優秀的內容生產達人快速實現漲粉、變現;
          • 6月5日,抖音聯合4大經紀公司發起“練習生請開播!抖音星主播共培計劃”;
          • 6月9日,抖音與混沌大學共建“知識創造營”,陸奇、李善友等名人直播演講

          并且,在6月18日,字節跳動正式成立了以“電商”明確命名的以及業務部門,這也就意味著電商已經明確成為了字節跳動的戰略級業務,開始持續跟進業務流程與創新。

          三、抖音的直播電商,未來路在何方?

          從以上關鍵節點我們可以感受到抖音當前的直播帶貨戰略,多以簽約、培育和挖掘頭部主播等來的獲取到熱度,從而打破淘寶薇婭、李佳琦,快手辛巴等其它平臺頭部主播對于直播帶貨行業的“壟斷級”影響力。

          而數據表明抖音在直播帶貨元年的建設確有成效,收割了大批流量和資本的關注,為平臺帶來了持續的熱度。但隨著時間的沉淀,明星帶來的流量除了忠誠的粉絲以外,沉淀下來的粉絲數量相較于總數而言并非十分樂觀。

          雖然得益于抖音銷售額+音浪的方式,幫助實現銷量和流量的雙豐收,從而帶來足夠的利潤意外,抖音在自身電商平臺上的建設仍然是捉襟見肘,與淘寶京東等成熟的電商平臺相比,相差甚遠。

          因此抖音圍繞著“打造電商產業閉環”這一戰略任務出發,開始切斷非平臺上架的外鏈商品,從而促使商家開始入駐抖音平臺,打造成熟的商業閉環。

          從當下來看,抖音這一手操作,并未能取得多少的利益,甚至還會有損個人商家的銷售額。但是字節跳動的目光向來都是比較長遠的,他們想來不是為了蹭一波“直播電商”的熱度,賺一遍快錢便迅速離場,而是下足了決心要持續深耕平臺的電商業務建設。

          在這里提一個問題:對于商家和消費者而言,一個良好的電商平臺應該是怎樣的?是有統一的平臺供應鏈管理、實時的用戶數據反饋從而為商家帶來良好的銷售數字;是有的物流、優質的商品、實惠的價格、親切的服務所帶來的良好購物體驗。顯然抖音當前的電商平臺建設并沒有做到這一點。

          而通過對商家入駐抖音小店之后進行統一的管理,抖音能夠在功能層面為商家提供供應鏈建設的幫助,提供實時有效的數據反饋從而幫助商家實現靈活的營銷推廣。對于消費者也是如此,通過平臺統一的有效管理,能夠以低成本的方式實現更好地產品建設,從而為商家和消費者帶來更加優質的購物體驗。

          從內容出身的抖音,講究百花齊放、百家爭鳴,通過優質的算法能力來盡可能地滿足不同用戶的不同需求;而電商業務不盡相同,通過關閉第三方外鏈的方式,來加強對于平臺的監管與建設,方能為用戶帶來更好的購物體驗。

          抖音憑借著優質的內容不斷提升用戶感受刺激的閾值,撬動著用戶的消費理性。但隨著用戶熱情不斷冷卻,消費逐漸趨于理性的階段,抖音是時候開始完善平臺電商業務的功能涉及,通過感性來刺激消費欲望,通過理性來維持消費行為。

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


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

          iOS14 做了哪些體驗升級

          雪濤

          iOS14 你升級了嗎?是否值得升級呢?來看看給大家準備的體驗總結,不足之處往留言補全。

          在大家的期盼與猜測中,蘋果2020年秋季發布會如約而至。關于發布會的內容本文就不做解讀啦!相信各位互聯網設計師都是早早的就通宵補上啦!今年并沒有發布新版的 iPhone 手機,但是新的 iOS 系統卻沒有遲到。帶著作為設計師的敏感度,我依然升級了新版的 iOS14,今天便為大家整理一些個人覺得不錯的體驗感想,一起共勉。

           

          剛升級完成就簡單的把玩了一下,升級后的設計還是帶來了很多驚喜和變化,體驗度也更加流暢。接下來我們就一起看看升級后的系統帶給我們哪些更好的體驗,以下僅展示個人用過的部分,歡迎大家補充完善。

           

           

          01、新增 App 資源庫,實現自動排序

          iOS14 更新之后帶來了很多新變化,首先提到的就是主屏幕最后一頁新增了 App 資源庫,自動幫你整理安裝的所有 App,還可以根據你的使用習慣進行自動排序。也可以通過搜索進入資源庫搜索列表,以字母排序便于查看,關鍵詞搜索快速的找到指定的 App,方便用戶更好的管理與查看安裝的 App。


           


           

          02、隱藏主屏幕頁面,手機桌面更簡化

          往期版本長按主屏幕是沒有任何交互動作的,除非是長按應用圖標。更新后的 iOS14 版本長按主屏幕可以激活桌面應用圖標的管理和刪除,點擊底部切換的小圓點可以把所有主屏幕縮略圖展示。通過勾選可以隱藏某個頁面來簡化主屏幕,方便用戶可以便捷的進行應用管理。


           

           


          03、桌面小組件帶給你更多驚喜

          iOS14 新增了可自定義的桌面小組件,重新設計的小組件更為精美,并且支持添加到主屏幕。長按主屏幕點擊左上角“加號”即可添加小組件,有多種尺寸可供選擇,方便用戶根據自身情況選擇,一目了然。


           

           


          04、來電彈窗不再遮擋屏幕

          當你的 iPhone 來電時,之前都是整屏顯示,更新后的來電以彈窗的形式出現,界面不再遮擋屏幕,向上清掃即可拒接。清掃之后以震動的電話小圖標顯示在左上角,單擊即可激活來電界面,操作更加便捷。


           

           


          05、視頻畫中畫帶給你不一樣的視聽體驗

          在很多的影視類 App 中都已經實現視頻畫中畫,但是在手機主屏幕上體現是 iOS14 更新后的一個新增。

           

          當用戶在觀看視頻時打開畫中畫,可以將視頻浮動在屏幕上。雙指交互可以放大、縮小視頻窗口,拖動到屏幕外可以實現隱藏操作。視頻畫中畫讓用戶在觀看視頻時可以進行疊加操作,帶給用戶更好的操作體驗。


           

           


          06、輕點背面讓快捷達到了

          iOS14 新增了輕點背面操作功能,可以在觸控里面激活輕點背面功能??梢栽O置輕點兩下或者三下執行指定的操作,例如截屏、App 切換、音量調節等,讓快捷操作發揮到了。


           

           


          07、重新設計的 Siri 更智能

          Siri 的喚起界面進行了重新設計,采用屏幕底部彈出的形式,更為精簡好用。Siri 喚起后的動態展示也顯得更為智能和科技感,體驗上面變得更為智能。


           


           

          08、默認瀏覽器可設置 Safari 之外的第三方

          iOS14 新增了一個特性,用戶可以將默認瀏覽器設置為 Safari 之外的第三方瀏覽器。例如你更習慣使用 Chrome 瀏覽器瀏覽網頁,便可將此設置為默認瀏覽器,點擊鏈接時將會默認以 Chrome 打開網站。這個新增的小特性方便用戶可以根據自身使用習慣進行選擇,更加人性化。


           

           


          09、短信刪除提示優化

          之前版本刪除短信的提示占據界面寬度三分之一左右,更新后的提示采用通欄顯示,提示更為明顯。


           

           


          10、通訊錄卡片式設計

          iOS14 優化了一些界面風格,以卡片式設計為主,比如通訊錄、短信等界面。進入個人通訊錄詳情界面,卡片化的界面使得信息布局更加清晰明了,功能更為突出。


           

           


          11、擬我表情新增與優化

          沒有照片設置頭像也沒關系,為好友和自己設置擬我表情作為頭像也是不錯的選擇。iOS14 不僅新增了擬我表情貼紙,還新增了十幾款新發型和新頭飾,提供用戶更多選擇性。


           

           


          12、表情搜索更便捷

          在對好友設置頭像時,除了擬我表情以外也可以選擇更多表情,帶給用戶更多選擇。設置表情頭像時,也可以輸入對應的關鍵詞,比如:“可愛”、“調皮”等關鍵詞。通過關鍵詞更能精準的體現用戶需要的情緒表達,不會看著表情過于糾結。


           


           

          13、相簿優化預覽照片更便捷

          iOS14 優化后的相簿在頂部設置了選擇和更多操作,更多里面可以對照片預覽進行放大、縮小、寬高比網格和正方形照片網格等操作。優化后的呈現方式更能滿足用戶習慣,可以根據自身喜好進行照片預覽展示。


           

           


          14、為每一張照片添加說明

          iOS14 更新后支持為每一張照片添加說明,讓你在查看以往拍攝的照片時能更好的進行回憶。也對隱藏相簿進行了顯示設置,可以在設置中不顯示隱藏相簿,避免尷尬的情況出現。


           

           


          15、相機優化,性能更佳

          短視頻越來越受到追捧,優化后的相機按住快門可錄制快速視頻,向左拖移快門可拍攝連拍快照。據說升級后的拍照性能得到優化,還能設置鏡像前置鏡頭,大家可以體驗感受一下。


           


           

          16、備忘錄變得更加強大

          沒有好記性,就要善于備忘錄。iOS14 更新后的備忘錄功能更強大,繪制常用形狀時稍作停留,圖形就會變成標準形狀,是不是有點像 Procreate 繪畫軟件。還有更為強大的掃描功能,再也不用跑打印店掃描文件啦!


           

           


          17、自帶翻譯軟件,讓交談變得更簡單

          iOS14 新增了翻譯 App,內置支持十多種語言之間的離線互譯,支持文本和語音的實時翻譯。翻譯速度不僅快,還非常準確,而且還能自動識別語言進行翻譯,不需要頻繁的進行手動切換語言,讓交流變得更為簡單。


           

           


          18、信息置頂對話,更有動畫提示

          iOS14 可以將自己常用的信息對話在列表中進行置頂,有信息時不僅可以在頂部優先顯示,方便第一時間閱讀,還伴隨著動畫提示。


           

           


          19、語音備忘錄更好用

          更新后的語音備忘錄支持添加文件夾,方便對語音進行管理。并且語音可以添加到個人收藏,方便更好的取用,錄音音效得到優化,錄制的聲音更好聽哦!


           

           


          20、好玩的聲音識別

          iOS14 更新后的輔助功能中新增了聲音識別功能,激活之后可以展開選擇聲音類別,比如:貓叫聲、汽車喇叭聲、門鈴聲、嬰兒啼哭等等。設置完成之后,當出現類似聲音之后便會發送信息提示用戶。


           

           


          21、強大又好玩的快捷指令

          對于一些資深玩家來說喜歡研究快捷指令,這個相對比較復雜一些,不過可以實現很多意想不到的效果。比如可以通過創建個人自動化實現充電時出現息屏時鐘,這個需要提前下載好極簡時鐘,然后可以根據下面截圖流程實現,大家可以去體驗一下。


           


           

          小結

          iOS14 更新變化較大的就是 App 資源庫、桌面小組件、輕點背面快捷操作、設計卡片化、新增翻譯 App 和一些局部體驗升級等,整體來說體驗上面流暢度更好,設計上面更加靈活可控,依然還是值得升級體驗的。

           

          今天的體驗總結僅為拋磚引玉,還有更多優化升級的內容待大家親自體驗,希望這次 iOS14 的升級可以帶給你更多驚喜。


          文章來源:站酷    作者:黑馬青年 


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



          設計的行動思維

          雪濤

          你不會想要在緊急的狀態中去完成一件事情或一個設計作品,又或是做出一項決策。但如果你有系統的方法,則會讓你走出困境。

          反復訓練,你的大腦就會習慣這樣的思維方式,當你處在緊急狀態或者處于危機時,你的大腦便會像受過訓練一樣,幫助你快速決策或走出困境。

          本文講述《設計的行動思維》,它是一種優秀的思維方式,我用這樣的思維方式來指導我的設計行動;我以微信、淘寶、星巴克設計案例為你演示,幫助你更好地了解這一理論;它可以運用在你的設計執行和設計管理中,亦可以運用于你所在的任何領域。





          觀察
          Observation


          你需要反復觀察事物和自己認知之間的差異,這些差異往往存在在細小的事物中,不被察覺,需要不斷磨練我們的心智,讓大腦保持時刻鍛煉。

          你會發現,你會觀察到常人無法觀察到的一切,它是事物本身,或者一種現象,或是一處極為細小的變化,讓你的大腦時刻接受這樣的訓練,不止是你熟悉的事物或是領域,你將會觸類旁通。

          我們每天都在頻繁地操作淘寶、微信,你會發現品牌顏色的變化嗎?當事物的變化和認知之間形成差異,大腦就會自動做出判斷,并觀察到這一細微的差異,這是我們不斷觀察和訓練大腦所帶來的結果,我把這種行為稱為 ‘大腦的高度警覺’。這樣的警覺,并不是刻意獲取,而是大腦主動傳遞的。


          CASE 1 /  TAOBAO


          undefined


          這是Taobao APP 商詳購買頁面底部Button。一般情況下,品牌刷新或VI色調整,都會體現在界面的核心功能區域,例如Button或者Icon上。從‘立即購買’Button的色彩變化,便可以判斷Taobao經歷了3次重要的VI色調整。


          下面顏色是我記憶里的淘寶VI色(大致色值),淘寶VI色的調整也是相應了互聯網設計的主流色彩表現趨勢:


          undefined





          CASE 2 /  WeChat


          undefined



          這是微信公眾號后臺寫作界面底部區域的三個Button。和Taobao的case一致,核心區域的VI設計都會同步更新。我在撰寫文章的時候高頻操作的是‘保存’Button,自然就察覺到了色彩的變化。


          undefined



          大腦受訓練的程度決定觀察結果的細微程度。對顏色的判斷能力,我稱這種能力為 ‘色彩認知’。

          又例如公眾號默認文章字體顏色并不是純黑色,而是深灰色(#333)。因為深灰色的文字在白色背景上閱讀起來眼部更為舒適。當我第一次書寫文章的時候,就發現默認字體的顏色正是我所需要的。



          undefined



          CASE 3 /  Starbucks

          ‘色彩認知’由我們不斷觀察的結果累積而來。就像您無需動手設計,‘色彩認知’便會告訴你墨綠色界面搭配金色作為輔色,能給界面帶來尊貴的氣質,這樣的設計會讓星巴克顯得更為高貴。



          undefined

          [ 星巴克官網首屏截圖 ]


          常人看到這樣的界面并不會有任何意見。用‘色彩認知’來講講我的觀察。星巴克的主色是墨綠色,在官網大面積使用,則帶來‘視覺壓抑’的感覺,我想通過簡單地改變,來提升星巴克的品牌氣質。


          我用Photoshop吸管工具從官網首頁上的一張照片中提取顏色:香檳色(Champagne),這樣的顏色在墨綠色底色上有較好的辨識度和品質感,適用于標題性文字顏色。


          undefined

          [ 從照片中提取顏色 ]


          在前期的訓練中,也可將圖片馬賽克,這會輔助我們挑選顏色,當你足夠熟練后,即可直接用吸管在照片上選擇更豐富的色彩。


          undefined

          [ 從馬賽克照片中提取顏色 ]


          香檳灰(Champagne gray),可用作常規閱讀段落文字顏色,在墨綠色上面會顯得柔和、舒適。


          我重新設計了首頁的文字與版式:


          undefined

          undefined

          [ 優化后的效果 ]


          下面是之前的效果。對比看看:


          undefinedundefined

          [ 官網截圖 ]


          這是最簡單的用戶感官上的提升。而更重要的是‘用戶心理’上的提升,這將在用戶閱讀文字內容時發生。我們先看看文字內容(翻譯如下):


          標題 | 事情在變,但我們仍然在這里為您服務。


          正文 | 我們已暫時關閉店內咖啡廳,但部分雜貨店和直通車位仍然開放。某些市場還提供星巴克提供的Uber Eats服務。請訪問我們的商店查找器以獲取的商店營業時間和營業地點。


          按鈕 | 尋找門店


          這段文字是星巴克官方在疫情期間所寫,并不是一段激動人心的品牌宣傳文案,所以我們在設計的時候應使用常規的文字顏色,為避免白色在墨綠色下帶來的刺眼,我選擇白灰色(#e3e3e3)的字體顏色。標題想表達的潛意識文字是:‘雖然我們碰到了困難,但是我們依然堅持為您服務’。我改為香檳色,來體現星巴克積極的態度與服務的品質,會顯得更有力度。


          在頁面中使用這樣的顏色,同樣可以提升設計的活躍度,為品牌帶來更好的品質。例如,將顏色應用到星巴克官網中小圖標設計和文字上面,來提升品質感與活躍度:


          undefined

          [ 優化后的設計 ]


          undefined

          [ 官網截圖 ]



          超乎常人的細微觀察意味著敏銳的市場嗅覺,意味著更前瞻性的設計思維,為身處品品牌的設計師帶來巨大的商業價值和用戶共鳴。



          定向
          Orientation


          當我們觀察事物的時候,旁人和你一樣,也在觀察你所觀察的事物,同是一件設計作品,在于你是否能更快速地發現觀察對象的弱點,這些弱點就隱藏在事物之中,往往和某一處細節有所關聯。

          找到弱點,利于我們定向事物的問題,從而幫助我們快速找到解決方案;快速地觀察并發現事物的弱點,取決于大腦前期觀察訓練的累積。

          當身處緊張、有限的時間,我們無法獲得更多的思考與驗證,則需要我們在這之前做出更多的觀察訓練。訓練越多,你的大腦則能更快速地發現事物的弱點,便于你更好地定向問題。



          決策
          Decision


          正確的決策依賴于你對問題的定向。有效地判斷事物的弱點,則能更準確地做出決策。我相信認知與觀察都是可以訓練的,在我們的日常生活中,顏色的排列與組合,在我們眼前頻繁地出現,我們可以從任意的事物中來觀察,將觀察與獲取結合在一起,并付諸于你的行動。


          undefined



          就像我們生活中所觀察到的水果的顏色,你可以從中獲取到這些色彩搭配,并將它們存儲在你的記憶中。當設計中需要表現活力、清爽的設計元素時,你自然會想到這些綠色和黃色的搭配。



          行動
          Action


          行動之前,無需刻意地去完成流程化(觀察、定向、決策)的過程,大腦的速度與行動指令在一瞬間完成,這依賴于大腦在這之前的觀察訓練。當你看到事物,大腦便會條件性地做出反應并支配你的行動,你可以理解為‘條件反射’,這極大程度依賴于我們前期的大腦訓練與積累。


          undefined



          ‘ OODA’ 是職業軍人:博伊德創立的戰略理念,這一理念對美國以及西方企業界和管理學界有著巨大的影響。 《設計的行動思維》是我在‘OODA’的基礎上加以我的理解,并將它轉化為設計的新思維,我稱它為‘設計的行動思維’,并將它運用在我的設計執行與管理中。

          觀察、定向、決策、行動,最重要的是‘觀察’。觀察是一個日積月累的過程,并非一日之功。在我的設計工作中,我能快速地發現產品問題并提供解決方案,這來自于我對觀察的日積月累與學習,使我能快速定向問題,作出決策,并付諸于我的行動。在行動中,我會再次循環,直至不會出現任何的設計問題。

          福布斯、哈佛商業評論都介紹過博伊德的戰略理念,數十本專業管理著作都提到過他。美國管理學界對海軍陸戰隊產生了深厚的興趣,向商業企業界大力推薦‘海軍陸戰隊方式’,而這個方式的靈魂就是‘OODA’,這是博伊德作戰思想的結晶。

          對我來說,OODA是一種行動思維,它可以改變您在設計工作中的思維方式??梢赃\用在您的設計執行和管理中,乃至您所在的任何領域、包括您所擔任的任何角色。

          文章來源:優設    作者:Riixiong 


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


          日歷

          鏈接

          blogger

          藍藍 http://www.bjlmtradeweb.com

          存檔

          一本到在线视频免费不卡观看_久久人人超碰97精品_一级做a爱过程免费_猫咪最新永久在线网站