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

          首頁

          關于B端與C端產品差異與思考

          ui設計分享達人


          前言


          對于設計師來說,在日常的互聯網設計工作中面對的主要是兩類產品設計類型,一類是C端(Consumer)指的是消費者、個人用戶;顧名思義就是面向個人用戶提供服務的產品,是直接服務于用戶的。另一類是B端(Business)指的是企業或商家;顧名思義就是面向商家、企業級、業務部門提供的服務產品,是間接服務于用戶的。現在互聯網進入下半場,C端產品逐漸靠近天花板,紅利逐漸消退,大部分的企業開始轉向B端。

          對于設計師來說我們也要對自己有一個清晰的定位和轉換,如何才能在業務的轉換下,跟上企業的步伐,做好角色的轉變和切入。


          當然,從C端快速切換到B端設計或者從B端快速切換到C端都不是一件容易的事情,因為B端和C端存在比較大的一些差異。其商業屬性,目標用戶,使用場景,設計表達,產品訴求,用戶體驗,設備載體等都是不同的。B端現對于C端的業務而言更為復雜,那么這次就聊一聊B端設計師從哪些方面發掘自身設計價值,更好的為產品服務,提升產品價值。


          B端產品是什么


          在我們開始接觸B端產品時,先要對B端產品有一個基本的概念,什么是B端產品?

          常見的有OA系統,ERP,CRM,SAAS等(這里就不一一贅述,大家可以自行百度查看一下基本概念)

          B端產品是幫助企業或者部門協同辦公,解決一條業務鏈問題,將線下操作通過系統化,流程化轉移到線上,提高辦公效率,節約成本,高效完成任務從而提高企業的效率,減低內部不必要的消耗。

          B端產品行業與行業之間的跨越度很大,因為不同的業務屬性所要的產品訴求是不同的。但我們作為一個設計師,可能會遇到各種復雜的業務場景,復雜枯燥的行業術語也可能都不精通,就算學習了也不一定能非常懂,而且行業屬性較重,我們大概率不是用戶,業務場景還原成本高,甚至沒有條件還原。所以在做設計的時候還是會懵。往往我們需要深入用戶調研,盡可能地接近真實業務場景,與用戶共同創造,基于業務底層邏輯提煉出強整合性、高兼容性、高拓展性的系統規范。B端的產品設計也是一個不小的挑戰,那我們如何打破這個挑戰更快速的接觸,適應B端設計呢?


          困難會有,辦法也會有的


          B 端產品相對而言,場景、功能、業務流程、信息架構要比 C 端更復雜,面對的異常情況也比較多,所以 B 端在設計風格上盡量做到簡潔。B 端產品實用性大于美觀性,在每一個功能的設計都需要你去思考很多方面:用戶易用、信息層級、未來擴展,你都要做出取舍,而對于每個模塊都需要你思考、結合用戶場景。

          面對B端產品我們應該如何分析和處理呢?

          1.了解業務和產品

          B 端的業務邏輯復雜,子業務多樣化,產品的規則,流程,訴求可能隨時就會調整,設計師應當基于B端的產品業務特性,市場與用戶的需求,在看似雜亂無章的業務中尋找共性,梳理模塊進行合理的整理和設計。

          在做B端業務前,我們要對我們即將要處理的業務有一個基本的理解和認知,不同的部門員工因為職業屬性,使用產品的訴求也是不同的,所以相對應的設計方案流程也是不同的,這就需要我們充分理解業務流程,有針對性的梳理

          例如:我們要做一個考勤系統,我們需要清楚公司的考勤制度,事假/病假/年假/調休等如何處理,如何提交,如何審批,月底匯算,季度匯算等問題,前期了解的流程越多越清晰,就可以幫助我們規避很多不必要的問題。

          要將功能流程歸類梳理整合,把雜亂的功能整理清楚,提高用戶效能。


          2.提高效率

          用戶的時間就是金錢,這對于 B 端商家角色中尤為重要,大量訂單的處理、表格化的導入和導出、批量管理和網站運營等方面,對于效率有著極高的要求,商家通過可視化界面來完成某項任務。

          在這其中,影響最大的莫過于交互方式了,相信各位一定用過各大銀行的網站,頁面的導航關聯性弱、結構不合理、提示不明確、交互流程過長,甚至有的網站光是登錄,就得大費周章。

          如何提高效率,我認為主要從以下幾個方面著手:

          1. 提高易用性

          如果你的產品,讓人看一眼就能上手,那么說明是非常友好的設計。易用性不一定意味著簡單和低智,依據復雜守恒定理(泰勒斯定理),每個應用程序都有自己內在的、無法簡化的復雜度。

          所以,提高易用性意味著要設計合理的交互,易用性分為對新手(小白用戶)友好和對老用戶(專家用戶)友好,包括數量最大的中間用戶。

          如果你的界面是僅僅對于新手友好,那么可能完成的任務都是簡單而輕松的。但是對于老用戶,他需要更復雜的功能來處理大量龐雜的任務;因此在設計的時候,既要提供傻瓜式的操作方式,也要對專家用戶提供提高效率的工具。


          1. 智能化

          此處的智能化既包括通過大數據或者人工智能自動將操作步驟變得簡潔高效,也包括諸如一些字段輸入、自動定位、圖片識別、OCR 等方式來使用戶的效率得以提升的功能。

          以前的用戶要摳圖可能會在 ps 中操作好幾個步驟才能完成,但是隨著機器學習技術的發展,ps 已經可以更加智能的摳圖。當然,還包括其他功能的智能化。

          在 B 端 SaaS 領域,智能化也是一個重要的趨勢,針對不同的商家所面臨的不同的行業領域,我們或許可以提供更加全面且友好的服務。


          3.提高通用性

          提高系統內的一致性,減少用戶認知成本。在同一平臺內的頁面,樣式和交互上要盡量保持一致性,不要有的地方是總金額,有的地方是總價格,這會讓用戶犯迷糊。提高通用性,也意味著你需要關注并熟悉系統內不同功能之間的關聯性,盡量做到統一處理。


          提高B端品質的設計方法


          B端產品多在工作中需要長時間沉浸式使用,為幫助用戶集中注意力、高效完成任務,設計風格多為冷靜、克制、干凈、簡潔,相較于視覺,更多的是注重如何讓用戶理解產品邏輯。如何通過設計的處理更好的提升產品的效率,留住用戶,讓用戶有更流程的產品體驗。


          1.內容豐富網站,提高搜索能力

          在我們進入一個產品內容比較多的網站下,如何才可以讓用戶快速在網站中匹配到自己需求,解決自己的問題呢?最快速,便捷的處理方式就是搜索框輸入關鍵字,通過用戶的關鍵詞在系統中為用戶提供最匹配,最合適的內容,縮短用戶尋找產品的時間,提升用戶的使用效率,讓用戶有更流暢的體驗。


          設計要點:

          提高搜索框在網站中的曝光率

          提升模糊搜索的正確率

          盡量不要出現搜索結果為空


          2.提示信息保持簡短直白

          文案提醒要簡練,讓用戶掃一眼就知道要表達什么意思,不要讓用戶停下時間去思考,琢磨文字提示的信息,減少干擾信息,比如在處理input時加入默認提示,讓表單更清晰,表意更明確;有字數限制時,要明確可輸入字數和已輸入字數,這樣讓用戶有一個預期,不會出現輸著輸著沒法輸入新的內容。


          設計要點:

          文字簡短,清晰,通俗易懂

          文案風格統一

          3.及時糾正用戶錯誤,不要僅靠色彩提示

          用戶使用產品時,用戶與產品之間形成一種“溝通”,良好的反饋機制能夠大大提升這種“溝通”體驗。用戶的每一步操作都應當得到相應的反饋,尤其是在錯誤時要及時糾正,以便用戶更準確的操作下一步。但是這種操作不應該只是錯誤色彩提示。比如當我們在輸入表單時,輸入錯誤系統并沒有給我們任何提示,只是將輸入框變為錯誤操作的顏色,這樣會讓用戶無法流暢完成操作內容。


          設計要點:

          及時糾正用戶錯誤,減少用戶焦慮

          將用戶的錯誤操作清晰明了的表述出來


          4.空頁面狀態給用戶提示操作

          空狀態作用和文章中“承上啟下”的文字作用是一樣的,空頁面可以幫助我們理解上下文,讓用戶知道即將要發生什么,才會覺得舒服。最好的方式就是“展示和引導”:通過清晰的文字告知用戶發生了什么,并且通過按鈕/快速鏈接有效的引導用戶行為,避免用戶陷入死胡同,不知如何操作下一步。


          設計要點:

          空界面可以增加一些趣味性,個性化或者打造品牌感(IP形象/品牌logo衍生)

          空界面狀態保持簡潔,直觀易懂

          引導用戶操作


          5.使用用戶熟悉的icon便于識別

          當icon被用于設計時,最好使用用戶熟悉和容易識別的icon,以使用戶能夠迅速地了解其用途。如果icon無法傳達正確的意思,就會變成視覺噪音,讓使用者迷惑,成為使用者的認知障礙。


          設計要點:

          icon要易識別,正確傳達表示含義

          同一層級的icon,要統一標準,設計一致


          6.內容真實性

          B端的設計往往會有很多種情況,我們在做名稱/數據的設計時盡量模擬真實的上線數據,如果涉及敏感數據可以自己改一下,但是盡量要采用字段長度,這樣可以在設計中無限接近上線后的產品,減少后期因為數據展示出現的UI調整。


          設計要點:

          在設計階段無限接近真實上線環境

          將上線后可能出現的展示樣式都要制作出來,避免后期的返工


          7.確保最重要的功能優先靠前

          確定功能操作的優先級,將一些用戶關心的數據統計/報表展示一級頁面,使用頻率高的功能優先靠前展現出來,輕量級操作的信息入口盡量收起,不要展示給用戶,以免造成不必要的困擾,增加用戶學習成本。


          設計要點:

          確定功能優先級

          高頻次入口優先展示,低頻次折疊隱藏


          8.告訴用戶某個操作可能會帶來什么結果

          B端產品邏輯嚴密和專業性較高,用戶在使用時經常不可避免的操作失誤,尤其是涉及到刪除數據或者金額方面的操作,我們需要格外的謹慎處理。在用戶犯錯時,我們要及時的提示用戶,這樣的操作會帶來什么樣的后果,提示的文案要注意語氣,不要將責任全部推在用戶身上,禮貌對待用戶。


          設計要點:

          要及時反饋用戶后果,避免因為不當操作造成傷害

          頁面刪除盡量給二次確定,避免用戶誤點,做個人保護

          盡量有垃圾箱回收,方便用戶后悔


          9.提升加載過程中體驗

          避免加載中用戶等待焦慮,我們可以使用分布式的加載方式預先加載頁面框架然后加載內容,在內容未出現前通過占位符的方式展示,優先加載占用網絡資源較少的元素,減少用戶的等待心理,占位符的方式可以讓用戶提前了解到頁面整體的展示樣式效果,給用戶加載好的錯覺。

          在加載過程中我們可以通過這幾個視覺表達方式來加載,通過顯示品牌元素加載;色塊加載;界面布局;灰色圖顯示等。


          設計要點:

          避免空白頁加載等待,增加用戶焦慮

          選擇最符合產品調性的加載


          10.可讀性優化,簡化界面

          我們要做到減輕界面視覺呈現,但這并不是意味著減少頁面功能。我們要幫助用戶簡化認知負擔,增加界面可讀性,降低用戶閱讀瀏覽復雜的大塊內容時的心理壓力和抵觸感。將一些復雜的表單內容通過數據可視化的方式讓用戶更快,更便捷的查看數據,從而對業務有更直觀的理解。


          設計要點:

          數據可視化是一個不錯的選擇

          避免不必要的元素信息

          保證可讀性

          11.進度條增加清晰信息引導

          一個優秀的進度條可以讓用戶減少很多的焦慮,并且讓過程和結果步驟清晰可見,進度條的目的在于通過向用戶反饋當前響應進度來讓用戶在等待中放松下來,在用戶等待程序處理事情時,不應該把用戶仍在一旁傻傻的猜想程序什么時候結束,這個步驟還有多長時間。正是這樣的情景下,進度條剛好可以構建用戶與系統之間溝通的橋梁。面對長時間的幾十秒的操作的進度條不應該只是一個進度模糊顯示,更好的處理是應該加入進步完成的百分比,清晰明了告訴用戶系統完成了多少工作量還剩多少。


          設計要點:

          進度條可以打消用戶對程序等待響應的疑惑

          針對響應時間稍長的進度加入顯示百分比


          12.設計驗收

          開發完成后設計師要開始設計走查,因為開發不可能百分之一百的還原設計圖,所以最后的設計把控是非常重要的,即使是開發按照設計圖還原界面但是可能代碼實現后還是有些問題,或者是不同尺寸的屏幕適配,或者是加入真實數據后一些展示問題,又或者是頁面的跳轉/返回以及一些彈窗提示等都需要最后的走查確定;不僅僅是視覺頁面驗收,交互方面還要考慮去驗證思考最符合用戶操作體驗的流程。

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

          文章來源:站酷   作者:許小鵬

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

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

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

          10個讓用戶一眼就愛上的設計心理學知識

          ui設計分享達人

          一個優秀的設計不僅要解決正確的問題,同時也是給用戶創造積極的情感。在過去,實體產品可以通過人類的五感來創造情感體驗,但對于如今的數字化產品來說,這似乎很難達到,因為只是在屏幕上進行枯燥的交互來獲取服務。


          所以,數字化產品設計師們需要更深入的理解每種類型的情感,以及創造它們的心理學原則。


          根據唐.諾曼(Don Norman)的研究,人們對一個物體產生情感有三個層次:本能、行為和反思。


          undefined

          • 本能層: “用戶想要的感覺是什么”

          • 行為層: “用戶想要做什么”

          • 反思層: “用戶想成為什么樣的人”


          在第一層,用戶將通過視覺和與產品的交互設計中產生情緒。因此,這是UI設計師擅長發揮的地方。除了美學和基本的平面設計原則外,下面是我在工作中經常應用到設計中的心理學原則。


          格式塔原理


          相似律

          人類的眼睛傾向于將相似的元素連接成一個組,而大腦會認為這些元素都有相同的目的。 


          undefined


          因此,在設計具有相同功能和內容的界面元素時,就應該要保持一致性。(彩云注:這也是為什么要保持一致性的理論解釋)


          應用場景: 導航、控件、卡片、banner、內容、分頁


          連續律

          人眼會將連續的元素視為一組。這一定律與對稱性和相似性非常相關,通過在一個序列上設計相似和重復的元素,我們可以將用戶的視線引導到我們想要的方向,它能使得閱讀信息更加連貫和清晰。

           

          undefined


          一點點的切割是在暗示用戶,這里還有更多的內容等待你去查看。


          應用場景: 菜單、列表、排序、輪播、服務進度


          封閉律

          當看到一幅不完整的圖像時,大腦會依賴之前的經驗進行填充。 


          undefined


          這是圖形和logo設計中常用的規則,但是在產品設計中,我們也經常把它用在圖標和Loading設計中。


          應用: 圖標、loading、數據可視化


          相近律

          這是UI設計中的一個基本規則,因為人眼會將任何相鄰元素視為一個組。 


          undefined


          在設計的時候,我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內容組,然后使用小空間來分隔大內容組中的小內容組。


          應用場景: 導航、控件、卡片、banner、內容、分頁


          對稱律

          我們的大腦喜歡看到對稱和平衡的東西。它是所有設計領域中使用最頻繁、最安全的法則。它幫助我們創造一種穩定和秩序的感覺。 


          undefined


          當設計需要簡單和諧可視化的產品時,我經常使用對稱律。當用戶需要關注重要的事情時,它也能讓他們感到更舒服。缺點是,如果過度使用,產品會變得乏味和單調。通常,我用標題或CTA按鈕來更好地強調和號召行動,打破畫面的單調格局。(彩云注:CTA是call to action的縮寫,中文通常翻譯為行為號召??梢岳斫鉃橐龑в脩酎c擊的行為都算是行為號召)


          應用場景:控件,banner,強調內容,產品顯示,清單,導航。


          背景分割

          這個定律是關于人眼傾向于注意脫離背景或組合的事物。 


          undefined


          我使用這個規則引導用戶的眼睛看到重要信息。它通常是一個卡片設計與一個輕投影在背景之上的層。此外,構建整體也是應用這一規則的一種方式。


          應用場景:卡片、內容、列表、服務、摘要


          共同命運法則

          在同一方向上移動的元素被認為比固定的元素或在另一個方向上移動的元素更相關。這個規則應用幫助我們建立組和狀態之間的關系。 


          undefined


          在制作動畫時,我經常更明確地使用這個規則。然而,我們仍然可以適用于許多不同的因素。


          應用場景:導航/下拉菜單,折疊,手風琴,工具提示,產品滑塊,視差滾動和指示器。


          2. 焦點原則


          當我們看東西時,我們的眼睛傾向于首先關注最突出的元素。理解這種行為將幫助我們在設計中創建一個“錨點”,從而推動用戶查看我們的場景之后的內容。


          undefined

          應用場景:內容、落地頁、價格、產品頁、banner 


          3. 雷斯多夫效應


          (彩云注:維基百科解釋為指個人對學習材料或所見所聞的資訊,容易記住最特殊的部分的現象。例如:有一些參考書將重要的資料,以不同顏色或特殊的字體標示出來,就是利用雷斯多夫效應來加深讀者的印象。)


          這也被稱為隔離效應,它表明人們傾向于注意并記住與其他部分不同的部分。這條規則很容易與焦點定律混淆。不同的是,應用此規則的元素通常是獨立的,沒有為用戶導航更多信息的額外功能。 


          undefined

          應用場景:定價表、促銷banner、不同會員介紹 


          4. 本能反應


          基于現實世界打造的視覺體驗。比如,當我們看一個視頻,每個高潮笑話時都有旁白跟著一起笑時,我們會更容易發笑(彩云注:想想《快樂大本營》)。用戶會喜歡我們的設計,如果它讓他們感覺良好和舒適。


          (彩云注:這個理論的意思是說盡可能讓用戶產生沉浸感,把產品用到真實的環境上,比如大家平時使用的手機樣機,把設計的界面放到這些樣機中就能夠給人直觀的感受到應用后的效果,也是這個理論的運用)。 


          undefined

          應用場景:產品配圖、插圖、攝影 


          5. 色彩心理學


          有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學海報就足夠了(彩云注:感興趣的可以自行翻譯研究下)。


          undefined


          此外,我們不要忘記從早期到現在一直在廣泛使用的顏色,這些顏色的使用更符合用戶習慣:

          紅色:錯誤

          綠色:成功

          藍色:進行中

          黃色:警告


          6. 形狀心理學


          undefined


          就像顏色一樣,人類的潛意識對不同的形狀也有不同的反應。例如:

          圓形、橢圓形:傳遞積極的信息,通常與社區或關系有關。

          方形和三角形:帶有強烈的信息,通常與力量和穩定聯系在一起。

          豎線:代表強度、力量或攻擊性。

          橫線:表示平靜、相等、安靜。


          7. 雙碼理論


          這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外,人類是視覺動物,我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設計的有效性,我們不應該去掉解釋性的文字。


          (彩云注:根據這個理論,在做作品集時,就應該盡可能的多用視覺化語言,文字作為輔助,對于視覺設計師來說,能用圖表達的就盡量減少文字的比重。) 


          undefined


           一個很明顯的例子就是導航欄。大多數新的應用或具有復雜功能的應用都同時設計了圖標和文字標簽。 


          undefined



          8. 并行設計


          人類的眼睛傾向于看到平行因素比其他因素更相關。我經常使用這一原則對同一屏幕內的兩組不同內容進行分類。最容易看到的例子可能是Facebook messenger界面,當帖子并排排列時,消息是平行的。 


          undefined


          9. 共同區域


          這一原則類似于格式塔原則中的相似定律,但它并不是完全相似。共同區域原則是通過我們使用分隔線、形狀或顏色的方式創建的。 


          undefined


          如果一個界面需要用戶滾動更多來查看內容,我們應該有一些方法來更清楚地劃分它,而不僅僅是使用間距。


          應用場景:列表清單、信息流

           

          10.掃描圖形


          根據NNGroup UXPin等組織或團體的各種研究,兩種最常用的掃描模式是“F”和“Z”。

          • F的使用最為廣泛,尤其是對于內容量大的網站。

          • Z用于不太注重文本的網站,通常強調在最后的號召行動。

          一旦我們理解了如何使用這些模式,我們就可以選擇布局并有效地安排元素來實現我們的設計目標。 


          總結


          第一印象是最令人難忘的,積極的體驗可以在用戶和產品之間創造持久的關系。如果能讓用戶在一開始就喜歡上我們的設計,就能為我們的產品創造了一個很好的優勢。

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

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

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

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

          構建視覺層次的4個技巧

          ui設計分享達人

          設計行業每天發生著翻天覆地的變化,隨著專業的發展,我們也在不斷的學習新的技巧和趨勢,但同時我們也要明白,設計中那些基礎的UI準則,才是好的趨勢和風格建立的基礎。今天我們就一起來聊聊做好設計最重要的能力之一:區分視覺層次。


          什么是視覺層次

          視覺層次你可以理解為,通過將界面元素進行設計上的區分,引導用戶的注意力,并使用戶的注意力始終集中在頁面的關鍵地方。但是今天沒有一個方法可以一直控制用戶注意力,就像我們今天做設計一樣,不同的產品要用不同的設計手法去設計,才能達到幫助用戶分清主次的作用。 

          視覺層次不僅僅包含文字有關,它還包含我們的圖片,視頻按鈕以及文字以外的視覺元素。所以當你設計一個網頁時候,除了網站整體的顏色,排版,圖片也能夠影響視覺層次。那么如何讓設計的層次更清晰,常用方法有哪些,今天我們一起來聊聊關于設計層次,希望可以幫助到你。


          運用尺寸大小建立層次

          大小是建立視覺層次非常重要的方式,這里的大小不僅僅是文字,還包括圖形,插畫,圖片等等。 作為設計師我們必須了解屏幕上每個元素的優先級,根據優先級來判斷它的使用大小。

          當我們談到尺寸的時候,相信很多設計師有過被要求各種元素放大的經歷,確實大的元素能更好的吸引用戶。 但是當元素越大,其實設計的復雜性也越高,所以在設計時候需要更注意整體節奏,把握好一個度。 

          如上圖插畫的比重很大,在設計這種大的元素時,你的每個元素比例和細節處理都被同時放大了,我們可以看見這副插畫四周還運用了很多元素,讓頁面達到平衡,同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設計一定是通過視覺手段讓用戶理解信息更加準確,在看完頁面文字和圖片后,很自然的引導到底部的按鈕,這才能算是一個很引人注目的設計。


          運用色彩建立層次

          顏色在視覺層次中扮演著非常重要的角色, 設計師可以通過顏色來傳遞信息內容,同時也可以引導頁面內容,色彩在心理學中有著很重要的作用,比如黑金給人尊貴感VIP感,糖果色給人小清新,甜蜜的感覺;紅色能吸引人注意等等。用戶在視覺情感上和顏色很容易聯系在一起, 作為設計師我們需要對不同的色調,不同色彩進行細致的組合搭配,以掌握對色彩的了解。

          Zenly:國外知名產品,在引導頁面設計時候運用紅色按鈕吸引用戶注意,在App主頁面里面,通過深藍色強調選中效果以及Tab. 

          Netfix:知名的電影軟件Netfix在設計中,充分運用色彩去增強層次,無論是在引導頁按鈕設計,還是在頁面核心行動點,以及Tab切換等地方,都通過顯眼的主色來引導用戶操作,讓頁面的行為路徑更加順暢。 

          Tiktok:抖音海外版本設計,整體UI部分非常簡單,頁面還是一如既往突出內容為主,所以在整個設計上就通過色彩來強調頁面優先級,比如拍攝,分享,選擇這些核心操作都通過色彩來引導完成任務。 


          運用文字大小字重建立層次

          絲芙蘭App的設計,在引導頁采用一個襯線體非常有品位,通過字體大小,和字重對比,再配合美妝護膚的行業屬性,頁面非常的簡潔大氣,有對比有細節。 

          無論是產品介紹,還是詳情頁,絲芙蘭設計都是采用字重和字體大小對比,來打造層次,字重和大小,也是設計師常用建立層級的方式。 

          除了字重以外,還可以字體透明度來增加層級,一般是黑色搭配灰色使用,再加上字體大小和字重整個頁面層次會更加清晰。如上圖韓國APP頁面,標題是黑色,輔助說明文字字號小4號,同時顏色改為淺灰色,這樣設計頁面層次增強了很多。 

          很多設計師在做界面時候,喜歡字體就一個顏色用到底,這樣會顯得界面粗糙,也沒有層次感。但是運用好我上面說的字體大小,顏色、字重等對比其實節奏很容易就能做出來。 

          運用視覺重量建立層次

          比如aaptiv這個產品的功能頁面設計,就是運用了視覺重量的對比,線框按鈕最弱,其次是黑色選中效果,最重的功能引導按鈕, 視覺 重量的對比能很好讓用戶關注到功能內容。

          如上圖,選中的黑色視覺重量最重,其次是藍色選中效果,最后是未選中的黑色,視覺重量幾乎我們每一個頁面中都會使用到。 

          headspace這款產品我非常喜歡,將情感化用到了極致,在頁面很多細節地方運用了不同的小橙人在背景上,視覺重量有輕有重,通過不同視覺重量來表達頁面內容,非常巧妙。 

          在列表的表達上,不同視覺重量感受是不一樣的,比如左邊的視覺重量更輕一點,用戶關注圖形同時也去關注文字內容,右邊這個視覺更重,更加引導用戶去點擊功能模塊內容。 

          設計師熟悉的medium官方App設計,在正文閱讀時,同樣采用不同的視覺重點來突出重要信息,比如左邊通過字重以及文字背景綠色底色和正文對比,非常醒目。右側通過淺綠色作為背景強調突出。

          同樣在一些重要位置,Medium也是運用視覺重量處理,如左圖通過頂部提示條提示可以通過語音播放,在右側付費文章通過行動按鈕引導用戶升級付費。

          文章來源:站酷   作者:我們的設計日記

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

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

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


          用戶界面設計中的對比類型

          ui設計分享達人

          了解對比如何在設計中發揮作用,在用戶界面中可以找到哪些類型的對比,以及為什么它對積極的用戶體驗很重要。

          一般而言,“對比”一詞用于描述彼此截然不同的對象。談到視覺感知,對比度基本上與顏色或光線的差異有關,可以使物體清晰可辨。

          為什么對比度很重要?因為人眼自然會捕捉到對比度。圖像的最高可能對比度稱為對比度或動態范圍。更重要的是,對于色盲等視力不佳的人來說,對比度成為他們看到的物體的核心特征,并讓他們能夠區分它們。

          在學術藝術中,對比處理對立元素和效果的排列,例如明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下,對比不僅可以用來吸引注意力,還可以設置情緒和氛圍,在藝術品中創造多樣性、視覺趣味和戲劇性。

          在設計中,對比度是影響效果的關鍵因素之一。 可掃描性網頁或移動屏幕的視覺層次結構。它使設計師能夠以一種方式呈現布局,告知用戶哪些交互點是重要的,哪些是次要的。對比度可以有效地吸引用戶的注意力并將其吸引到特定元素上,因此它在支持數字產品的直觀導航和可用性方面發揮著重要作用。

          Pass-On 應用程序登錄頁面的設計展示了有效的顏色和尺寸對比示例,為頁面構建了堅實的視覺層次結構。

          UI設計中的對比類型

          對比可以基于 UI 元素的不同特性,包括:

          A. 顏色:這種類型是人眼最自然和最明顯的對比之一;它適用于顏色明顯不同的情況,例如,通過互補、分裂互補或三元方案組合,這種類型的對比最廣泛地用于制作按鈕和其他關鍵導航元素。在網頁布局或應用程序屏幕中立即看到,支持清晰直觀的導航。

          B. 大?。哼@種類型的對比是基于首先引起注意的元素明顯大于其他元素。

          C. 形狀:通過使一個元素的形狀與其他元素不同來吸引用戶的眼球。

          D. 位置:在這種類型中,設計師以這種方式更改一個元素的位置,使其看起來不同,例如,文本片段的新段落以縮進開頭。

          E. 紋理:這里的差異是由于使用彼此明顯區分的紋理而建立的。

          F. 方向:改變元素的物理位置,使其在其他方向,這樣以不尋常的方式吸引用戶的注意力。

          經常想到的關于對比度的第一個想法是黑白的東西。在沒有陰影和多種顏色的情況下,單色圖像使用對比度作為表現潛力的主要助推器。這在用戶界面中的工作方式相同。更重要的是,與藝術品或攝影作品相比,對比度不僅會影響美感,而且對布局的可用性也有重大影響。因此,深思熟慮的對比度使用是使網站和應用程序用戶友好且易于使用的強大方法。

          排版對比

          另一種特定類型的對比是排版對比,它基于設計作品文本部分所用字體的區別特征的差異。

          加拿大字體設計師卡爾·戴爾定義了 7 種核心類型的排版對比:

          A. 尺寸對比:它是關于由表格創建的基本圖案的物理放大和用于文本的類型的重量。這里最常見的情況是使標題或標題明顯大于文本。

          B. 重量對比:粗體在同款較輕的對比中突出。它有助于將注意力吸引到文本的特定部分,并讓用戶了解它們的重要性。

          C. 形式對比:這里的形式是指大寫字母和小寫字母之間的區別,或者羅馬字母和它的斜體變體,壓縮和擴展版本,與標準類型協調的腳本類型——所有提到的都可以用于戲劇性的形式的改變。

          D. 結構對比:結構意味著不同類型字體的不同字母形式,例如單線無襯線與高對比度現代,或斜體與黑體。

          E. 紋理對比:這是關于字體的線條如何看起來像一個整體,這部分取決于字體本身,部分取決于它們的排列方式。

          F. 顏色對比:第二種顏色通常不如基本的白底黑字(或黑底白字)強調,因此必須仔細考慮需要強調的元素并注意色調值使用的顏色。

          G. 方向對比:這種類型是關于垂直和水平之間的對立以及它們之間的角度。出文本塊也有它們的垂直或水平方面,將寬的長線塊與高的短線列混合可以產生對比。

          另外,還有一些不太流行的對比,比如所謂的孤立對比,就是把一個詞或詞組放在遠離其他元素的地方,這樣就可以從人群中脫穎而出,以及對比按節奏(空間間隔)——破碎的部分形成對比并吸引注意力。

          對比輔助功能

          閱讀上面提到的所有內容,很容易假設這里的經驗法則是對比度越高,設計越好。然而,事實并非如此:以及任何其他設計方面太多并不意味著更好。雖然低對比度會使內容難以感知和閱讀,但過高的對比度會引起眼睛疲勞,使交互更加困難。

          根據網頁內容無障礙指南 2.0,文字的視覺呈現和文字的圖像應該堅持至少 7:1的對比度,以下情況除外:

          大文本:大文本和大文本圖像的對比度至少為 4.5:1;

          裝飾:作為界面組件的一部分的文本或文本圖像,作為裝飾沒有對比度要求。

          標識:作為徽標或品牌名稱一部分的文本沒有最低對比度要求。

          注意留白

          空白是留空的布局區域,不僅在對象周圍,還包括對象之間和內部??瞻资琼撁婊蚱聊簧纤袑ο蟮囊环N呼吸空間,因此它極大地影響了 UI 中應用的不同類型對比度的有效性。

          總結

          生活充滿了對比,無論你會采取什么方面。對于所有的生命,我們必須學會如何接受這一點,并嘗試享受如此多樣化和不可預測的生活。與現實相呼應,設計也充滿對比,并盡可能多地借鑒。

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

          文章來源:站酷   作者:對啊設計君

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

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

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

          10條你絕對不能打破的交互設計規則

          ui設計分享達人

            在生活中,有一些規則是你絕對不能打破的,如果你打破了,將會付出慘痛的代價。在用戶界面設計中,也有一些必須遵守的規則。它們被稱為“啟發式”或提高用戶界面可用性的一般原則。這些是經過了長時間測試的可重復的模式,可以幫助用戶更好地瀏覽界面。一個良好的設計一定會考慮到以下原則,一個不那么好的設計總是會缺少其中的一個或多個原則,那么作為一個UI設計師,為什么要忽略這些原則讓你的用戶如此頭疼呢?

          1.系統狀態的可見性

          該系統應在合理的時間內通過適當的反饋使用戶了解正在發生的事情。

          你要不斷地給你的用戶展示適當的信息、提示和背景,使他們在任何時候都知道他們在系統中的位置。這可以讓用戶感覺自己處于控制之中,知道下一步該做什么。這個項目被添加到購物車了嗎?編輯的內容被保存了嗎?這個過程需要多長時間?我的訂單的狀態是什么?現在正在發生什么?不斷地為用戶回答這樣的問題,不要讓他們猜測或蒙在鼓里。

          2.將系統與現實世界相匹配

          你設計的系統應該使用用戶熟悉的語言,使用用戶熟悉的單詞、短語和概念,而不是使用專業地術語。你要遵循現實世界的慣例,使信息以自然和邏輯的順序出現。

          使用熟悉的詞語和語言,不要讓措辭過于復雜。屏幕上的單詞或圖標的含義應該對目標受眾清晰易懂。人們還帶有心理模型和經驗,可以讓他們解釋圖標。

          技術的最大進步之一是圖形用戶界面的出現。在圖形用戶界面之前,計算機屏幕上只有晦澀難懂的文字命令,每當你想執行一個動作時都要記住并重復。然后,一切都改變了。屏幕上顯示的是文件夾和文件的小圖像以及一個手形光標。這些都是人們能夠立即理解的視覺符號。不需要解釋,因為它引用了現實世界的心理模型。


          3.一致性和標準

          用戶不應懷疑不同的詞語、情況或行動是否意味著同樣的事情。

          有兩種類型的一致性:內部和外部。內部一致性是指你的網站或應用程序中的模式要一致。這很簡單,比如在所有的頁面上保持相同顏色的鏈接,或者在每個屏幕上對相同的概念使用相同的圖標,比如HOME。外部一致性是指大多數人使用的其他軟件和系統中的慣例,如購物車。大多數人都熟悉購物車的使用方式。你不需要重新發明什么東西。如果你這樣做,你可能會讓你的用戶更難學會你的購物車如何工作。保持一致,為用戶節省不必要的混亂。


          4.用戶控制&自由

          用戶經常會錯誤地選擇系統功能,并且需要一個明確的“緊急出口”提示才能離開不需要的狀態,并且無需通過擴展對話就能支持撤銷和重做。


          始終為用戶提供一條出路。不要強迫用戶執行他們不需要的功能,或者把他們引向死胡同。例如,如果你正在設計一個結賬流程,如果用戶愿意,就讓他們繼續購物。如果他們試圖在一個應用程序上執行一個動作,當他們在最后一刻不確定是否要繼續時,就讓用戶取消。


          5.錯誤預防

          比起錯誤提示信息更好的是一個精心的設計,它可以從一開始就防止問題的發生。要么消除容易出錯的條件,要么檢查這些條件,并在用戶承諾行動之前向他們提供一個確認選項。


          當系統操作到很關鍵的一步時,如刪除文件或向1000個收件人發送電子郵件,要確保用戶知道他們將做一些重大的事情。向他們展示確認對話或提供額外的信息,清楚地定義在行動之后將發生什么。這將防止他們在不確定自己的行動時進一步行動。這也將為他們省去大量的遺憾。


          6.利用識別而減少回憶

          通過使對象、行動和選項可見,盡量減少用戶的記憶負荷。用戶不應該記住從對話的一個部分到另一個部分的信息。在適當的時候,系統的使用說明應該是可見的或容易檢索的。


          作為UI設計師,我們的目標之一是減少用戶的認知負荷。記憶以兩種方式工作:識別和回憶。識別是指你立即熟悉的東西。比如一個人的臉。你看著一個朋友的臉,你馬上就知道你以前見過他們?;貞浀淖饔脛t不同。它是你必須從記憶中檢索出來的東西,比如一個人的名字。回憶通常需要更多的時間和工作,因為你的大腦必須處理更多的信息來破譯它所看到的東西。

          另一方面,識別是即時的。我們希望在我們的用戶界面上具有更多的識別,而減少回憶。實踐這個原則的一個很好的例子是使用普遍可識別的按鈕和圖標來表示功能,例如用房子表示 "家",用鉛筆表示 "編輯"。如果你必須為你的用戶界面設計新的圖標,而大多數人以前從未見過這些圖標,那么請使用文本描述符來澄清并減少認知的負擔。


          7.使用的靈活性和效率

          新手用戶看不到的加速器通??梢约铀偕疃扔脩舻慕换ィ@樣系統就可以同時滿足沒有經驗和有經驗的用戶的需求。允許用戶定制頻繁的操作。


          當某些任務在你的應用或系統中反復出現時,你可能想讓用戶更有效地進行互動。例如,使用滑動手勢來保存或刪除移動應用程序上列表中的項目。刪除一個項目的正常方式是打開一個項目,然后按下刪除按鈕。專業的方式(也是更有效的方式)是通過簡單的滑動并立即從列表中刪除項目。


          8.極簡主義的設計和審美

          對話不應包含不相關或很少需要的信息。對話中每一個額外的信息單元都會與相關的信息單元競爭,并降低它們的相對可見度。


          當為藝術而設計時,如果我們走巴洛克風格,可以用人工制品、紋理和圖像填滿屏幕。但是當為交互而設計時,我們的目標是降低信噪比。這樣做會使我們的界面對用戶來說更容易理解。你可以應用這個原則,把屏幕上顯示的內容減少到最低限度,不管是圖像還是文字,這樣用戶就可以專注于手頭的工作而不會分心。


          9.幫助用戶識別、診斷和恢復錯誤

          錯誤信息應該用簡單的語言表達,精確地指出問題,并建設性地提出解決方案。

          錯誤會發生,那是不可避免的。用戶遇到錯誤后發生什么是UI設計師的責任。因此,我們應設計可以理解的錯誤頁面和提醒來幫助用戶,并提供解決問題的選項或方案。例如,讓我們來看看無處不在的404頁面。作為設計者,我們知道錯誤的404頁面意味著什么,但用戶一般都不知道。為了幫助用戶,我們必須把404翻譯成簡單的語言,加入一些文案,使其清楚地知道剛剛發生了什么,比如 "對不起,我們找不到你要找的頁面。這里有一些具有類似內容的頁面建議......"。


          10.幫助&文件

          盡管系統不需要說明就能使用的話會更好,但可能還是有必要提供幫助和說明。任何這樣的信息都應該易于搜索,集中在用戶的任務上,列出要執行的具體步驟,而且不要太多。


          始終讓人們能便捷地獲得幫助,把幫助放在頂欄或主導航區的顯要位置。當用戶遇到問題而不能輕易找到解決方案時,他們必須被引導到一個可以解決問題的地方。這可以采取FAQ頁面的形式,用一個搜索框提供可能的建議和答案。在沒有答案的情況下,系統必須有一個選項,可以通過支持在線詢問或電子郵件或電話,直接與支持部門聯系以獲得額外的幫助。

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

          文章來源:站酷   作者:磨刀modao

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

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

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

          分享3個方法,打開全球視野

          ui設計分享達人

          設計如果要做好,除了提升審美還有一個非常重要的點就是多看、多使用好的產品,特別是一些全球頂級大公司的產品一定要去體驗,很多國內設計師受限于各種原因,無法下載國外App,沒關系,今天分享一個我經常使用的工具網站,讓你也能不出國門打開全球設計眼界。

          設計師要拓寬眼界

          我相信很多朋友在面試時候都會被問到,你常用的產品有哪些?一般問這個問題,其實面試官在考察3個方面: 

          第一:你對于互聯網好產品的關注度。

          第二:你是否有足夠好奇心去研究體驗產品

          第三:你的審美,美感如何?

          因此作為一個設計師,必須不斷去把玩使用各種APP才能讓眼界打開。如果說Pin是去構建設計靈感庫,那么每個人還需要有一個App圖書館,當你設計靈感枯竭時候;可以去嘗試體驗更多好的產品提升自己眼界,今天就分享幾個小方法幫你打開全球視野。


          第一個神器

          https://mobbin.design/ 這個網站是我私藏多年的一個寶藏網站,里面幾乎包括了目前國外最優秀的一些APP,而且不用你去商店下載就可以看見里面全部界面流程。有的APP你還得需要各種賬號才可以去看見完整頁面,這個網站很全,你點擊進去,它把全部頁面模塊都已經截圖好了,非常方便。 

          比如我今天想看twitter某個動態卡片如何設計的,按照一般做法,我可能需要科學上網,甚至有的還需要去注冊美區賬號。但是在這個網站里,直接搜索就可以看見twitter的全部設計,包括各個場景截圖。 

          APP的全部頁面狀態,以及里面各種場景,按照用戶的體驗流程一一的截圖展示。

          點擊后可以查看大圖模式,點擊旁邊的列表標簽,能夠搜索很多列表的效果圖。

          點擊標簽后全網所有關于列表相關的設計截圖,都給你找出來了,然后 你就可以找到你想要的圖片,順藤摸瓜,找到更多的APP。

          同時你如果要下載到手機,點擊頭像即可跳到對應的APP下載頁面,非常方便! 

          同時搜索功能也支持很多的APP查詢,比如我想看看google news的界面設計,直接搜索即可找到。 

          就能查詢到Google news的全部頁面設計和細節,非常方便。大家可以多去這個網站試試,你會發現很多驚喜。 

          第二個工具:Senstower

          除了上面那個網站,還有另外一個神器工具:https://sensortower-china.com/它可以看見全球的APP排行榜,最神奇地方是可以看見各個產品的用戶數,以及盈利情況。讓我們可以更好的了解商業。 

          詳情頁可以看見這個公司旗下全部產品,以及公下載用戶量,每月賺的錢。非常的厲害,這個工具適合很多初創公司,當你不知道做什么項目時,可以去上面看看其他國家一些產品,找找靈感,那設計上我們又可以學什么呢? 

          比如我很喜歡的一家韓國公司Nvaer,相當于中國的阿里騰訊,點擊搜索后,你能很完整的看到這個公司的全部app,非常全。 

          點擊進去可以看見下載數。以及公司的盈利情況,以及用戶對于這個產品的全部評價。 

          當然也有屏幕截圖,比如你是做直播的產品,那么就可以去看看這個產品的頁面,做為設計參考。同樣的支持APP商店下載,可以跳轉到對應的APP的鏈接。 

          經常做設計沒有靈感,但是我們找競品只能看到國內的,那么這個軟件你搜索后可以 查詢全球的所有APP,比如我做音樂軟件,那么我搜索music出來的關鍵詞就是全球的音樂軟件排行榜。非常強大! 

          同時你可以通過類別選擇產品類型,是娛樂的還是音樂,以及那個國家的?他能幫我們的眼界放眼到全球,如果說上面那個工具,幫我們收集優秀截圖,那么 這個網站幫我們了解很多商業思維,用戶評價,以及這個公司矩陣產品。

          第三個工具:producthunt

          這個網站是我的最愛,所以放到最后分享,它是一個優秀產品的分享網站,https://www.producthunt.com/ ,里面基本都是一些優秀創業公司的最新產品,免費開放給所有人體驗,包括產品,設計,工具,以及各種新奇好玩的趣味工具。 

          比如這個網站,是谷歌的一個最新產品「谷歌照片」,你可以像故事一樣發布你的照片,非常好玩。 

          比如這個產品,設計師提供了幾百個3D的圖標網站可以供大家下載體驗,全部免費。 

          一鍵扣除背景圖片和視頻的工具,非常的棒,這些產品都是全球一些頂級的開發者設計出來的,給大家免費使用和評測的。我經常能在里面發現很多寶藏,也一起分享給大家!

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

          文章來源:站酷   作者:我們的設計日記

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

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

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

          設計沉淀錄:如何讓你的設計更有價值

          ui設計分享達人

          前言:如何讓你的設計更有價值,設計有價值代表你的方案有價值,你的方案有價值代表你的理論有價值、你的理論有價值代表你的專業能力體現,歸根到底,說明了什么人作出什么樣的作品的同時會帶來相應的價值。站在設計師的角度看,在公司里,屬于站在用戶體驗上的提出的設計建議或者設計方案,基于“以用戶為中心”理念和交互設計原則,通過自己的設計思維與專業能力,為公司創造更大的價值,不單只是一個美觀的輸出。

          目錄:

          一、設計行業的發展趨勢

          a)設計與產品的關系

          b)找到自身價值的重要性

          二、了解設計師的價值分層

          a)設計協同

          b)推動業務增長

          c)設計驅動產品

          三、設計師需要具備的哪些思維?

          a)雙鉆模型解決問題

          b)“五度”設計成果評估模型

          c)培養數據思維,利用數據提升設計的價值


          一、設計行業的發展趨勢

          a)設計與產品的關系

          以前,設計師在團隊里的位置會比較尷尬,因為沒法驗證自己對業務的推動是否產生了什么明確的價值。而大數據的來臨,設計的價值變得顯性化,作為與用戶關系密切的設計師,善用好數據,可以發揮的作用其實很大。我們可以通過自己的設計思維與專業能力,為公司創造更大的價值,不單只是一個美觀的輸出。這就使得設計與產品業務關系越來越密切,是整個行業發展的必然趨勢。


          舉一個設計以小成提高業務的實例。這是我之前做的分揀軟件迭代首頁的自定義配置組件。在改動前分揀首頁功能多,甚至有時候需要滑動尋找。尋找點擊率大概是不到16%,改動后提高到了40%,不消耗任何其他人力、物力成本,就可以用設計讓CTR翻倍。

          設計目標:減少首頁模塊尋找的時間,加大成功點擊率,考慮延展性發展

          現有問題:主次功能混淆、視覺點不夠集中、點擊按鈕不明顯

          優化方案:1、主次布局調整,主上次下;2、面積放大提高模塊命中率;3、色彩區分主次按鈕;4、添加“?”自定義配置首頁主功能,加入人性化設計理念。



          b)找到自身價值的重要性

          自身價值顧名思義就是你的工作成果會帶來什么價值,按照公司更看重我們的設計能給產品的發展帶來多大的價值。雖然職位的性質已經很明確你的價值的體現,但是這里注重成果的價值,設計師的成果更多是設計方案,方案成果的價值的接受度也是需要從易到難的漸進的。


          舉一個設計價值體現的實例。這是我之前做的新Station組件庫——GM Design。設置組件和設計規范不僅保持了產品的統一性,且減少用戶在使用過程中的行為認知負擔,快速同事達成合作,還可以減少不必要的操作和排查,提高易用性。

          設計目標:保持產品的統一性,減少認知負擔,降低時間和人力成本,提高易用性

          現有問題:同個功能存在組件多樣、組件學習成本高、反復修改,

          優化方案:1、建立組件庫;2、功能類型劃分,采用同一個組件的變形處理;3、組件集中化; 


          二、了解設計師的價值分層

          設計師的價值可以分為以下三層:設計協同、設計推動業務增長、設計驅動產品。

          a)設計協同

          一個完美的執行者,能夠在拿到需求后高效又完美地實現落地。簡單地說就是手上功夫好。

          做好這個階段需要有優秀的專業能力,良好的溝通能力,并參與到產品的探索與構思中來。


          舉一個設計協調的實例。Q2階段的B-Shop商城交互迭代。前期輸出設計基礎和設計規范,有助于開發高效實現,實時跟進UI進度和設計協助。在產品的探索中發現數字鍵盤組件的問題點,由于自己寫的數字組件具有局限性,導致體驗上無法滿足部分需求,如:輸入框的定位在數字鍵盤之上?;谶@個問題點,我們提出A/B方案,A方案是自己寫的數字組件,B方案是自己寫的數字組件延用原生的邏輯,從用戶測試得出,A方案是更符合用戶操作習慣。

          設計目標:組件高效快捷輸入,側重交互體驗提升,視覺優化,提高易用性

          現有問題:學習成本高、缺少設計基礎、信息分層不明顯、體驗差

          優化方案:1、劃分主次信息,閱讀更直觀;2、建立設計規范;3、組件優化,符合用戶操作習慣;4、圖文結合,按鈕優化,加強頁面指導性



          b)推動業務增長

          這個階段的設計師,會比上一個階段更能體現設計師的設計價值,并對產品產生一定的影響力。能在以用戶為中心的基礎上,推動業務的增長,所以這個階段的設計也被稱為UGD(User Growth Design)。


          需要設計師具備用戶洞見力,數據分析能力,從這兩個維度出發,去熟悉業務、分析業務,從而推動業務。

          舉一個推動業務增長的實例。Q2階段的采購APP的交互迭代。表頭的功能布局與標簽欄的“?”添加功能的調整,其實在用戶調研階段的熱力圖數據和觀察法分析得出,工具類移動端側重點在功能區,需要一目了然知道我的當前任務數是很重要的信息,且是高頻操作,所以放置頂部;標簽欄的添加功能是為了快速添加采購單據和詢價為目的,用戶群體特殊性,需要一鍵新建添加的需求。

          設計目標:側重交互體驗提升,提高工作效率,提高易用性

          現有問題:學習成本高、缺少設計基礎、操作路徑長、體驗差

          優化方案:1、操作路徑簡化,采用路徑集合彈框;2、建立設計規范;3、組件優化,符合用戶操作習慣;4、一鍵新建“?”的功能,達到快速新建

          體驗連接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(賬戶/密碼zhangsan0001/ liuge1)



          c)設計驅動產品

          這個階段的設計師,在團隊中的價值可以說是非常大了。從被動的需求接收方,轉化為從戰略層,能主動提出需求的一方。也是UXD發展的終極方向。


          三、設計師需要具備的哪些思維?

          a)雙鉆模型解決問題

          什么是雙鉆模型?

          雙鉆設計模型由英國設計協會提出,該設計模型的核心是:發現正確的問題、發現正確的解決方案。一般應用在產品開發過程中的需求定義和交互設計階段。


          雙鉆設計模型把設計過程分成4個階段:發現問題(挖掘)、定義問題(創意)、構思方案(制作)和交付方案(落地)。



          采購APP進行雙鉆模型思維構建的基礎,提供交互迭代的底層設計理論支持,在挖掘需求階段,屬于用戶調研階段;創意階段,關注點在于問題梳理、實現目的、設計層面;制作階段,尋找潛在的解決方案;落地階段,解決方案的分析和驗證,輸出最適合一個。


          b)“五度”設計成果評估模型

          用戶體驗周期(由阿里巴巴UED提出概念)


          用戶體驗周期指的是用戶與產品的關系隨著時間變化而形成的不同周期階段。用戶體驗周期可以分為「當前」和「長遠」兩個階段,每個階段中有不同的細分。

          • 「當前」階段,分為 3 個過程:

            • 觸達:用戶來訪問網站,包括第一次訪問網站的新用戶和再一次訪問網站的老用戶;

            • 行動:用戶在網站上進行相關操作;

            • 感知:用戶在操作完成后對產品形成的主觀感受。


          • 「長遠」階段:分為 2 種表現:

            • 回訪:用戶自己再次使用該產品;

            • 傳播:用戶推薦給其他人使用該產品。


          如何在具體項目中體現呢?下圖,運用一個具體項目舉例:

          c)培養數據思維,利用數據提升設計的價值

          項目與需求上線后,去驗證自己的設計是否有效地達成了目標。這個時候你就需要去看數據反饋。沒有數據就就沒有比較,沒有比較就不能進步。

          關于數據的用處有很多,舉個例子,當兩個人對各自的方案爭執不休,分別覺得對方不好,但站在各自的邏輯上似乎都能說得通,那怎么辦呢?分別做一個A/B測試,數據不會說謊,哪一個方案更有效,一目了然。

          那么如何將數據結合到我們的設計中呢?首先在設計前,我們需要先定一個目標,而每一個目標就應有一項對應的數據指標。比如,提高了某一塊的CTR(點擊通過率),提高CVR(轉化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去驗證自己的的action是否完成了自己的Goal。


          拿到了數據之后,還需要分析數據。不管是有沒有達到目標,都要去分析原因,進行復盤總結。復盤的好處是可以讓我們在這一次項目中吸取有價值的經驗—失敗了就找失敗的原因,方便以后避開同樣的錯誤;成功了就分析成功的原因,并將成功的策略復制運用到今后的工作中,增加以后的成功率。如此,不管有沒有成功,都能給我們帶來最大化的價值。我們也會更加的接近用戶、接近產品、接近業務。從而幫助我們進一步洞察用戶、挖掘新的需求。


          小結:

          以上就是今天所要分享的全部內容。再帶大家回顧一下,一共分為三部分:第一個是了解設計師的發展趨勢,第二個是趨勢下的設計師價值分層(設計協同、設計推動增長、設計驅動),第三個就是在價值分層的逐步遞升中所需要培養的雙鉆模型、GSA的策略、數據增長思維等。



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

          文章來源:站酷   作者:麥海欣

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

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

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

          標簽欄設計有哪些不易察覺的「小細節」?

          ui設計分享達人


          Tab Bar 


          Tab Bar「標簽欄」一直是UI設計師值得學習和研究的內容,因為當設計師在構建一個新的應用程序時,都可能需要搭建標簽欄,建議設計師們根據實際情況去判斷是否使用。

          流行常見的應用程序,如Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat,都在使用標簽欄,但這并不意味著你的應用程序、你的用戶是真的需要或真心喜歡。像計算器、日歷等應用,就沒有涉及此功能。


          為什么應用程序會有標簽欄?答案顯然是「易于使用」。加入標簽欄可以幫助用戶更輕松地導航到頁面,不用再特意點開菜單,選擇想要瀏覽的頁面。帶有標簽欄的應用程序,通常會與多個頁面聯動。而類似計算器這種工具性質的程序,用戶可能會重復打開使用,所以其展示重點在主屏幕上,點擊后直接進入功能頁面。


          為什么標簽欄不是菜單?有些應用會使用菜單羅列頁面,雖然占用的屏幕空間更少(菜單圖標),但缺點是用戶點擊菜單進行多次跳轉。為了更好地使用,設計師發明了靠近拇指的酷炫標簽欄, 方便用戶點擊,以獲得更好地導航和更輕松地沖浪體驗。接下來我將為大家介紹幾個應用標簽欄時的小技巧:


          01 展示最重要的目的地

          標簽欄應只包含最有用的目的地,應是被高度精簡過的,避免變得混亂。許多應用程序在其標簽欄上添加了搜索屏幕,這有助于更好地導航內容。結合自身程序,為用戶針對性地添加一些重要的功能,提升體驗。

          比如Spotify的標簽欄,使用了音樂播放器中常出現的幾種功能:Home,主頁標簽用于播放或可能收聽的內容;Search,搜索標簽用于檢索其他歌曲和播客;Library,庫標簽用于播放列表中用戶喜歡和保存的歌曲。Premium則是結合了公司業務,幫助用戶輕松完成費用支付。


          02 把相似的內容放在一起

          體量大的應用程序,它們更喜歡使用4-5個標簽,不僅讓標簽欄變得整潔,還能幫助用戶快速點擊。如果超過5個圖標,用戶受拇指大小的影響會無法準確地點擊。

          Pinterest的標簽欄雖然只有4個標簽,但它在通知標簽內設計了置于頂部的標簽——消息選項卡,最大程度的拓展了用戶在此標簽內的應用。


          03 如果需要,盡量使用標簽

          任何流行的應用程序都在使用標簽,因為它們清楚地說明了當用戶點擊特定標簽時會做什么。

          Youtube和宜家這兩款應用復雜程度各不相同,宜家的內容主要是家居家具,YouTube則是不同類型的視頻。YouTube使用的搜索標簽,與其他程序相比,也更具自己的特色。

          Pinterest的標簽欄相對設計的專業一些,會將標簽上的文字隱藏起來。當用戶習慣使用后,標簽上的內容會隨之隱藏,我個人非常喜歡這種設計。不過,我建議大家根據自己的選擇,再去確定是否要這么做。


          04 文本標簽應該簡短

          標簽欄內的標簽應簡短與清晰,就像設計按鈕標簽時一樣,請使用準確的標簽。TikTok的所有標簽都是短標簽,并且還加入了創建按鈕,如果你想吸引用戶的注意力,你也可以這樣做。


          05 避免隱藏標簽欄

          避免對用戶隱藏標簽欄,因為其包含了最重要的導航功能。大多數的應用程序都遵循了這條規則,除非有些是出于測試目的,會選擇隱藏。Pinterest的標簽欄在滾動瀏覽圖像時完全隱藏,我個人猜測,是希望用戶可以最大幅度的查看感興趣的圖像。


          06 按順序排列標簽

          按順序排列標簽非常有必要,每個應用程序都會參照清晰度和可用性這兩個維度去設計。用戶喜歡看到排列好的東西,而標簽欄就是其中之一,大型的應用程序也基本上遵循類似的設計規則。

          打開Pinterest會看到瀑布流形式的主頁面,重要的內容都被呈現在了主頁上。Spotify、Youtube、Pinterst、TikTok等應用程序都比較相似,將重要內容放在了主頁上。個人建議大家可以參考,但最重要的是將內容井井有條地呈現,并始終如一地遵循著設計規則。


          07 傳達位置

          標簽欄幫助用戶輕松導航,如果用戶不知道自己的位置所在,也就無法進行有效地瀏覽。比如Duolingo和Headspace的標簽欄,就向用戶傳達了其所在的準確位置。


          08 從數據中學習并持續優化

          如果你想改進應用內的標簽欄設計,數據是關鍵點。你可以測試用戶最喜歡的、不使用的以及需要增加的標簽分別是什么。

          一款成功的應用是需要持續迭代優化的,就像靈感平臺Pinterest,雖然它不急于測試新事物,但卻與用戶建立了深深的羈絆,慢慢沉淀積累,再去提升應用程序的用戶體驗。


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

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

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

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



          無障礙設計、通用設計、包容性設計的區分

          ui設計分享達人

          無障礙設計、通用設計、包容性設計的區分

          無障礙設計(accessible design)指設計時必須考慮殘疾人,無論用戶身體是否有殘疾,(產品,場所和服務)都具備讓其自由使用的能力。

          通用性設計(universal design)采用單一的解決方案滿足盡可能多的人群的需要。

          包容性設計(inclusive design)是最廣義的、讓產品可以被不同用戶(包括不同身體能力、語言、文化、性別、年齡、性取向等)使用的追求。





          無障礙設計、通用設計、包容性設計似乎意思相近,在網絡上很難找到完全統一的說法,因而經常被混淆。我試著找出它們之間的關系,從而對這3個設計理念進行更好的理解與區分。

          一、什么是無障礙設計(accessible design)

          1.簡介

          無障礙設計是3個術語中最容易理解的術語,它指的是設計時必須考慮殘疾人,無論用戶身體是否有殘疾,(產品,場所和服務)都具備讓其自由使用的能力。比如法律規定所有的建筑物都必須方便輪椅進出。

          2.特點

          (1)對象:殘疾人(也有一些觀點認為是針對更大的人群)

          (2)解決方法與目的:通過設計讓殘疾人能正常使用

          3.缺點

          然而有時這樣的設計是迫于無奈而為并缺乏人文關懷。在美國,很多時候,“無障礙設計”在設計界只不過代表《美國殘障人士法案》的最低要求,不少設計師把《ADA法案》視為約束,而非創造平等共融空間的機會。因此無障礙設計存在的問題可以分為以下幾點:

          (1)缺少人文關懷,經常將殘疾人專用的無障礙設施與健全人使用的設施分離設置,造成了使用時的隔離感;

          (2)無障礙設計與其他設計產生沖突,例如在狹窄的人行道上鋪設行進盲道可能造成輪椅使用的不便;

          (3)一些設施或產品的應用人群過窄。



          如圖專為盲人設計的魔方,普通人很難使用。



          二、什么是通用設計(universal design)

          1.簡介

          通用設計最初的想法來源于建筑和室內設計,是1997 年北卡羅來納州立大學通用設計中心對通用設計提出的一個定義,此定義一直沿用至今:“一種不需適應或特別設計,而使主流產品和服務能為盡可能多的用戶所使用的設計方法和過程。”通用設計在生活中的應用很多,比如視頻的字幕,就是為了聽力有障礙的人群設計的,而聽力正常的人也能夠在嘈雜的環境下通過字幕受益。

          2.特點

          (1)對象:通用設計是旨在為所有設計的,它超越了無障礙設計,除了考慮殘疾之外還考慮其他的因素,包括年齡、性別、種族、語言等。

          (2)解決方法與目的:使用單一方案,解決盡可能多的人的需求

          (3)重視設計的結果,而不是設計過程

          3.缺點

          因為人是復雜多樣的,人身處的環境也是不斷變化的,采用單一的解決方案,是難以滿足所有人的需求的。通用設計旨在使用單一的方法為所有人解決問題,就不可避免的會遺漏一些人群。

          如圖的設計用一種方式同時方便了乘坐輪椅和提行李的人,和一些腿腳不便的老人等。



          三、什么是包容性設計(inclusive design)

          1.簡介

          包容性設計有時被視為通用設計的同義詞,但是他們之間還是有明顯的區別的。包容性設計是指:“不限于界面和技術的設計過程。在這個過程中,產品、服務或環境會針對有特定需求的特定人群進行優化?!彼鼇碓从跀底之a品設計,是對通用設計的進一步發展。

          微軟定義:我們的使命,是讓地球上的每個人獲得更多。設計的包容性開啟了用戶體驗,反應了人們如何適應周圍的環境

          2.特點

          (1)具有以人為本的特點,包容性設計認為是環境“殘疾”,而非個體,并且切實的將所有人的需求擺在了最前面,而不是假定一個“平均值”或“規范”來限定其適用群體。

          (2)給予選擇,以多種方式解決不同人群的問題,以避免邊緣化任何人。

          (3)重視設計過程,而不是結果

          3.缺點

          (1)成本較高,在設計的所有階段考慮所有人需要花費較長的時間成本與資金

          (2)可能會出現一定程度的冗余設計



          如圖,比如支付寶的老年版設計,就是包容性設計的例子。用戶可以自由的選擇使用,方便了老年人的同時不影響普通人的使用。


          與通用設計中的解決方案對比,這個樓梯考慮到了不同的腿部殘疾者,并做出了多樣性的設計。打球摔斷一條腿的年輕人可以扶著扶手走下臺階,而不是走輪椅的道路。



          四、總結

          無障礙設計、通用設計、包容性設計,每一個設計理念都是對前一個的補充與發展,都值得理解與學習,而其中包容性設計相對較優,并更適合用于數字產品的設計。


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

          文章來源:站酷  作者:o0WO0

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

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

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


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

          ui設計分享達人

          文章大綱:

          1. 淘寶為什么不淘了

          2. 淘寶的基礎內容設施

          3. 淘寶沒有種草經濟

          4. 讓人逛下去的產品設計

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

          6. 寫在最后



          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,但是要想經營一個優質社群,除了需要一批優質的內容創造者,還需要考慮后續涌現的用戶是否會對現有社群模式產生沖擊。(比如知乎開放用戶注冊后,導致內容注水的現象)


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


          過短的變現路徑必然會吸引一些用戶或者機構抱著獲利的心態涌入社群,這種逐利的心態,也有可能會影響專業KOL的創作心態。

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

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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