<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設計分享達人

          最近有設計小伙伴咨詢,怎么樣的交互說明才是最好的,是大家都喜歡的。最近他寫的交互說明文檔提交給需求評審會的成員審核時,大家都建議他再寫的合理些,這讓他傷透了腦筋。 

          我告訴他: 
          第一、崗位對象不同:沒有一份十全十美的交互說明可以打動所有人,讓所有人為之驚嘆。畢竟,由于閱讀交互說明文檔的對象不同,他們會對交互說明文檔有不同的要求,這是崗位屬性導致的結果。例如前端開發希望詳細到字段、初始默認值、數據調取接口等,而領導只要看保證業務方向沒有錯誤的大交互鏈路。 

          第二、同崗位不同認知:同一崗位不同成員的認知、從業經歷、個人喜好、性格脾性等也會導致不可能有完美適配所有人的交互說明文檔。例如在一個行業已經深耕多年的前端工程師,即使你的交互說明文檔寫的沒有那么詳細,他也可以從你現有的文字中推敲出其他方面,同時還能幫你補充完善;而針對剛入行的前端工程師,你要是寫的不詳細,他就會抓狂,項目時間緊急的時候還會自己腦補交互細節。之后你走查時候也會抓狂,但是沒用呀,誰讓自己沒有寫明白交互細節,遺漏了呢。 

          第三、使用場合不同:不同場合需要的交互說明文檔也不同。例如與對方面對面溝通,交互說明文檔可以少寫點;但是通過線上工具與對方溝通,就需要寫的盡可能詳細;如果是會議型的評審,那就要方方面面都做足功課了。簡單來說就像準備一份ppt:針對同一個主題的ppt,在外部演講和在公司內部演講,同一份ppt會需要設計兩個版本,一個是內部版,一個是外部版,原因在于使用場合不同。 

          第四、產品階段不同:交互說明文檔闡述的是一個產品的交互,而不是闡述其他的。如果產品所處階段為成熟期,那往往產品的交互文檔已經沉淀了很多通用法則,可以被復用,那么現在的交互說明文檔少寫點,問題也不大;但產品處于探索期或成長期,通常來說可復用性的交互資產是不存在的,那交互說明文檔就需要準備的相對完善。 


          有些設計小伙伴就說了,既然不可能滿足所有人,那我就按照自己的想法隨意寫好了。這可不行哦,畢竟我們的主要工作有一部分是撰寫交互說明文檔,這就必須要有認真、嚴謹、專業的工作態度,把這部分工作做好。那我們來看看,編寫一份友好的交互說明文檔要注意哪些。 


          什么是交互說明文檔
          交互說明文檔是用來告訴參與產品研發的團隊成員頁面交互相關細節的一個說明文檔,包括頁面間的邏輯跳轉、頁面內模塊的交互、頁面功能的狀態等。交互說明文檔寫的越詳細越有利于參與產品研發各方的正確執行。 


          有待改進的交互說明文檔
          我匯總了一些日常工作中有待改進的交互說明文檔形式,看看都存在哪些問題。 

          1、文字密密麻麻,無結構
          幾乎所有剛初入職場的設計師,在編寫交互文檔時,會怕自己寫少了別人覺得自己不專業,怕寫的不全沒辦法表達頁面細節,導致交互文檔密密麻麻都是文字,這讓閱讀者幾乎無法閱讀,找不到視覺落腳點。 


          2、描述簡單,不完整
          有幾年工作經驗的設計師,由于很多通用交互法則已了然于心,他們在編寫交互說明文檔時就比較簡單,一些交互就沒有寫在文檔上,這導致開發在開發時,忽略了某些交互。 


          3、數據太假,沒有邏輯
          交互稿數據沒有邏輯,是很多設計師經常會出現的問題,一部分原因可能在于產品經理沒有理順產品邏輯和細節就提交設計師畫圖了,另一部分原因可能在于設計時間緊張,來不及對交互稿中所有的數據都做到邏輯合理。 

          曾經遇到過的情況有,關聯數值關聯不上,表格中字段對應的值對不上,表單填寫的數據和實際情況不符。 
          建議大家在時間允許或有條件反推產品經理協助完善數據的情況下,盡量數據展現的真實與符合邏輯,如此有助于開發及相關閱讀者高效理解。 


          4、圖文太遠,找不到
          有幾次我注意到設計師提交上來的交互說明會標注“見圖X"這樣的文字。也就是一段說明讀完了,還得去頁面的某個角落尋找對應的圖,這種體驗非常不好。 

          在交互設計原則中有一項為“足不出戶”?!白悴怀鰬簟钡囊馑际侵改茉诋斍绊撁娼鉀Q的事情,不要去其他頁面;能在就近完成的事情,不要距離過遠。頻繁的切換和跳轉會導致用戶心流被打斷,容易引起用戶思緒中斷、思考不劉暢,甚至可能對產品產生反感。 

          同理,我們交互說明文檔中的圖文也應盡量相鄰,通過一眼文字一眼圖,讓用戶看的順暢、舒適,理解的快速。 


          5、零散,東一句西一句
          東一句西一句是指交互說明文檔中本該成為一體去描述的文字,被分成了好幾個部分去闡述,這對看文檔的人來說簡直是災難,他需要自己重新梳理交互思路,將交互規則串聯起來。 


          我們自己在編寫交互說明文檔時,盡量規避上述常見的問題。 


          什么是好的交互說明文檔
          對于什么是好的交互說明文檔,網上一搜一大把,這里我根據自己的經驗,和大家分享下什么是好的交互說明文檔。 

          首先我們來明確下,什么是好,有了好的標準以后,再來談談如何做到好。 

          1、什么是好
          通常情況下,交互文檔會給產品經理看,用來評審設計方案是否滿足需求;給視覺設計師看,用來指導視覺方案的呈現;給前后端開發人員看,用來指導開發邏輯;給測試工程師看,用來協助測試編寫測試用例?;诖?,好的交互說明文檔關系著設計方案是否可被最大程度的實現。并且如果交互文檔文字冗長、邏輯不清晰,不僅看的人吃力,還會需要增加額外的時間來和開發工程師溝通。好的交互文檔,我認為至少需要具備以下7點: 
          (1)明確價值 
          (2)考慮全面 
          (3)通俗易懂 
          (4)結構清晰 
          (5)圖文并茂 
          (6)僅此一份 
          (7)修訂記錄 

          2、如何做到好
          為了讓大家一邊學習一遍實踐,我使用“表單校驗”的交互案例給大家進行講解。 

          (1)明確價值
          能協助項目成員通過文檔更順利地完成工作任務,能幫助用戶解決問題,能達成產品目標,則是好的交互說明文檔。文檔對各方有價值,是一份好的交互說明文檔的起點。那么,如何編寫才能達到上述結果呢? 

          一方面是將此次文檔的價值寫清楚,包括寫明此次交互設計的背景與需求來源、需求清單,標明交互設計的理論依據,可以給用戶帶來的價值等。另一方面要和成員宣導這些內容,讓成員感受自己要做的工作是有價值的。 

          “表單校驗”上場: 


          (2)考慮全面
          拋開文檔閱讀對象等相關影響因素,通常來說交互需要考慮到以下幾方面: 

          a、整體交互流程
          整體交互流程是指產品頁面與頁面之間的交互邏輯。 

          b、頁面模塊交互說明
          頁面模塊交互說明是指模塊自身的交互說明,或同頁面內獨立模塊之間的交互邏輯,或不同頁面模塊之間的交互邏輯。例如點擊導航樹節點會聯動右側表格內容刷新;點擊banner跳轉到對應的商品詳情頁,且定位到頁面1/2位置。 

          c、頁面功能交互說明
          頁面功能交互說明是指單個功能的各種情況闡述。例如搜索框內輸入文字,通過enter觸發對應頁面跳轉。 

          d、盡量真實的數據展示
          雖然是交互說明,我們也盡量做到模擬真實數據,否則很容易讓閱讀者產生錯誤判斷。并不是所有人都會一字一句的去閱讀文檔,因此,盡量真實的數據,有利于閱讀者更有效的了解。 

          e、特殊情況額外補充說明
          很多情況下,會因為某些原因出現極端交互情況,此時也需要補充完整。 

          f、通用交互一處即可
          建議交互團隊為產品建立通用型交互說明庫,遇到類似的情況,直接調取即可。 

          實際上我們在編寫交互說明的時候,不太會分得那么細,很多說明是混合在一起表達的。 

          “表單校驗”上場: 

          (3)通俗易懂
          通俗易懂是指要讓文字、語言、圖片等做到讓受眾易于理解和感知,從而在信息傳遞過程中盡量少的出現損耗,這一點同時也與人類的理解能力有關。 

          百度百科是這么解釋理解能力的: 

          “理解能力是指一個人對事物乃至對知識的理解的一種記憶能力。 
          理解,有三級水平: 
          低級水平的理解是指:知覺水平的理解,就是能辨認和識別對象,并且能對對象命名,知道它“是什么”; 
          中級水平的理解是:在知覺水平理解的基礎上,對事物的本質與內在聯系的揭露,主要表現為能夠理解概念、原理和法則的內涵,知道它是“怎么樣”; 
          高級水平的理解屬于間接理解,是指:在概念理解的基礎上,進一步達到系統化和具體化,重新建立或者調整認知結構,達到知識的融會貫通,并使知識得到廣泛的遷移,知道它是“為什么”?!?nbsp;

          當我們了解了人類的理解能力水平是參差不齊后,我們就要盡量在工作中將專業知識化繁為簡(也可以針對人群化繁為簡),增強溝通效果,最終達到完成團隊目標的結果。 

          交互文檔盡量做到講人話,不要講一堆專業術語。記得之前有個交互設計師在會議上闡述自己的交互方案時,提到用了“提供邀請”原則。由于與會成員是開發工程師和產品經理,他們問到什么是“提供邀請”原則,并且在這個問題上大家討論了很久。 

          由此可見,表達通俗易懂,是很必要的。 


          (4)結構清晰
          交互說明文檔除了要表達通俗易懂外,還需要結構清晰。 

          結構清晰的內容不僅使閱讀者一目了然、理解成本低,還可以讓閱讀者了解撰寫者的意圖。要做到文檔結構清晰,除了需要遵守一些規則外,也不能脫離當前文檔的實際情況。 

          “表單校驗”上場(把文字進行分段處理,并取出關鍵詞): 
          (5)圖文并茂
          圖片和文字相得益彰可以加深閱讀者對文字的理解,同時避免閱讀者去想象文字對應的結果。由于人們對同一段文字的理解不完全相同,因此建議設計師盡量安排交互說明對應圖解。 

          “表單校驗”上場(左圖右文): 
          (6)僅此一份
          僅此一份是說交付給團隊交互說明文檔的時候不要多份。之前我們的前端小伙伴拿到了兩份交互文檔,一份是純原型交互文檔,一份是視覺稿交互文檔,兩者描述的信息大同小異。此時,建議交互文檔的信息做合并,只提交一份完整的給前端小伙伴,讓前端小伙伴能專心致志理解一份。 


          (7)修訂記錄
          建議交互說明文檔留存修訂記錄,一方面可以了解交互文檔的變更歷史,另一方面有利于回溯和查找信息。修訂記錄一般包括修訂人、修訂時間和修訂內容。 


          總結
          由于項目進度、業務復雜程度等不同,我們不可能每次都能寫出一份最好的交互說明文檔,但我們可以想辦法寫出一份相對可讀性高、可理解性高的友好的交互說明文檔。我們常說自己是做用戶體驗的,那交互說明文檔就是體現我們交互能力一個方面。 

          除了完成交互說明文檔,想要讓開發小伙伴真正理解交互說明,還需親自和開發溝通,千萬不要認為我寫的很詳細了,他怎么還是實現的有偏差。事實上,就如開篇所說:同一崗位不同人的認知理解、從業經歷、個人喜好、性格脾性等也會導致理解不同。特別是對于一些我們非常創新的、特殊的交互點,需要重點和開發說明。 

          并且,交互說明文檔基于業務的發展,也會不斷的迭代,我們要抱著多聽、多想、多思考、多接受的態度去不斷優化我們的文檔,盡力寫出一份友好的交互說明文檔。 

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:
          知果日記

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何自定義柵格系統

          ui設計分享達人


          柵格系統(grid systems)

          規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。


          基本原理

          在網頁設計中,把寬度為“W”的頁面分割成n個網格單元“a”,每個單元與單元之間的間隙設為“i”,把“a+i”定義“A”。他們之間的關系如下:

          W =(a×n)+(n-1)i

          由于a+i=A,

          可得:(A×n) – i = W

          我們通常把a稱為“柱”,對應代碼中的Column;i稱為“水槽”,對應代碼中的Gutter;a+i=A稱為“列”

          設計柵格系統,本質就是定義a,i,n的數值。

          UI設計中有一個通用做法,就是元素的寬度盡量是8的倍數,基于今天的大多數的網頁設計,畫板寬度都為1440px ,此時我們將a=24,i=24,n=24,這是一組簡單美妙的數值,可算得W=(24x24)+23x24=47x24=1128px;將柵格居中于畫板(偏置156px),此時的柵格系統如下:

          1128柵格系統:

          得到的這個柵格布局被廣泛使用,比如站酷網首頁:



          觀察計算公式W=1128=47x24=(24+23)x24,這里的47不是8的倍數,我們容易想到把它變成48,

          將a=25,i=24,n=24,算得W=(24x24)+(25-1)x24=48x24=1152px;此時的柵格系統如下:

          1152柵格系統:

          這個柵格系統的美感在于,寬度W=48x24=1152px,兩邊的留白為畫板1440px寬度的1/10等于144px。Ant Dseign中運用了此柵格:

          以上兩個柵格布局都是24柵格系統,使用24柵格系統的好處是,它可以輕松實現2等分、3等分、4等分、6等分、8等分、12等分,也可以進行1:2:1、   1:3:2、   1:2、 1:3  等不對稱分割的布局。


          除了最常見的24柵格布局外,也可進行36柵格布局,例如:

          a=16,i=16,n=36,W=(16x36)+16x(36-1)=16x(36+35)=1136

          1136柵格系統:

          a=26,i=24,n=24,W=(26x24)+24x23=24x49=1176px

          例如騰訊文檔:

          1176柵格系統:

          “廠”型布局網頁的柵格布局:

          以上的網頁布局都是瀑布式布局,在許多應用型網站中,常使用“廠”字布局,對于“廠”布局的網頁,該如何設計合適的柵格系統呢?

          我們可以先確定左側菜單欄的寬度,例如飛書管理后臺中左側菜單欄的寬度為228px,在拉動瀏覽器時,這部分通常是不動的,再確定主體內容去和左側菜單欄間的間隙,比如12px。

          此時可以計算W=1440-228-12x2=1188。

          使用24柵格系統時,12a+11i=1188,方程中有兩個未知數,我們設定其中一個時,就可計算出另一個。另i=12,解

          W =(a×n)+(n-1)i

          1188=(ax24)+23x12

          a=38

          是幫助,而非限制

          對開發者而言柵格是實現動態布局的手段,而設計師對于柵格的理解源自平面設計中的柵格,不應把柵格系統當成一種限制,而是幫助,也不用總是擔心元素超出柵格。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:
          隔岸吃瓜

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          對于網頁設計來說,柵格系統的使用,不僅可以讓網頁的信息呈現更加美觀易讀,更具可用性。而且,對于前端開發來說,網頁將更加的靈活與規范。

          如何提高設計還原質量和驗收效率?

          ui設計分享達人

          前言

          最近我們產品做了一次全新改版的項目。作為此次項目的設計師,從項目的前期分析、設計、交付開發、驗收上線,整個流程,在項目走查驗收階段我們設計師投入了30人/天!在我們覺得應該設計投入最少的階段,卻占了我們大量的工作 且最后還原度也遠不達預期。


          在這個項目中我遇到了哪些問題:

          還原問題不單單是設計師把設計稿做的多精準,標注的多仔細,這么簡單就能解決的。是設計和開發,團隊之間的合作共識問題。我把整個和開發對接工作分為前中后三個階段,在這里從頭來梳理一下,聊一聊設計師和開發如何高效對接,也是對自己的一次復盤總結。



          一、評審/排期


          1.1、設計師對還原的要求宣講


          在評審環節,設計師本人一定要將自己的設計稿進行宣講、幫助開發理解。注意給技術講述一些適配要求、設計規范、交互狀態及動效等,同時解答技術同學的一些疑問,這樣就能將一些可預見的問題解決掉,解決后期的溝通成本。

          有一些地方有多種實現方式,如果前期沒有跟開發溝通清楚,就會導致最終實現的效果存在誤差,比如:下方這個tab項,單給一張圖,開發根本不知道設計師想要的實現方式是什么,固定間距還是固定菜單寬度,還是每項平分寬度,最后很大可能就會按照自己的理解去做了,導致出現重復返工的現象。



          再比如一些點擊熱區,如果不手動標明,有可能就做的很小

          下圖是我們手動標注的熱區



          1.2、實際開發者要參與評審

          每個開發負責的具體頁面模塊不一樣,別人對具體了解程度也不會不一致,所以在評審會議上,一定要具體開發者在場,如果對應開發沒有發表意見,設計師可詢問,確保他已經理解需求。



          1.3、開發充分評估還原工作問題

          設計師在講解自己的要求后,開發也要及時反饋是否有還原困難,如:是否有技術限制?是否有組件改動困難(牽一發而動全身)?實現成本過高(投入產出的性價比不夠)?等意見和原因,設計師也可拋出之前是否遇到過類似的阻礙,幫助開發去了解。



          1.4、認真記會議紀要


          評審過程的問題和重要講解點,一定要記錄下來,會議中開發提出的一些問題及解決方案、或者沒有達成共識的地方,記錄下來等領導決策,在會議結束后以郵件形式、或wiki文檔發送前端們,抄送產品,確保會議內容的傳達到位。后面也好跟蹤。


          還有一點就是,我們之前遇到的情況,在宣講會上 講解的一些要求,開發在做的時候可能就忘記了,讓開發改他認為設計沒有明確要求、會有點難推動,就會搞得雙方都有抱怨。有會議記錄也可避免此類情況發生




          二、開發階段


          2.1、還原有問題及時反饋

          在前面我們做了詳盡的溝通和評審,但有時也避免不了在開發過程有些問題才發現暴露。這個就需要開發同學能重視還原問題,積極溝通反饋,和設計確認商議 是否有其它可替代方案,切勿自己發揮,等到后期驗收的時候才說出問題可能會影響進度


          2.2、開發完成后對齊設計稿自查

          開發者在完成自己負責的模塊界面時,可自己對齊設計稿自查一遍,參考【3.1驗收標準】的表格,可幫助判斷問題,在此階段也可發給設計者確認效果。


          三、驗收階段



          3.1、測試同學確保交互和視覺還原度至少在70%左右


          這里可以提前在項目排期階段,設計師將所需的驗收工時同步給技術和測試,將驗收時間考慮進去

          為什么要求測試同學保證還原度至少在70%呢?

          因為如果不要求測試走查還原度,設計驗收的時候就會有大量的問題,最后變成設計在測試界面而不是驗收。設計師不像測試對整個流程的測試配置那么熟悉方便,反復驗收需要測試和設計不斷配合,雙方的工作量都會加大。


          理想的狀態應該是測試整個流程走通,視覺和交互還原問題也要著重測試,設計和產品在測試沒什么大問題后再進行驗收。


          參考【驗收標準】的表格,可幫助判斷還原問題



          3.2、明確知道模塊的開發者

          最好是提前知道模塊的開發者,這樣驗收的時候一對一進行模塊的打版驗收效率更高


          3.3、設計走查問題標注優先級

          技術對功能上的BUG,可以自己很好的判斷哪些是嚴重的緊急的,但對于視覺和交互層面的感知就比較低。在提問題單的時候,我們可以幫他標注出優先級,告知開發哪些是比較嚴重的需要優先修改的,不然 開發自己很難判斷,可能就會挑一些比較好改的先改了,重要的問題反而被擱置了。尤其在項目時間比較緊張的時候,有優先級標注 開發能夠看出哪些是可以為項目進度做出妥協的,哪些是必須要修改的。



          3.4、BUG單

          設計提BUG單的不能簡單的說這里出錯了,請參考設計標注重新調整。要直接給出正確的尺寸、增多少、減多少、這樣可幫助技術提高更高效率,也能避免開發自己去看又出現誤差、又要返工修改。



          3.5、遺留問題有記錄



          四、結語

          設計師在驗收過程中容易遇到的一個比較頭疼的問題就是,技術和產品小伙伴可能因為項目上線時間緊,覺得視覺還原和頁面交互體驗上的問題不重要不給予修改,優先保障功能上線。

          除了這些原因,設計側也在檢討總結,自己有哪些做的不足的地方,所以 以上文檔也是對接下來工作的優化方案。設計還原度也是日??己酥?,需要大家重視,好的產品要嚴格把控精心打磨,希望這次的總結、相關流程和經驗,在接下來工作中能夠提升設計驗收效率和還原度。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:
          飛行的考拉

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          Java中JSON文檔解析

          前端達人

          1.JSON是什么?

          1. JSON的全稱為JavaScript Object Notation ,也就是JavaScript對象標記法。
          2. JSON是一種輕量級的數據交換格式,用于兩個程序之間的數據交換,類似于XML文檔。

          2.JSON對象格式

          使用JSON表示一個對象的格式:

          {
              "屬性名1":"屬性值1",
              "屬性名2":"屬性值2",
              ......
              "屬性名":"屬性值n"
          }  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          注意事項

          • 一個對象整體由一個大括號表示
          • 對象的屬性,是由一個個鍵值對組成
          • 鍵值對的鍵與值之間應該使用冒號隔開,而不同鍵值對之間需要使用逗號隔開
          • 鍵與值最好都使用雙引號,值可以是JavaScript中的任何一種數據類型

          示例

          {
              "name":"金蘋果",
              "info":"講述了種植蘋果的辛酸歷程"
          }  
          
          • 1
          • 2
          • 3
          • 4

          3.JSON數組表示

          JSON中的數組使用 [ ] 表示,并且數組可以跟對象互相嵌套

          格式:

          [元素1,元素2...]  
          
          • 1

          示例:

          數組包含對象

           ["張三","李四",{
                  "name":"王五",
                  "info":"一個在技術上使勁鉆研的人"
              }]  
          
          • 1
          • 2
          • 3
          • 4

          對象包含數組:

          {
              "name":"李小超",
              "friend":["張三","李四",
                        {
                          "name":"王五",
                          "info":"一個在技術上使勁鉆研的人"
                      }
                       ]
              "info":"一個非常帥氣的人"
          }  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10

          對象與對象的嵌套:

          {
              "name":"李小超",
              "project":{
                  "school":"HPU",
                  "name":"computer"
              }
          }  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          4.JSON的解析

          1. 使用Gson解析JSON文件

          1. 將Java對象轉換為JSON字符串

            String json = new Gson().toJSON(要轉換的對象);  
                    
            • 1

            代碼示例:

            Book b = new Book("金蘋果","講述了種植蘋果的辛酸路程"); String str = new Gson().toJson(b);  
                    
            • 1
            • 2
          2. 將JSON字符串轉換為Java對象

            對象 = new Gson().fromJson(JSON字符串,對象類型.class);  
                    
            • 1

            代碼示例:

            1. 將JSON字符串轉換為Java對象
             Book b2 = new Gson().fromJson(str, Book.class); System.out.println(b2.getName());  
                    
            • 1
            • 2
            1. 將JSON字符串轉換為Java集合
            String js = "{\"name\":\"金蘋果\",\"info\":\"講述了種植蘋果的辛酸歷程\",\"page\":[\"鋤禾日當午\",\"汗滴禾下土\"]}"; HashMap data = new Gson().fromJson(js,HashMap.class); System.out.println(data.get("page").getClass()); /*
                輸出結果:class java.util.ArrayList
            */  
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7

            我們在寫JSON字符串的時候,需要注意使用轉義字符轉換雙引號,另外,如果鍵值對的值是JSON數組,那么對應數組在轉換之后的類型是ArrayList

          2. 使用fastJson解析JSON文件

          使用fastJSON解析與Gson十分相似,不過前者使用的是靜態方法。

          1. Java對象轉換為JSON字符串

            String json=JSON.toJSONString(要轉換的對象);  
                    
            • 1
          2. JSON字符串轉換為Java對象

            類型 對象名=JSON.parseObject(JSON字符串, 類型.class);
            或者
            List<類型> list=JSON.parseArray(JSON字符串,類型.class);  
                    
            • 1
            • 2
            • 3

            示例:
            轉換為Java對象

             Book b2 = JSON.parseObject(json1,Book.class);  
                    
            • 1

            轉換為List集合

            List list = JSON.parseArray(json1,String.class);  
                    
            • 1

            在這里進行說明一下,我們觀察JSON.parseArray()的源碼可以看到,這個方法的返回值就是一個List類型的數據,我們向方法中傳遞的第二個參數是List元素所屬的類型。


            藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

            文章來源:csdn

            分享此文一切功德,皆悉回向給文章原作者及眾讀者.
            免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          JavaScript|異步編程

          前端達人

          JavaScript|異步編程

          1.異步的概念

          **異步(Asynchronous, async)是與同步(Synchronous, sync)**相對的概念。在我們學習的傳統單線程編程中,程序的運行是同步的(步驟在一個控制流序列中按順序執行)。而異步的概念則是不保證同步的概念,也就是說,一個異步過程的執行將不再與原有的序列有順序關系。簡單來理解就是:同步按你的代碼順序執行,異步不按照代碼順序執行,異步的執行效率更高。異步就是從主線程發射一個子線程來完成任務。

          2.回調函數

          回調函數就是一個函數,它是在我們啟動一個異步任務的時候就告訴它:等你完成了這個任務之后要干什么。這樣一來主線程幾乎不用關心異步任務的狀態了。

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>異步編程</title> </head> <body> <p>等待4秒過后執行</p> <p id="p2">太陽</p> <p id="p3">月亮</p> <script> // 回調函數 function sayHello(){ document.getElementById("p2").innerHTML = "Hello!Sun"; } // 使用setTimeout()可以設置sayHello為一個4秒的過程,第一個參數是回調函數,第二個參數是毫秒數 setTimeout(sayHello,4000); </script> </body> </html> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22

          在這里插入圖片描述

          等待四秒過后:

          在這里插入圖片描述

          主線程并未停止,body中的內容正常運行,而當4秒回調過后,子函數運行結果就改變了h2的值。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          細節見真章!有效提升設計體驗的10個細節

          seo達人



          1.為錯誤狀態添加圖標

          圖片

          帶有錯誤提示的圖標有助于用戶更快地識別錯誤的位置。輸入信息時,在有限的空間內,錯誤提示往往被設計的非常有限。

          常見的錯誤提示的結構是文字+顏色:告知用戶錯誤的原因并改變輸入框的顏色狀態。在這個基礎上,再添加錯誤圖標,構成文字+顏色+圖標的提示結構,可以讓整個提示狀態更全面,用戶也能快速明確地感知到問題的所在。

           

          2.引導用戶而不是顯示錯誤

          圖片

          常見的錯誤提示只是單純地告知用戶做錯了什么,并不能告知用戶應該怎么做才正確,這也是令很多用戶頭疼的地方。

          在設置密碼時通常對密碼有一定的要求,例如至少8位數、包含大小寫字母、包含特殊符號等,這些復雜的提示往往會讓用戶摸不著頭腦,不能做到第一時間了解情況,造成密碼創建失敗。

          當用戶創建密碼失敗后,如果只告訴用戶密碼創建失敗這樣一個結果會讓用戶感到很疑惑。比起結果,用戶更想知道的是應該怎么創建才是正確的,通過給出明確的引導,讓用戶知道應該輸入什么才是應該重點考慮的地方。

           

          3.給灰色加一點顏色

          圖片

          左側頁面的背景為純灰色(242,242,242),右側背景色為藍灰色(228、235、242)。

          通過對比能夠發現,藍灰色調對我們的眼睛來說更自然。在設計中,盡可能讓頁面背景的灰色偏冷或偏暖,而不是使用純灰色,這樣設計的頁面看起來會更舒服。

           

          4.使用不同的復選框狀態

          圖片

          復選框(Checkboxes)通常有一個或者多個選項供用戶選擇,用戶可以選擇一個也可以選擇多個。

          這里需要注意的細節是選項有全選中和未全選中兩個狀態

          如果里面的選項沒有被全選中,復選框需要有一個和選項不同的狀態提示,告知用戶框內有未選擇的選項;當選項全被選中時,可以用統一的標識來告知用戶。

           

          5.突出顯示搜索內容

          圖片

          搜索是產品必備功能之一,功能強大且方便。

          當我們輸入內容進行搜索時,搜索框會聯想一些關聯的關鍵詞供我們參考和使用,這樣的提示可以提升用戶的搜索效率,節省輸入時間。

          在關鍵詞聯想的基礎上,我們可以把搜索體驗做的更好!在聯想關鍵詞的同時,突出顯示輸入的內容,這樣就可以快速識別提示的其他內容,既突出重點又節省時間。

           

          6.將插圖添加到空狀態

          圖片

          出現空狀態時,沒有要求頁面必須是空白的??梢赃m當添加一些元素,如插畫、動效等,讓用戶感覺更舒服。

          如果想讓空狀態變得更好,可以給出具體的操作提示,告知用戶如何進行下一步,嘗試引導用戶到正確的地方。

           

          7.為消息添加合理的狀態

          圖片

          上圖兩個彈窗看起來很相似,唯一的區別是狀態圖標的不同。左邊的圖標是通用性的,右邊的更符合當前的狀態。

          交流和溝通不僅僅只通過文字。圖像、圖標或插圖都有助于用戶識別所執行操作的狀態。

           

          8.為面包屑導航添加顏色

          圖片

          這個方法常用于一些特定的解決方案上。通過在面包屑導航上添加顏色,可以告知用戶可點擊的導航類別,并提示用戶具體的位置,更加方便操作。

           

          9.避免使用默認陰影

          圖片

          很多設計軟件中預設的默認陰影看起來都不是很舒服,需要我們自己來設計一些柔和的陰影效果。

          要始終秉持對設計作品負責的態度,不能為了方便而使用了糟糕的陰影效果,這樣帶來的后果可能是整個作品的不規范,得不償失。

           

          10.同一個方案采用相同的色調

          圖片

          中性色有助于在頁面中建立平衡,更具有吸引力,然而使用太多的灰色調卻很容易破壞頁面的這種和諧。

          在整個設計中保持相同色調的中性色,可以將顏色選擇器切換到HSB模式,通過改變數值能很方便地調節顏色關系。

           

          最后

          通過這些實用性的設計細節,希望能對你的工作帶來切實的幫助。在設計中想的更多、更全面一點,不僅能提升自己思考的維度和深度,還可能讓產品和體驗上升層次。


          原文地址:CLIP設計夾(公眾號)

          作者:Clippp

           

          轉載請注明:學UI網》細節見真章!有效提升設計體驗的10個細節

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          一篇文章帶你深入了解”B端C化”的設計理念

          seo達人


          一、背景

          除了剛剛有說到的資本慢慢向B端市場的藍海轉移,還有一點就是中國互聯網環境的迅速發展,智能手機的大范圍普及,工作人群的年輕化,使得人們已經熟練的掌握了各種軟件的使用,并且在快速迭代的產品中慢慢變得挑剔、謹慎。

          圖片

          并且不斷優化迭代的互聯網軟件產品也在無形中為用戶完成了底層認知的搭建,一些功能、操作、交互邏輯已經深入人心,用戶也已經被教育成了”高玩”。

          所以如今一些新型B端產品的設計理所應當的在用戶體驗五要素中最貼近用戶的結構層、框架層 和表現層中與一些C端產品在一定程度保持了一致,這種設計理念其實也很好的解決了傳統軟件的復雜、門檻高、難用等痛點,很大程度降低了用戶的認知成本和學習成本,把高效、簡單、易用的工具帶到大家的日常工作中。

          圖片

           

          二、對B端C化的理解

          對這個概念的理解我認為是:”B端產品在使用體驗和視覺感受這兩個方面和C端產品接近”。這是我們設計師需要特別關注的,傳統的思維中,大多數設計師會認為B端是給公司內部人員或者商家使用的,只是一個管理系統,并不需要太過于精細,至于體驗也是停留在“能用就行”的程度。但是在我看來不管是C端還是B端,其實它的使用對象都是“人”,應該要遵循人們對于事物的認知和一系列復雜的人體工程學操作習慣。兩者都需要關注用戶在使用時的體驗感受,順暢的使用流程、清晰的信息展示和高效的行為效率,以及有效的引導都能夠快速的幫助用戶完成目標任務。無論是C端設計還是B端設計,滿足這些條件無疑可以給用戶帶來更好的體驗。

          圖片

          但是也不能以偏概全的認為C端的設計思維可以完全復用過來。B端產品的場景其實比C端產品還是要復雜的多,應該說是各有各的側重點,思維和設計模式上不能完全照搬,下面我就先說說它們各自的不同處,再舉例帶你看看B端產品在哪些方面可以向C端產品借鑒學習。

           

          三、B端C端的不同

          1.使用者不同

          B端使用者多是同一個組織集體,以群體為單位進行協同。比如:老板、部門主管、員工或商戶。而C端使用者相對比較單一,目標用戶群體即是主要使用人群,使用目標、偏好、個性比較明確。

          2.業務不同:

          B端業務大多數會存在多重維度、場景,使用場景跟業務緊密相關,同一個系統不同角色使用時的業務處理和所關注的數據信息,側重點會有很大的不同,需要全局考慮。不同角色使用產品的流程差異大,需要不同業務上更專業的解決方案。而C端業務一般維度比較單一,業務邏輯相對固定,任務路徑和展示內容比較單一。

          3.價值主張不同:

          B端注重效率、成本、管控、數據分析等。追求產品的穩定性、業務的增長性,保證產品性能和技術上的安全性。而C端注重用戶的體驗、使用簡單、有樂趣。

          4.產品思維不同:

          B端產品多數基于服務思維,工具化思維,更加理性;更多的是幫助B端用戶提高效率,完成業務目標。而C端多數為產品化思維,游戲化思維,更感性,更多的是娛樂和情感的滿足。

          5.產品形態不同:

          B端產品注重業務的梳理,多數會用到圖表、表格、模型,多數產品形態偏向更垂直行業或更專業的面板形態。而C端更注重用戶的感受,會用到很多夸張的動效,炫彩的顏色。

           

          四、B端C化在產品中具體的表現

          1.結構層 

          結構層確定各個將要呈現給用戶的選項的模式和順序。結構層是用來設計用戶如何到達某個頁面,并且要考慮他們完成事情之后能夠去哪里。

          具體在B端產品的表單交付場景下可以體現出,以前的B端表單往往過于冗長,借鑒C端一些注冊場景的設計,把表單拆分成3步內的行為步驟,減少用戶的疲憊感提升體驗。

          圖片

           

          2.框架層

          產品的框架層包括:按鈕、控件、照片、文本區域的位置。框架層是用于優化頁面設計布局的。

          具體在B端產品的列表頁可以體現出,列表頁中整體的按鈕、文本區域的位置、搜索和篩選的布局設計其實與C端產品中的商品詳情頁是類似的,遵循用戶的閱讀順序和視覺焦點來進行設計。

          圖片

           

          3.表現層

          視覺、聽覺、(觸覺)的體驗設計。多體現在一些情感化的設計也被運用在了B端產品中。

          圖片

           

          五、B端C化未來的設計方向

          反觀現在C端產品的一些設計風格和流行趨勢,有哪些可以運用在B端產品的設計中呢?

          1.3D化

          B端因為對數據的展示有較強的需求,用戶在使用過程中提高效率的判斷緯度也包括信息數據的獲取效率,而3D的視覺在數據可視化層面有著天然的優勢,可以幫助用戶更快速的理解數據維度所表達的核心價值。近年來網速等硬件設施的升級也為3D化視覺帶來可落地的基礎,設計師也嘗試在產品設計中融入更多的3D化元素。

          圖片

           

          2.情感化

          人們對傳統B端產品的印象往往是覺得它們比較枯燥、呆板的,如今一些新型的B端產品的設計理念也試圖在拋開用戶對于產品的這種既定印象,所以很多產品在往一些娛樂化、IP化的方向嘗試,并且都達到了一些比較好的效果,未來在這方面的思考和嘗試只會越來越多。

          圖片

           

          3.個性化

          B端產品的同質化嚴重,所以B端產品也需要從一些產品定位去定制更加富有個性的品牌基因,可以讓用戶產生對產品的感情,達到從同類產品中能夠脫穎而出的目標。

          圖片

           

          六、總結

          不管是B端還是C端,目的都是為了解決業務場景中遇到的問題,使用對象都是人,都應該站在“人性”的角度考慮問題,有人說B端產品一般都不注重設計,C端產品的設計更能滿足設計師對美的追求,我只能說它們的側重點不同,C端更注重視覺感受,要做到在視覺表現的感性層面吸引用戶,而B端其實更為復雜,需要做到底層的強大數據處理能力,產品的專業性包括交互、視覺的吸引力,這樣才能從眾多產品中得到用戶的認可并脫穎而出。設計師還需要不斷打磨細節和優化體驗來吸引和留住用戶。

          所以說“B端C端化”也只是在某些方面通用,但核心側重點不同,不能以偏概全、一概而論,但可以借鑒與參考,B端產品也可以做的很精彩。

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:方也

          轉載請注明:學UI網》一篇文章帶你深入了解”B端C化”的設計理念

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          簡約有效的設計,讓產品變得不一樣

          資深UI設計者

          編輯導讀:隨著產品的迭代升級,增加越多功能,設計相對地也會越復雜,用戶需要花費更多的精力來理解產品邏輯和使用具體功能。因此對產品進行簡約有效設計是十分有必要的。本文作者對此進行了分析,與你分享。

          一、簡約有效的含義

          產品是一個功能集合體,隨著迭代優化,會變得越來越復雜,這也意味著用戶需要花費更多的精力來理解產品邏輯和使用具體功能。因此對產品進行簡約有效設計是十分有必要的。簡約有效原則跟一致性原則比較類似,本身的含義比較廣泛,此文中,對簡約有效的原則作如下約定:

          “簡約有效設計指的是設計方案在滿足用戶和產品需求的前提下,應該最大程度的降低產品復雜度和用戶使用成本,以保證用戶使用產品的體驗和效率,最終達到為用戶和產品提供更多價值的目的?!?

          簡約有效的設計最大特點是“簡約”和“有效”。

          簡約——能降低產品的復雜度

          “簡約”指的是在滿足需求的前提下最大程度的降低產品復雜度。從普遍的角度來講,一個簡約的設計一定能夠極大的提升用戶的使用體驗和產品的使用效率。

          有效——能滿足用戶和產品的需求

          “有效”指的是設計方案必須能夠滿足用戶和產品的需求,這是設計最為基礎的要求,如果設計方案不能滿足用戶或產品的需求,那什么樣的設計都是沒有意義和價值的。

          二、簡約有效設計的價值

          在設計中,遵循簡約有效原則不僅可以保證設計方案的合理性,還可以為用戶和產品提供更多的價值和服務。

          1. 提升產品的用戶體驗

          簡約有效設計對用戶的價值主要體現在提升用戶體驗方面。

          1)降低用戶使用的成本,提升產品使用效率

          簡約有效的設計可以降低產品邏輯結構 、頁面布局、交互操作等的復雜度,從而減少用戶的認知和使用成本以及提升產品的使用效率。

          2)更好的情感設計化

          從心理學角度來講,越簡單的東西會越符合用戶預期,也越容易獲得用戶的信賴和好感,而簡約有效的設計可以降低產品的復雜度,降低用戶的而使用和認知成本,因此簡約有效的設計可以有效地提升產品的情感化設計,為用戶提供更好的使用體驗。

          2. 保證產品的健壯性和可發展性

          簡約有效的設計對產品的價值主要體現在保證產品的健壯性和可發展性。

          1)減少產品邏輯的復雜度和耦合度,保證產品的健壯性

          產品功能的復雜和邏輯耦合是一個無法避免的問題,越是復雜的邏輯其犯錯的可能性越大,其普適性也越差,但利用簡約有效的設計可以降低產品功的復雜度,去除不合理的設計,減少各個功能模塊之間的耦合度,從而保證保證產品結構的的合理性和健壯性。

          2)為產品預留更多的拓展空間,保證產品的可發展性

          從設計經驗上來講,產品做減法的成本遠遠大于做加法。利用簡約有效的設計在一定程度上是可以避免產品“過度”發展的問題,因為其目的就是降低產品的復雜度,這也意味著為產品預留更多的拓展空間,保證了產品的可發展性。

          三、如何做到簡約有效設計

          簡約有效設計的內涵是非常廣的,不是簡單的刪減功能或者減少頁面的中元素就是簡約有效的設計,其最基本的原則是“先有效,再簡約”,即在保證設計“有效性”的基礎上,再進行“簡約性”設計,“有效”比“簡約”的優先級高且重要。設計中,可以從以下幾個方面和角度進行簡約有效的思考和設計。

          1. 保證設計的目的性和價值性

          設計中的任何邏輯或元素都必須要有明確的目的和價值,如果設計的目的性和價值性不明確或者達不到預期,那么這樣的設計是不合格的。設計的目的性和價值性可以說是所有設計的基本原則和要求,同樣也是是簡約有效設計的重要評估標準和指導原則之一。

          2. 保留設計的特征性

          簡約有效原則本質上就是對設計進行“簡化”設計,但不能為了單純的簡化而無限制的“刪減”設計,其中重要的一點就是需要保證設計的特征性。設計的特征性能夠表明設計的特點,用戶通過這些特點性,以快速的辨別,理解和使用產品。例如在剪切板圖標中,其剪切的含義就是其非常重要的特征,一般來說就是剪刀元素,而這個設計特征是不能被刪除簡化的,需要在設計中進行有效地表達。

          3. 合理規劃產品功能結構層次

          產品功能結構層次是產品的主要框架,決定了用戶的主要體驗路徑,其設計的好快直接影響了用戶體驗的好壞。利用簡約有效原則不僅可以合理規劃產品功能結構層次,還可以降低產品結構層次的“復雜度”,提升用戶的使用體驗。設計中,可以從以下幾個方面考慮產品結構層次的“簡約有效”設計。

          1)合理的橫向和縱向結構層級數

          產品結構層級設計中既不能讓橫向結構層次過于扁平,也不能讓豎向結構層次過于縱深,前者容易導致產品功能結構分散和用戶認知混亂,后者容易導致用戶操作路徑過長,操作成本過高。

          2)同級結構層次之間的獨立性

          簡約有效的設計可以讓產品同級結構層次之間保持相對獨立,這樣不僅可以減少結構層次之間的交叉和耦合,減少后續產品迭代優化時的“耦合障礙”,還可以保證層級結構本身邏輯的“簡約性”。

          3)父子結構層級之間的關聯性和邏輯性

          簡約有效的設計可以讓產品父子層級之間有含義明確的邏輯性和關聯性,從而減少用戶的理解認知和操作使用成本。一般來說,父級層次結構趨向于展示概括信息和重點信息,子級層級結構展示詳細信息和次要信息,從而使產品結構層級更加符合用戶的認知和習慣,提升產品的使用效率和使用體驗。

          4. 簡單有效的任務操作路徑

          產品中用戶的操作任務是相對是確定的,但同一個任務,可以通過不同的方式和路徑來完成,其成本和體驗也是不同的。利用簡約有效的設計原則可以讓產品的操作路徑更加合理有效,降低不必要的操作和路徑,提升用戶的操作效率和使用體驗。

          1)用戶路徑長度的合理性和邏輯性

          用戶的操作路徑的總長度應該相對較短且合理,一般來說不建議超過5個環節,否則用戶任務完成率和體驗會有斷崖式的下降。此外,用戶的操作路徑中上下文前后操作節點應該有著合理的邏輯性和關聯性,以便保證用戶對整個操作路徑的理解。

          2)單個操作環節的目的性

          每一個操作環節應該有著明確的目的和主題,即操作環節需要讓用戶集中精力處理一個重要的操作任務,不能讓沒有意義的任務和信息分散用戶注意力。

          3)單個操作環節內容的有限性

          每一個操作環節中,用戶需要處理的任務以及信息應該是有限的,不能讓用戶同時處理過多的信息或者過于復雜的任務,否則會極大地增加用戶的負面體驗。如果單個任務環節中包含的信息較多或操作任務較為復雜,可以考慮拆分任務和適當的增加用戶操作路徑的長度。

          4)線性的操作路徑

          不要為用戶操作路徑設置過多的分支路徑或選擇,而是應該讓用戶操作路徑趨向于串聯且線性的,這樣不僅可以降低產品的復雜度,還可以可以降低用戶的理解和使用成本,從而提升用戶體驗和操作效率。

          5. 簡單有效的頁面布局

          簡單有效的頁面布局不僅可以更好的幫助產品達到預期目標,還可以極大的提升用戶體驗。設計中,可以從以下幾個方面考慮頁面布局的“簡約有效”設計。

          1)頁面布局符合用戶認知和習慣

          頁面的布局一定要符合用戶的認知和習慣,否則再怎么“簡單”的頁面,用戶理解起來也會費勁或者產生理解歧義。例如中文用戶的閱讀習慣都是從左到右和從上到下,用戶的操作習慣大多是先閱讀信息再進行操作,因此常見的布局都是將操作按鈕布局在頁面右側或者底部。

          2)頁面布局的信息是有價值且有效的

          頁面中布局展示的信息一定要對用戶或產品有價值,如果對用戶和產品都沒有價值的信息,那頁面中就不需要這個信息,這是簡約有效設計的基本準則之一。此外頁面布局中的信息一定要是有效的,不能讓用戶產生歧義,從而達到降低用戶使用成本和提升使用體驗的目的。

          3)頁面信息布局的規律有序

          頁面中布局的信息一定要規律有序,其主要目的是方便用戶閱讀以及理解,從而提升用戶的使用效率和體驗。讓頁面中的信息規律有序,最常見最簡單的方法就是將信息分類成組后再在頁面中展示。

          4)避免頁面信息過載

          頁面中的信息密度必須適中,不能信息過載,否則就會導致用戶瀏覽效率低,理解成本高以及操體驗差的后果。簡約有效原則是避免頁面信息過載的基本方法之一,其原則就是重點信息優先展示,刪除不必要信息或者隱藏次要的信息,利用不同的頁面和層級結構將信息的“復雜度”轉移分攤出去,從而保證用戶當前操作頁面信息密度的合適。

          5)頁面應該聚焦用戶當前任務

          頁面布局的信息應該與用戶當前正在處理的任務緊密關聯,不讓無關的信息分散用戶注意力以及干擾用戶當前的任務流程。如在自有賬號登錄頁面中,忘記密碼,注冊以及第三方登錄等次要信息的布局和樣式就不能過分顯眼,否則就會影響登錄頁面主要任務的完成——輸入賬號和密碼。

          6. 簡約有效的UI設計

          UI設計是產品功能邏輯的視覺化表現,其直接影響了產品的使用體驗。與其他設計原則一樣,簡約有效原則也是UI設計的重要的標準之一,設計中,可以從以下幾個方面思考和衡量簡約有效的UI設計。

          1)一致的設計語言和風格

          一致的設計語言和風格可以確保產品在視覺上的統一性和規范性,進而降低用戶認知和使用成本,即從視覺形式上和用戶認知層面,降低了產品的復雜度,提升了用戶信息瀏覽、理解以及操作的效率和體驗。

          2)正確無誤的信息傳遞和表達

          UI是各種產品信息的視覺載體,因此其一定要能夠準確無誤的傳遞和表達出信息的真實含義,不能因為UI設計而導致用戶對信息產生誤解或者歧義,這也是“簡約有效”的UI設計中“有效性”的重要組成部分之一。

          3)重要信息重點表達

          UI設計需要做到信息表達準確且層次分明,即重要信息重點表達,次要信息次級表達。這樣設計的目的就是利用UI設計增強重要信息表達和傳遞的“簡約性”和“有效性”,即從信息層面上降低了頁面的復雜度。重點信息重點表達的最基本的方法就是在視覺上讓重要信息和次要信息形成較為明顯的對比,如常見的文本加粗,使用高亮顏色(彩色)等。

          4)清晰正確的邏輯表達

          UI也是功能邏輯的可視化載體,因此UI設計一定要保證產品功能邏輯表達的清晰和準確,不能因為UI設計而導致用戶對功能邏輯的錯誤理解。如賬戶模塊中,賬號密碼的校驗過程 和出錯提示等邏輯必須能夠通過UI清晰正確的表達出來,保證用戶在登錄過程中,能夠通過UI理解這些邏輯,且不會產生任何歧義。

          7. 簡單有效的邏輯設計

          產品功能邏輯設計是產品和用戶交互的直接決定因素,可以說,功能邏輯設計的好壞直接決定了產品體驗的好壞。簡單有效的邏輯設計不僅可以降低功能邏輯的復雜度,還可降低產品的迭代開發的成本和用戶使用成本。設計中,可以從以下幾個方面考慮“簡單有效”的邏輯設計。

          1)在保證邏輯完整性的基礎上,盡量降低功能邏輯的復雜度

          在設計中,保證產品功能邏輯的完整性是基礎的且必要的條件,在此基礎上,再考慮降低功能邏輯的復雜度,不能為了簡約而簡約。

          2)功能邏輯的獨立性

          在功能邏輯設計中,應該盡量保證功能邏輯的獨立性,減少功能邏輯之間的耦合性和依賴性。因為功能邏輯的耦合性和依賴性必然會導致對邏輯本身和用戶產生更多的限制性和要求。此外,功能邏輯之間的耦合性和依賴性不僅會提升產品的復雜度,還會影響產品的健壯性、后續的拓展性以及造成迭代成本的提升。

          3)為用戶設計,轉移邏輯設計的復雜度

          產品功能邏輯的復雜度是可以降低的,但是不可能無限制的降低。當無法降低功能邏輯的復雜度時,可以使用其他方法來降低功能邏輯的“復雜度”,最常見的就是“轉移復雜”,即不改變邏輯的設計,而是改變這些邏輯的表現形式和方式,將邏輯的“復雜度”轉移到不同的功能模塊中或者不同的形式上。例如在線請求數據的異常邏輯有很多種,這些異常對于邏輯設計和產品優化是有很大價值的,但對用戶來說這些異常可能是難以理解或者是沒有價值的,可以將這些異常邏輯進行歸類分組,同一組的異常使用相同的提示設計,如網絡故障相關的異常,都可以提示用戶去檢查手機中的網絡設置,而不用每一中網絡故障的異常都單獨設計一個異常提示。

          4)提供合理的參數值和默認項

          功能邏輯設計中涉及到大量的設置項和參數,為這些設置項和參數提供合理的數值和默認項,可以極大降低的用戶的理解和使用成本。例如在地圖導航軟件中,用戶選擇導航線路時,需要確定起點位置和終點位置,常見的起點位置默認參數就是當前用戶的位置,這種設計邏輯可以滿足絕大部分用戶在絕大部分場景下的導航需求,減少用戶起點位置的輸入。

          5)更少的操作和選擇

          在設計中,任何的操作和選擇對用戶來說都是一種負擔,所以應該避免為用戶設計過多的操作和選擇,較少的操作和選擇就是降低產品功能邏輯的復雜度。如果無法減少功能的操作和選擇,那么應該優化頁面信息層次、操作路徑和具體的頁面布局來使邏輯操作和選擇更加合理,使用成本更低,使用體驗更好。

          6)為絕大部分場景和用戶設計

          邏輯完整性是設計的基本要求,但在實際中經常會碰到低頻場景、小部分用戶群體需求或者大部分用戶群體的低頻需求等“異常條件”,這些都可能對產品的功能邏輯設計帶來影響,但是絕對不能因為這些“異常條件”去更改主體設計方案,即在任何時候,都應該為絕大部分場景和絕大數用戶設計,按照經驗來講,是不可能有滿足100%需求的設計方案。類似的,我們應該更多的考慮產品的正向使用場景,不要讓負向場景過多的影響功能邏輯的設計方案,即這些非正向場景可以為設計提供參考,但不能決定設計方案。

          簡約有效是一個非常普適性的設計原則,其可以為產品和用戶帶來非常多的好處,其具體內涵是非常廣泛的,其中有些內容不僅僅是簡約有效原則獨有的,可能與其他設計原則有著較強的關聯性和交叉性,如“一致的設計語言和風格”,雖然是一致性設計原則的內容,但卻可以讓設計很好的表達出“簡約有效”。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:人人都是產品經理   作者:小乞丐

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          淘寶不“淘”了 | 淘寶的內容設計

          資深UI設計者

          1. 淘寶為什么不淘了


          1.1  “淘” 歷史


          淘寶成立于2003年5月,當時最早的slogan是:“淘你喜歡”,這句話的主體是以平臺角度出發,對用戶說的,意思是讓用戶來平臺選購商品。


          隨后2005年,slogan變成了“淘我喜歡”,主體從平臺轉變成了用戶,意思是讓用戶自主選擇來平臺購物。


          在最近的2021年,淘寶的slogan變為了“太好逛了吧”。代表性的是淘寶app打開的啟動圖從玲瑯滿目的商品圖,換成了新的slogan:


          圖:淘寶啟動頁變化


          圖:淘寶的slogan變化




          1.2 需求的類型


          淘,又有“篩選”的意思,而篩選行為是要對某具體目標進行的,不可能憑空篩選,這個目標產生的過程,就是我們常說的“用戶需求”。


          “用戶需求”的產生一般分為兩種:有目的的需求和無目的的需求。


          有目的的需求:需求產生的過程有戶外廣告、朋友推薦等。以這種方式產生的需求,用戶會帶著明確目標,這時用戶直接打開軟件,通過搜索,直接縮小商品范圍,更快觸達目標商品,在這種場景下,用戶明顯沒有“逛”的心情。


          無目的的需求:當用戶在沒有明確目標的情況下打開軟件時,用戶購物意向都是比較模糊的,沒有明確選擇區間。此時,如何讓用戶產生購買欲望,是產品設計時必須要重點思考的。



          圖:需求產生的類型



          我們都知道,淘寶最開始的定位是“淘”,主打的是以導購型社區為目標,主要解決“用戶來平臺需要買什么”的問題,也就是有目的的消費需求。


          針對這類用戶,最簡單的思路就是“讓用戶買到想要的東西”,基于這一思路,淘寶推出了“千人千面”的算法機制。


          隨著淘寶算法越來越精準,用戶購買越來越效率,導致很多用戶對于淘寶的使用心智固定在了購物平臺,而不是內容消費平臺。


          但是算法是有一定的滯后性的,只有在用戶產生數據后才能夠進行精準推薦。(這個數據可以是在淘寶平臺產生的,也可以是在其他平臺產生的,比如說通過搜狗輸入法輸入了某個商品名)


          所以單純的靠精準的算法推薦,并不能解決用戶的潛在需求。



          圖:不同需求類型的解決方案




          1.3  商家的流量成本


          在淘寶店鋪的運營中,有一項重要的指標叫UV價值,指的是平均每個客戶在店鋪的銷售額,數字越高說明訪客的轉化率越高,轉化高就代表最終的GMV會高。


          而根據淘寶的數據統計,店鋪粉絲級別越高,對店鋪的粘性越強,UV價值也就越高。最終反映在淘寶數據上就是GMV高,既利于平臺,也利于商家。


          粉絲的積累需要流量,而淘寶店鋪的流量來源一般分為:淘寶站內、淘寶站外,其中有包括淘寶推廣、搜索競價、淘寶客、直通車等方式,但這些流量通常是不穩定的,免費流量自不用說,付費流量的投入成本也對店鋪的資金有一定要求。


          所以店鋪需要把這些吸引的流量,轉化成店鋪的粉絲。


          舉個例子,在很多電商平臺上,店鋪會有自己的引流款,這些商品不是為了毛利。只是起到為店鋪引流的作用。


          因為對于平臺的店鋪來說,持續不斷且穩定的流量增長,不僅可以推動銷售的穩定增長,也利于長期的發展方向。



          圖:淘寶流量來源




          2. 淘寶的基礎內容建設


          2.1  內容整合成社區和去中心化


          早在2015年,當時淘寶內部孵化淘寶頭條,分享優質的消費類資訊內容,當時淘頭條的MAU(月活躍用戶)過億。但隨著視頻內容的崛起,圖文形式逐漸走下坡路,淘寶看準了直播帶貨的賽道,開始逐漸布局淘寶直播的內容形式。期間也相繼加入了微淘、有好貨、買家秀、好物點評團等內容形式。


          但是這些內容一直分散在淘寶各個功能模塊中,沒有形成一個整體的社區化。



          圖:淘寶的內容矩陣


          其中最成功的應該就屬淘寶直播了,根據淘寶直播2021年度報告:2020年淘寶直播帶來的GMV超過人民幣4000億元。


          但是,直播的內容形式注定是以主播自上而下中心化的,用戶是跟著主播走的,一旦主播下播以后,這些觀眾也會失去購買目標。


          并且由于直播屬于一對多的形式,越大的主播,觀眾越多,這時候主播和觀眾的互動率是很低的,久而久之,用戶的互動積極性也會受打壓。



          圖:以主播為中心化的淘寶直播


          除了淘寶直播,近年來另一個改動比較大的應該就是微淘的出現了,在逛逛出現之前,一直占據底部欄的二號位,它的內容形式主要以店鋪上新、直播、福利為主。


          這也是淘寶在店鋪私域流量運營上做的一次嘗試,目的是為了讓用戶更容易和店鋪產生連接。但是實際上,由于微淘的內容形式之間關聯性不大,業務場景混亂,一些剛起步的商家也沒有資源拓展多業務場景,導致內容質量參差不齊,影響轉化。


          淘寶做微淘中做內容的目的是為了讓用戶有東西可以逛,但是逛內容就代表著用戶購買需求不明確,這又與營銷場景相沖突(營銷場景是為了讓用戶快速下單完成購買),所以微淘也一直被詬病轉化率低。



          圖:微淘主要的三個問題




          2.2  信息流時代


          后來在2020年年底的時候,淘寶迎來了另一個比較大的改版,猜你喜歡變成了縱向的信息流,點擊猜你喜歡進入的是一個流量的中轉站。比如說點擊一件衣服,下面全是衣服的推薦。


          新版猜你喜歡的特點很明顯,犧牲轉化率,增加用戶使用時長。在實際點擊進入信息流中,用戶總感覺下面有新的內容,這時候用戶的心態普遍是浮躁的,會使用很短,甚至一兩秒的時間決定是否深入了解產品。如果不喜歡,就會滑到下一個產品,無形中增加了用戶在平臺的停留時長。


          據淘寶官方數據表示,此次猜你喜歡的大改版,淘寶用戶的點擊率和用戶時長都提升了20%。



          圖:猜你喜歡改版,通過犧牲轉化來提高使用時長





          2.3  “逛逛”來了


          逛逛是以UGC內容形式為主的種草平臺,顧名思義,就是消費者在無聊的時候,可以到處逛逛。


          如果說信息流是縱向的內容推薦,那么逛逛就是通過大數據,橫向的推薦內容,最終向商品引流。豐富的內容為其他消費者帶來沉浸式購物體驗,類比線下商圈,就是逛著逛著就把東西買了。





          3. 淘寶沒有種草經濟


          3.1  從AISAS模式到SICAS模式


          AISAS模型是一種用戶決策分析模型,由電通公司(日本第一大廣告公司)提出,是消費者行為學領域很成熟的理論模型之一。


          AISAS模式將消費者從產生需求到最終完成購買的路徑分成了五個階段,既Attention(注意) - Interest(興趣) - Search(搜索) - Action(行動) - Share(分享)。其中消費者在注意商品并產生興趣之后的信息搜集(Search),以及產生購買行動之后的信息分享(Share),是當下互聯網消費時代尤其重要的兩個階段。


          搜索就是當用戶對某商品產生興趣之后,消費者會通過線上或者線下渠道來收集相關產品的信息,比如說評價、打分等。分享是在購買路徑完成后,用戶自發向身邊人推薦商品的階段,也就是口碑裂變,當然也有可能變成商品吐槽大會。


          但是,在前文也提到了,搜索是在有明確對某個商品產生興趣之后才會產生的動作,整個消費路徑是單向進程的,缺少信息的互動與交換,用戶很難有效辨別信息真偽,用戶與商家依然存在信任問題,最終的購買壁壘依然存在。



          圖:AISAS消費模型的流程


          隨后,DCCI(互聯網數據中心)在AISAS的基礎上,提出了新的SICAS行為消費模型:


          既 Sense(品牌與用戶相互感知) - Interest&Interactive(產生興趣并形成互動) -  Connect&Communicate(建立聯系并交互溝通) -  Action(行動) - Share(分享)。


          Sense,感知:品牌(商家) - 用戶相互感知,通過多觸點,在商家個用戶之間建立感知,對用戶來說,關注、分享、訂閱、推送等,都是有效的感知行為,而商家要做的,就是想辦法,通過什么樣的方式或內容,讓用戶有效使用他們的感知行為(分享、點贊、訂閱等行為)。


          Interest&Interactive,產生興趣和互動。在產生興趣上,隨著用戶對傳統的廣告曝光和廣告產生的印象的敏感度在降低,理解并響應用戶的需求正在成為關鍵。站在用戶的角度,觀察用戶真正想要的內容,衡量內容的指標不再是廣告的傳播率、曝光率,而是變成了點擊率、點贊數、好評度等。


          Connect&Communication,建立連接和產生溝通。在用戶產生興趣之后,通過平臺提供的服務:客服,問大家,好評團等形式,完成用戶信任的積累,幫助用戶完成購買決策。


          剩下的Action(購買行動)和Share(體驗分享)與AISAS模式一樣,就不展開說了。



          圖:SICAS消費模型的流程,以及和AISAS消費模型的區別


          綜上,SICAS模式前三點的核心觀點是建立聯系,也就是互動,這也與時下流行的種草經濟不謀而合。





          3.2  基于社交的種草經濟


          種草行為本質上是人與人之間的一種互動關系,互動天然的容易產生強關系鏈,而強關系也意味著情感聯結和信任,最終會形成社群關系。隨著越來越多擁有相同消費偏好的用戶聚攏,用戶消費習慣逐漸圈層化,在各垂直的消費圈層中得到身份認同感。


          在這種社群氛圍的烘托下,用戶更容易表現出高表達欲和參與度,既用戶不僅是內容的消費者,同時也會發展為內容的生產者。



          圖:逛逛想打造的種草生態



          綜上結合淘寶的問題以及消費模式的轉變,我們可以得出淘寶近期瘋狂改版的思路:


          圖:淘寶改版思路



          4. 讓人逛下去的產品設


          在了解上述淘寶自身的問題和新消費類型帶來的沖擊后,可以總結淘寶最近經常改版的戰略可以分為兩個方向:轉化的歸轉化,內容的歸內容。



          4.1 微淘升級為訂閱


          淘寶第一個改版是將原來的微淘升級為了訂閱,并且放在首頁上的tab,與推薦并列。此次改版,最大的改變就是拆分了店鋪運營的內容,讓不擅長做內容的商家可以專注自家的店鋪運營。



          圖:首頁專注商品轉化,逛逛專注內容消費


          新版訂閱的精選一欄中:包括上新、買家、評測等,這些內容一起構成商家和粉絲的互動模式,吸引新客快速轉粉,同時也增加了老客戶的黏性。


          在之前微淘的版本,用戶需要點擊微淘-點擊店鋪-點擊訂閱,升級后的訂閱路徑變成了左滑進入訂閱頁面-直接訂閱店鋪。點擊直播可以直接進入直播間

          更短的觸達路徑加上私域流量的運營,優化之前微淘轉化率低的問題。



          圖:路徑圖,直接進入直播間,直接訂閱店鋪



          圖:提高直播入口權重




          4.2 “買家秀”社區升級成為“逛逛”


          另一個重要改版是“買家秀”社區升級成為“逛逛”,為了弱化逛逛的購物屬性,強化社區氛圍,逛逛在產品的商業化設計上十分克制,主要圍繞引導用戶進行內容消費和互動為目的進行設計。


          在內容分發形式上,分為了以平臺推薦為主的“發現流”和以社交關系鏈主導的“關注流”,更加注重內容垂直和精細化。



          圖:逛逛的內容分類


          逛逛的發現模塊與小紅書類似,都屬于種草型內容社區。內容主要以穿搭、彩妝等淘寶擅長的領域為主。


          頁面的布局形式和首頁的商品流一樣,以雙列信息流呈現,和單列相比,一方面,給用戶提供多樣化的選擇,承載不同的內容形式(短視頻、圖文),延長用戶在平臺的停留時長,同時也為其他內容引流,模擬更真實的線下“逛街”體驗。


          另一方面,和首頁注重轉化率的算法機制不同,影響發現流推薦算法的因素除了本身的內容質量,還會受到用戶瀏覽行為的影響,比如瀏覽內容時產生的關注、收藏、點贊、評論等互動行為。



          圖:表現內容互動率的互動指標


          逛逛相比首頁推薦,去中心化的機制也更加明顯,舉例來說,小米官方店的號,粉絲量達到了千萬級,但是內容的互動率很低,點贊評論甚至不超過個位數。


          個人認為是因為品牌天然的自帶營銷屬性,用戶在看到品牌賬號時,很容易形成品牌注冊賬號是為了賣產品給我的刻板印象。


          這也反映了逛逛的流量重點落在消費者的內容上,以消費者視角為突破口,擺脫和商品相關的品牌屬性,注重普通用戶對商品的真實評價,而不是圍繞IP賬號產生的內容消費。



          圖:小米賬號和個人賬號互動率對比


          在用戶路徑的引導上,發現頁并不支持點擊頭像進入用戶主頁,只能先點擊進入內容詳情頁然后才可以進行關注等操作,先看內容,再關注人。



          圖:更關注內容轉化率


          另外一個人關注流的動態則加強調社交關系的轉化,因為是經過用戶主動“關注”過后篩選出來的內容,是內容生產者和內容消費者相互選擇的關系,所以在產品設計上以單列大圖為展現形式,幫助用戶消費內容。為了防止讓用戶感受到廣告的營銷感,產品設計上特地強調了分享、點贊、收藏、評論等按鈕,弱化商品鏈接。


          和其他的社區一樣,關注信息流中也會推薦一些“你可能感興趣的人”,但不同的是,用戶無法直接關注推薦的博主,需要先“查看TA”,進入博主的個人頁后才可以進行關注操作,這樣的目的主要是為了讓用戶了解達人的領域內容之后,再決定是否關注,這樣的關注更加有效,粘性更強。



          圖:“關注流”視覺設計的思路


          “逛逛”的內容形式很好地彌補了淘寶缺乏用戶導購的問題(俗稱種草),依托KOL產出的優質內容,與消費者產生情感上的價值鏈接,創造出用戶的潛在需求。




          5. 逛逛和小紅書的產品設計區別


          這次改版之后,很多人說這是小紅書。關注、發現、垂直分類欄,都和小紅書很相似。



          5.1 內容起家和電商起家



          淘寶和小紅書對內容的分發模式是不同,小紅書默認分類欄處于收起狀態,只有主動下拉的時候太會出現,由此可以看出小紅書對自己的內容推薦還是比較有信心的,由于一開始就是做內容起家,所以對自身平臺用戶的喜好是有所了解的。


          但是淘寶是一個電商起家的平臺,在內容方面,缺乏對用戶的偏好判斷,所以逛逛的導航欄下方,會加入了“官方話題欄目”和“官方出品的內容”,利用精選話題引導社區內容的方向,一定程度上也可以通過話題數據了解平臺用戶的偏好。



          圖:小紅書比淘寶更懂用戶喜歡什么內容



          5.2 內容導向不同


          小紅書等平臺不光有購物種草,還有學習、音樂、科普等內容也相對成熟。和淘寶轉型社區內容一樣,小紅書也在進行圖文、視頻向直播內容擴展的戰略方向。所以我們會發現,在小紅書的編輯內容上,視頻和直播是強露出的,且不支持位置更換。


          再來看逛逛的內容,以穿搭、彩妝為首的消費品內容,這些都是淘寶擅長的領域,容易產出優質內容,反過來說,這些內容最終也都是可以在淘寶上可以消費到的,最終還是以平臺商品轉化為目的。



          圖:內容形式對平臺戰略的影響




          5.3  小紅書互動率更高,淘寶內容消費效率更高


          小紅書在內容消費形式上,比逛逛更加注重互動:首頁瀑布流點擊進入二級的內容頁后,可以直觀的看到博主全部的文本簡介,以及下方的用戶評論內容,用戶消費的不光是圖文本身的內容,也是其他用戶評論產生的內容,更容易產生社交關系鏈。


          逛逛則更注重內容本身的消費效率:產品設計上使用沉浸式的下滑體驗,用戶點擊產品圖后,進入的是同系列產品的瀑布流,如果想要查看評論的話,需要點擊評論icon進行二次跳轉,此時用戶會一直專注于內容的消費,容易忽略其他用戶評價等內容。



          圖:提高互動率的產品設計



           6. 寫在最后的一些思考


          此次淘寶做內容社區的優勢之處在于,淘寶將社交關系融入到了商品的消費鏈路中,消費者通過商品體驗、測評、種草等方式,和平臺產生互動,建立聯系。


          而淘寶最不缺的就是商品,并且擁有8億多的消費者,和其他平臺相比,更容易產生垂直領域的優質內容和專業的KOL,但是要想經營一個優質社群,除了需要一批優質的內容創造者,還需要考慮后續涌現的用戶是否會對現有社群模式產生沖擊。(比如知乎開放用戶注冊后,導致內容注水的現象)


          因為淘寶本身相當于一個巨型供貨方,大大縮短了帶貨變現的路徑和難度,不同于小紅書這類平臺,它們最開始是沒有帶貨模式的,常常需要通過接推廣給其他商品引流來變現。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:抓馬橋分橋 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          vue 封裝dialog_Vue 彈出框組件的完整封裝過程

          前端達人

          引言

          因為項目搬磚需要,筆者從 2019 年 11 月份開始學習 Vue.js,在完整地敲了一遍 vue-admin 框架中的用戶管理 Demo 、斷點跟蹤前端調用流程、并摸清楚了 Vue.js 的開發套路后,總算可以出師了。

          寫作本文有兩個原因,一是對這段時間學習 Vue.js 的過程做一個總結;另外就是完成自己 2019 下半年在 GitChat 的寫作目標,8 月份曾在一個知識星球公布了下半年寫兩篇 Chat 的目標,遲遲沒有完成。

          以上就是本文產生的背景了,再說回到 Vue.js。筆者年初也弄了一陣兒 Angular.js,雖然都是前端框架,感覺 Vue.js 入門更簡單一些,其數據驅動的設計理念跟 Java 面向對象編程的思維模式相似,所以學起來更輕松。

          之所以選擇彈框組件這個話題,是因為筆者參與的新產品中,很多地方都涉及到彈出頁面,所以仔細研究了一下彈框組件的封裝原理,解決了彈出頁面封裝的技術問題后,筆者這半路前端也能夠應付一陣子開發工作了!

          環境準備

          Vue 開發相關的工具及其關系回顧,這里先回憶一下跟 Vue 項目開發有關的概念:

          名詞

          解釋

          作用

          Vue.js

          一個前端框架

          用于構建用戶界面的漸進式框架

          *.vue 文件

          一種文件類型

          以類 HTML 語法描述一個 Vue 組件

          vue-cli

          Vue 官方腳手架

          對單個 *.vue 文件進行快速原型開發

          eslint

          前端代碼檢查工具

          編寫高質量前端代碼的利器,類似 findbugs

          webpack

          模塊打包器

          類似 maven,將前端項目打包成靜態資源文件

          IDEA Vue.js 插件

          IDEA 插件

          使 IDEA 能夠支持 Vue 項目開發

          我們在使用 IDEA 開發 Vue 項目時,只需要安裝 Vue.js 插件就可以了,不需要使用 vue-cli 腳手架;引入 ESLint 是為了編寫高質量的前端代碼,也可以不用,而且 IDEA 的快速修正功能很強大,不需要完全了解 ESLint 規范;至于打包工具 webpack,初學完全可以先忽略它。

          GitHub 上有一個 Vue 的半成品項目 vueAdmin-template,可以基于它來學習或者二次開發,本文也是在它基礎上完成一個彈框組件學習案例的。這里使用 IDEA 作為開發工具,相關準備工作如下:

          IDEA 安裝 Vue.js 插件;

          IDEA 安裝 eslint 插件;

          IDEA 添加 .vue 文件模板;

          IDEA 導入 vueAdmin-template,項目地址。

          常見的幾種彈出框類型

          Web 開發過程中常用的彈框,歸納起來,主要有三類:

          消息提示框,即 alert,不需要進行操作;

          操作確認框,即 confirm,包含“確定”和“取消”按鈕;

          頁面彈出框,即 openwindow,彈出一個完整的頁面,用戶輸入信息后,通過“確定”或“取消”提交信息。

          第一、二類彈出框,ElementUI 都有封裝,拿來用即可;第三類彈出框,可以結合 el-dialog 組件完成。 在筆者參與的項目中,彈出頁面的特點在于,父組件彈出子組件后,用戶需要在彈出頁面配置信息、點擊“確定”按鈕提交。



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          日歷

          鏈接

          個人資料

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

          存檔

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