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

          首頁

          fogg模型的運用,讓用戶行動起來

          資深UI設計者

          通過研究分析,發現fogg模型可以幫助我們了解為什么用戶不行動,又如何利用fogg模型讓用戶行動起來

          前言

          我近期在做的一個項目,是成人直播在線學習的平臺,主要以書畫為主。

          我們發現用戶的到課率和完課率較低,所以我們花了挺多時間在研究分析用戶,討論用戶為什么沒來上課?用戶來了為什么沒有堅持看完直播?她們出于什么動機來學習的?又在學習過程中遇到了什么困難?……

           

          通過研究分析,我發現用fogg模型來解釋特別清晰,所以我特意深入了解了這一模型。所以就有了這篇文章。


          首先了解,什么是fogg模型?

          福格行為模型,是以BJ Fogg(斯坦福說服力科學實驗室主任)命名的,表明一個行為得以發生,行為者首先需要需要有進行此行為的動力和操作此行為的能力。接著,他們有足夠的動力和能力來實施既定行為,他們就會在被誘導/觸發時進行。

           

          fogg總結為一個人的行為產生需要三個要素:動力、能力、觸發。B=mat,即行為=動機、能力、觸發,三個要素必須同時滿足才會形成一次有效的轉化行動,否則不會發生。

          undefined


          具體來看,fogg模型的3個要素

          一、動機

          fogg總結的動機分為3類:感覺、期待、歸屬感,人的本能都是追求快樂,逃避痛苦的;抱有希望,逃避恐懼的;尋求認同,避免拒絕的。

          undefined

          拿書畫學習來說,為什么用戶會來上課學習?首先是感興趣,甚至喜歡和熱愛才來的,學習書畫

          可以讓她們感到快樂,愉悅身心,陶冶情操;其次會抱著學會和掌握的希望,幻想自己習得一技之長以后的樣子;另外通過書畫創作希望得到他人的認可和欣賞……

           

          結合馬斯洛需求層次理論,可以發現不同的人在不同的時刻有不同的需求,就會表現為不同的動機,越接近動物本性的需求,動機則更為強烈,只有低層次的需求得到滿足,才會追求更高層級的需求。

          undefined

          還是說回書畫學習的例子,用戶只有能感受都書畫魅力,在學習的過程中感到愉悅,她才會追求更高層次的需求,比如得到他人的認可,最后成名成家(自我實現)。

           

          二、能力

          能力是指有能力(人本身的能力)完成,并且完成這件事的成本是可接受的范圍內的。

          可以有兩種方式提高用戶的能力:1、降低成本;2、通過利益等誘惑增加用戶動機

          undefined

          1、降低成本

          至于成本,有幾個方面的成本:時間成本、金錢成本、體力付出、腦力付出、社會壓力、習慣力量。

          肯來學習書畫的人多少都是愿意付出時間和金錢成本的。

          體力付出呢,比方說,我們的產品當中沒有給用戶提供購買材料的鏈接,用戶就需要額外付出體力,可能是淘寶京東之類的電商平臺去選購,又可能是到線下畫材店去選購,那很有可能她就因此放棄了學習的念頭…

          社會壓力:比如說我之前一位做設計的同事,后來辭職去北京油畫村專注學油畫去了,那其實在外人看來就不是很好理解,這時候他其實是頂著一定的壓力的,也就付出了更多的成本。

          習慣的力量:比如平時有空都是跳廣場的王阿姨在李阿姨的鼓動下,也想學書畫,但是學書畫這件事破壞了她跳廣場舞的習慣,產生了額外的成本。所以除非王阿姨的動力很足,不然她很容易就打消了學習書畫的念頭。

          2、通過誘惑增加用戶的動機

          誘惑可以是利益相關的誘惑,比如說學習書畫,平臺定期舉辦活動或者比賽,評選優秀作品并送出豐厚獎品;甚至平臺有幫助用戶賣畫的渠道,可以額外增加收入或名氣,那用戶的學習動力也會大很多。

           fogg認為用戶最在的是成本,與其用更多的誘惑增加用戶的動機,不如想辦法降低用戶的成本。


          三、觸發因素

          現在用戶既有動機也有能力了,但還不一定能產生相應的行為,還需要觸發因素。

          觸發因素主要有:刺激、輔助、信號

          undefined

           

          刺激:當用戶有學畫動機了,也有能力,但是她可能還是會猶猶豫豫,這時候我們通過文案“零基礎,3-70歲都能學得會”,或許一下子就打消了她的顧慮,分分鐘領課體驗。

          也就是說,用戶動機弱能力強時,我們需要刺激用戶產生或加強動機。

          輔助:當用戶有足夠的學畫動機,但是不知道怎么領課體驗學習,那我們就需要簡化領課的流程,或者增加輔助,只需打個電話就能找到專屬的客服進行問詢和幫助。

          也就是說,用戶動機強能力弱時,我們需要幫助用戶,降低用戶的操作成本。

          信號:當用戶既有了學畫的動機也知道怎么領課體驗,但是還是難免會因為其他事情沖突而忘記了來上課,這時我們就需要在合適的時機給她一個提醒。

          也就是說,用戶動機強能力強的時,我們只需要在合適的時機給出提醒就行,不要有過渡勸說行為,反而會適得其反。

           

          說完這3個要素,再來分析我所做的項目,我利用fogg模型分析對比不同的用戶的動機、能力、觸發因素。

          undefined

           詳細項目方案:https://www.zcool.com.cn/work/ZNTU3NDY5NDg=.html


          單看動機,每類用戶的動機不足的原因是不一樣的,三十幾歲可能是感覺上不夠愉悅,畢竟她年輕不太能靜心領略國畫帶來的樂趣,這個和閱歷有關,心氣還不夠沉穩;而50歲以上的中老年人非常享受作畫的帶來的身心愉悅,但是期待感可能會不夠,總擔心自己老了學東西費力,學不會,沒信心。

          再看能力,也是各有不同的,對于三十幾歲的用戶而言時間就是金錢,所以她會比較看重學習效率,如果我們的每節直播課都是一個多小時兩個小時,那她就會覺得需要付出的時間成本實在是太高了,就容易放棄,反而我們告訴她,可以利用碎片化時間學習,那她還是愿意嘗試的;而四十幾歲、五十幾歲的用戶學習新東西的能力遠不如年輕人,并且他們的行為習慣已經非常固化,所以他們需要付出的成本更多的是腦力付出和習慣改變/養成。

          那這樣一頓分析之后,也就容易找到對應的策略了,這對產品設計真的很有幫助。

           

          fogg認為增加用戶的動機比降低用戶成本要難。

          確實如此,人的意愿很難被改變。用戶如果對書畫一點興趣都沒有,那這樣的用戶我們就可以直接放棄,而不是想方設法提升她的興趣,多次勸說反而還會讓用戶反感。我們要做的是找到潛在用戶,至少是有興趣,愿意嘗試的用戶,想辦法讓她們來上課體驗,并且在短期內入門,學習有效果,才有可能轉化成我們的VIP用戶。

           

          fogg模型在電商領域運用特別多,商家的各種套路不是在強化我們的購買動機就是在降低我們的購買成本。不知不覺中就買買買,尤其是各種活動促銷時,你有沒有發現雙十一買了很多東西,但東西寄到家后其實并沒那么需要或者喜歡,所以又退掉了……

           

          除了電商領域,fogg模型可以運用在各種媒介和場景中,比如我所做的這個書畫學習項目,提升用戶到課率和完課率為目標,可以用這個模型指導,換成提升轉化率或者轉介紹率同樣也可以用這個模型來指導。


          最后總結

          B=mat,行動=動機、能力、觸發因素三者同時出現

          動機主要體現在:感覺、期待、歸屬感

          能力提升主要有兩種方式:1  降低成本,2  提升用戶動機(利益等誘惑)

          成本主要有:時間成本、金錢成本、體力付出、腦力付出、社會壓力、習慣力量

          觸發因素主要有:刺激,輔助,信號

          文章來源:站酷 作者:酥酥d
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          2021-2022設計趨勢報告:動態篇

          資深UI設計者

          1. 動態在 UI/UX 扮演的角色

          動態能激發用戶的情緒,為靜態的視覺設計注入活力與生命力。有趣、奇妙、吸引人的動態,能讓你的產品展現與眾不同的魅力。另一方面,動態有助于支持可用性,通過自然流暢的物理運動,突顯元素在過渡時的關聯性與狀態變化,增強用戶對產品功能的感知。

          因此,動態設計必須是有意義的,同時兼具可用性與美感,UX 行業也將動態設計視為多學科的交集,細分成一個專業的設計門類。作為 UI 和 UX 設計中重要的組成部分,動態設計從三個層面發揮影響力:

          提高連貫性(Increase Continuity)

          讓界面元素在用戶流程中順暢地轉變與過渡,將用戶操作導向期望的任務結果。

          連接場景(Connect Scenes)

          在轉換場景的過程中扮演潤滑劑的角色,闡明場景之間的位置、層級與空間的關系。

          視覺吸引(Visually Appealing)

          聚焦用戶視線,將其注意力放在重要的事情上,從而起到信息傳達、提升識別度的作用。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          2. 動態設計趨勢

          植基于 UI 和 UX 設計而發展的第三維度,動態設計的趨勢自然與兩者密不可分。綜觀近年,多數作品巧妙地運用絢麗的動態圖像(Motion Graphics)與動效設計,讓新的視覺手法得以表現更為出彩。再者,隨著移動端芯片性能提升,跳脫二維平面的表現形式不再難以實現,讓設計師能夠解開束縛,發揮無限的想像空間。2021 年的動態設計可歸納為三個趨勢:

          增強表達(Enhance Expression)

          運用引人注目的表現手法將信息傳遞給用戶,包括變形、動態文字和背景動畫。

          創造層次(Create Hierarchy)

          在視覺平面中創建空間層次結構,遮罩與視差是常用的表現手法。

          擴展維度(Expand Dimensions)

          突破二維限制,將界面元素多維化營造空間感,例如 3D 動態圖形和攝像機運動。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          增強表達

          1. 變形 Morphing

          變形創造了一種連續的敘事狀態,告知用戶元素的狀態或作用發生變化,是一種最引人注目的表現手法,能將形狀、圖像、色彩無縫地融合與過渡。

          動畫插圖 Animated Illustrations

          2021 年看到許多有趣、吸引人的插圖,而更多的設計師開始為靜態圖像添加動態,也讓 GIF 和動畫插圖越來越受歡迎。

          動畫插圖看起來更生動,并帶有敘事性質。在示例中,運用動畫插圖來呈現這杯果汁是由哪些水果打成,比起文字描述更能吸引觀眾的注意力。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Lobster

          通過動畫插圖來呈現同一系列的轉變,有利于延續外形上的特征,讓不同的物體具有連結性。比如從桌子、衣柜到燈具的連續變化,同樣風格的系列家具利用動畫來體現一致性。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Graceful illustrations ?

          流體動態 Liquid Motion

          動態的有機形狀,包括流體、煙霧和火焰等粒子效果,能夠極大地增強視覺效果。流體動態并非明確的過渡與場景轉換,而是顏色在流動的液體中擴散,進而創造出抽象或真實的視覺形狀。這種風格能實現無縫過渡,并為設計增添有機感,也是 2021 年最引人注目的動畫趨勢之一。

          運用流體動態來展現抽象的有機體,除了輕易地攫取受眾目光,還讓人不自覺地佇足在畫面上,感受流體變化的韻律與美感。這類動態設計可作為烘托主題的背景動畫,或是吸引目光焦點的主角。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by ?anton mishin?

          流體動態運用到網站設計所營造的視覺沖擊力更為驚艷,能為用戶帶來獨特、新鮮的視覺感受, 使得流體動態深受風格前衛的設計師喜愛。網站還能利用鼠標懸停與流體進行互動,因此會在許多特效網站見到流體動態的蹤跡。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Gilles Tossoukpé

          動態漸變 Dynamic Gradients

          扁平化設計缺少現實質感的元素,搭配漸變色能有效緩解不足,為設計創造深度與層次。變化中的漸變色同時帶有動感與舒緩,充滿活力卻又平靜。使用動態漸變能讓設計師展示一系列不斷變化的情緒,許多內容創作者和品牌已經注意到這一點,開始在廣告活動、識別設計和數字內容使用動態漸變。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Pixelz Studio

          微交互 Micro Interactions

          用戶體驗設計中微交互變得日益重要,而動態設計正是微交互的靈魂所在,即使只是微小的視覺提示或反饋,都是人機交互易于使用的關鍵。從經典案例來看,微交互的動畫細節必須帶有明確的目的性,讓用戶獲得實時反饋,指導用戶進行下一步。從近幾年的設計趨勢來看,微交互已成為不可或缺的存在。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Илья Бабушкин

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Google

          動畫商標 Animated Logos

          過去幾年動畫商標是最流行的動畫趨勢之一,通過各種視覺效果,設計師能創造出不同類型的動畫商標,許多企業開始采用動畫商標作為吸引注意力的手段。多數情況下,商標是進入網站時最先看到的東西,因此商標應該令人難忘、引人入勝,并使用符號或排版來揭示品牌個性。結合動畫的優勢,設計師可以運用一些動態或效果來講述簡短的故事以強調品牌特征,并為靜態排版和商標注入一股活力。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Yulia K.

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Meta

          2. 動態文字 Kinetic Typography

          動態文字是使用移動文本來吸引注意力的動畫技術,許多卓越的品牌在網頁設計中使用動態文字,為網站外觀增添動感和視覺沖擊力,是近年 UI 動畫的趨勢之一。

          設計師使用動態文字為單詞或句子添加生動的元素,借此定下情緒氛圍與設計基調,吸引用戶的注意力。幾種常見的表現手法,擠壓和拉伸一個詞能會喚起一種俏皮感,而連續重復這個詞則具有催眠感和前衛感。另外,使用大號和粗體字體來增強份量以強調某些信息,也是動態文字的特征之一。

          無論在電商網站、電視廣告或音樂視頻,動態文字都占有舉足輕重的地位,有利于加深用戶對品牌的關注與印象。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by HOLOGRAPHIK®

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Hrvoje Grubisic

          3. 背景動畫 Background Animation

          通過背景動畫來強化敘事,成為許多行業常用的品牌傳播手段。你可以創建動態的品牌故事,展示有趣的制造過程、產品的使用場景。背景動畫深獲大眾喜愛,它能讓用戶在進入登錄頁或網站首頁時,輕易地了解更多有關公司或產品的信息。調研顯示,從銀行、醫療保健公司、電商零售商、餐館到 B2B 供應商,這些跨越不同細分市場和行業的網站都開始使用背景動畫。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Carlo Soleri

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Kirill Zhukovsky

          創造層次

          1. 遮罩 Masking

          遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物,等同于舞臺幕布設計,能在界面元素進場或退場時創造連續性效果。這種表現手法簡潔高效,是最常見的過渡動畫之一。

          切換場景 Scene-Switching

          其中一種遮罩過渡,是將當前場景完全置換,如同揭開蒙在上層的布,逐漸展露疊在下方的景,并利用景物相似性和動作延續性,讓兩個場景能夠順暢地銜接,不致于差異過大,造成用戶心理負擔。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by intent

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Minh Pham ?

          狀態變換 State Transformation

          另一種遮罩的表現形式,較無明顯的場景過渡,而是利用遮罩來表現景物的狀態變化,界面元素和布局基本保持一致,以此塑造無縫過渡的視覺效果,這種手法被廣泛地使用,例如氣候變化、人物換裝、產品組合等。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Daniel Tan

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Outcrowd

          2. 視差 Parallax

          視差是利用不同的界面元素以不同的速率移動,創造前后景深的分離效果,借此在平面中塑造空間層次,已成為網站首頁最為普遍的表現形式。

          視差之所以能形成一股風潮,廣為各個行業所接受,一方面是信息層級更加清晰,明確定義各種元素的關系,讓用戶專注于主要操作和內容,將背景或非交互元素往后退,同時保持設計的完整性。另一方面是豐富的層次變化,當用戶滾動或滑動時,能在扁平化界面拉開空間關系,利用不同的速率和縱深,塑造多層次的感官體驗。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Studio V?R

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Studio V?R

          擴展維度

          1. 3D 動態圖形 3D Motion Graphics

          近年來,結合 3D 動態圖形的界面設計呈現爆炸式增長,雖然創建 3D 動畫需要更多的時間、技巧與協作,但不可否認的,3D 動畫比 2D 圖形更加逼真,從而提供更具吸引力和互動性的用戶體驗,并有效地展示品牌的活力。

          更生動的表情 Lively Emoji

          動畫的吸引力在于能夠創建各種角色,并為無生命物體注入生命力,表情符號就是一個很好的例子。作為獨特的網絡語言,表情符號生動地描摹日常面對面交流的非言語信息,隨著圖形界面的設計趨勢逐漸結合 2D 與 3D,運用 3D 動態圖形來創造更加動感、擬人化的表情,能讓這些非言語信息更加豐富,有機會引領下一波風潮。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Outcrowd

          營造空間感 Spatial Awareness

          3D 動態圖形為平面設計建構了空間敘事框架,在扁平化界面中展現立體感,從而表達空間中元素的位置與層級關系。多維化的發展趨勢,推動了視覺表達形式的演變,空間感讓界面設計更符合人類的認知邏輯,運用各種 3D 運動特效,包括旋轉、翻轉、折疊、透視、Z 軸位移等,打造令人難忘的感官沖擊。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by UI8

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Bruno Ortolland

          擬人動畫 Anthropomorphic Animations

          擬人化能讓物體、植物、動物等非人類事物,表現出人類屬性的行為與狀態。動畫片運用擬人的手法是最普遍的,1927 年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們容易被以人類行事的事物所吸引,越來越多設計師在界面中添加擬人元素,利用這種效果讓畫面更加生動有趣,增強用戶體驗的愉悅感。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Gregory Riaguzov

          2. 攝像機運動 Camera Movements

          在動態設計中,攝像機運動是最自由、靈活的一種表現形式,能讓畫面過渡更有張力,突破 2D 平面在視角上的限制,創造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動,包括推近、拉出、平移、跟拍等方式,備受動態設計師青睞,讓用戶以多變的視野探索數字產品。

          推近/拉出 Dolly In/Dolly Out

          推鏡頭是指被拍攝的對象不動,攝像機由遠而近,朝著對象不斷推進, 用來突出人或物的主體。鏡頭推近的運動方式,用來呈現從整體到局部、由分散到集中的變化,引領用戶進入故事情景,給人一種身臨其境的感受。

          相反地,拉鏡頭則是將攝像機后退,使畫面逐漸遠離被攝主體,側重的是從局部到整體、由點到面的轉變,強調主體所處的空間環境。隨鏡拉出的景象,能激起人們無限的想像。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Michael Crawford

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Ali Zafar Iqbal

          水平/垂直移動 Truck/Pedestal

          水平向左或向右,垂直向上或向下移動攝像機,使畫面不斷變化,讓用戶跟隨鏡頭視角一起移動,產生一種置身其中的感覺。這種運鏡方式,通常用于具體的場景,利用角色或景物的延續性來消除場景過渡時的邊界,表現出一種流動感,無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Netguru

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Minh Pham

          結合多種運鏡 Multiple Camera Movements

          運用多種攝像機運動相當普遍,既能擴大視野,又有很強的空間感,可以更加自由與多樣地展示不同視角和情景。比方說結合橫搖(Pan)、直搖(Tilt)和跟隨(Tracking)鏡頭,連續而詳盡地展示一個產品,由于畫面始終跟隨一個主體,有利于突出產品特征,并讓用戶從不同的角度和距離觀看產品,是一種增強臨場感和參與感的有效方法。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Sang Nguyen

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Paul Ilnitski

          一鏡到底 One Shot

          在電影中為了不將觀眾的情感和注意力割裂,使用一個鏡頭來完成全片的場景刻畫和敘事,這種拍攝手法被稱作一鏡到底或長鏡頭。連續鏡頭逐漸被運用到界面過渡,以此增強操作過程的流暢性,例如一氣呵成的購物體驗,或是貫穿全場的人物角色,其特點是給用戶最沉浸的感官體驗,無間斷地體驗整個流程。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Orizon: UI/UX Design Agency

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Minh Pham ?

          結語

          動態設計作為近年熱門的創作形式,廣泛應用到各個領域,逐漸成為設計的主流趨勢。受益于技術演進與發展,從創意生產到落地實現,動態設計的門檻不再遙不可及。設計師得以將想法轉化為生動、有趣的作品,并有機會創造新的表現手法,玩出許多新花樣,成為 2021 年動態設計的特色。

          本文歸納的設計趨勢,有助于啟發設計師對動態設計的想像,激發更多創作靈感,為靜態界面賦予靈魂,打造令人難忘的視覺體驗和品牌形象。



          文章來源:優設 作者:騰訊ISUX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          導航欄 Navigation Bar 的設計方法

          資深UI設計者

          導航欄(Navigation Bar)作為一個基礎控件,極高的復用率和看似單調的設計樣式,往往會讓人習慣性忽略其中隱藏的諸多細節,以及背后的設計原因。本篇文章主要探討導航欄視覺和交互上的各種組合可能性和相關設計細節點,希望能提煉出一般性的設計規律。觀點僅是個人粗淺的分析,如果有哪里說得不對的地方,希望大家多多指點。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          理解導航欄的作用

          導航欄是用來幫助用戶定位、導航、操作的基礎組件。既負責告知用戶當前所在位置,防止迷失,又負責連通頁面跳轉路徑,允許用戶在不同層級的界面之間來去自如。同時還承載了針對當前頁面全局性的操作。

          簡要概述導航欄的作用,有以下 6 個:

          1. 定位:告知用戶當前所在位置
          2. 導航:提供離開當前頁面的出口,即返回上級(適用于非一級頁面)
          3. 提供全局操作:一般是以圖標、文字、按鈕或組合的形式存在
          4. 扁平層級:以分類 tab 為代表,本質是將多個相關的同級頁面聚合在一起
          5. 增加品牌曝光:一般放置在首頁左上角
          6. 解釋頁面當前狀態:屬于瞬時狀態,動態變化

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          梳理導航欄常見的布局方式

          實際上,導航欄的布局方式非常豐富,除了上文提到的幾種基礎布局之外,還有許多復雜的布局方式。

          不同的布局方式體現了不同頁面的信息架構。

          為了方便描述,我將導航欄可以放置信息的部分劃分為左、中、右三個區域。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          接下來,我將從「結構簡單」到「結構復雜」的順序來討論導航欄的各種布局方式。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          突出視覺重點的 4 種設計策略

          視覺服務于功能,不同視覺權重背后對應的是不同功能權重。以搜索功能為例,不同產品、不同場景下,搜索功能的權重都是不同的。對于電商產品來說,首頁搜索是非常關鍵的流量入口,必須足夠突出,減少用戶的認知和操作負擔,使用戶更加順暢高效地使用產品。而對于不同產品或不同場景來說,搜索的優先級就未必有這么高。

          提升視覺權重的本質是將重要信息和次要信息「區分」開來,而建立區分的本質則是「建立對比」。

          我們以“搜索”功能為例。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          拆解視覺細節

          我們從以下幾個方面來拆解導航欄:

          1. 標題樣式
          2. tab 樣式
          3. 控件樣式
          4. 背景樣式

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          整理交互細節

          首先,我們要了解,頁面固有的層級結構決定了某些信息是常駐于屏幕的,另外的信息是隨著用戶豎直方向滑動手勢而滾動的。而導航欄絕大多數情況下是常駐于頁面頂部的。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          盡管導航欄一般都是常駐于頁面頂部,但仍有不同的情況要分類討論:

          1. 常駐區域無變化:導航欄不會隨著用戶手勢的滑動而發生變化。
          2. 常駐區域有變化:導航欄會隨著用戶手勢的滑動而發生變化。

          首先要明確,哪些內容屬于常駐內容。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          上方這種情況比較明顯,頭部區域是常駐區域,但要注意并不包括四個主圖標。

          我們再來看下面的案例。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          上述變化的本質是從「狀態 a」過渡到「狀態 b」。

          狀態 b 決定了常駐于屏幕的元素數量,這和內容層顯示效率息息相關,需要在頁面設計之初就考慮好。

          確定好了「常駐區域」和「被折疊區域」之后的交互就比較簡單,直接折疊相應內容即可。

          使用這種「狀態過渡」的思路,相當于明確了變化的起點和終點,之后就可以將精力投入在如何使兩種狀態之間的過渡更加自然。

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法

          當我們確定了「過渡變量」之后,我們只需要考慮如何安排變量如何入場(進入狀態 b)。變量的出場(撤出狀態 a)并不需要考慮,因為變量是跟隨內容層一齊滾動的,自然會被上層的導航欄遮擋。

          上方微信讀書的案例用了硬切的方式,過渡變量直接出現在狀態 b 中。通過觀察 iOS14 的信息,我們不難發現,iOS 系統采用的標題欄過渡方式是漸現。本質上沒有區別,細節上,漸現相對于硬切更加柔和絲滑。

          結語

          以上是我個人對導航欄相關的一些整理和總結。

          分別從功能作用、布局樣式、如何突出重點、視覺細節、交互細節幾個層面梳理了導航欄設計策略和設計思考?;A且復用率極高的控件蘊含了許多細節和門道,通過大量細致觀察總結出一般性的規律,希望我的文章能幫助大家看到一些平時可能會忽略的細節。

          文章來源:優設 作者:設計師doo
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          用戶調研實戰指南

          資深UI設計者

          由于產品性質和業務階段,身為B端設計師更加需要貼近一線場景,深入了解業務邏輯和用戶使用場景,在不斷深入的用戶調研中,也收獲了一些心得和經驗,所以和大家分享一下我常見的三種用研方式,相關物料可以通過文章底部的原文鏈接得到獲取方式


          一、認識用研


          1.1設計師為什么需要了解用研


          我們對產品進行設計探索的本質是利用已知信息去挖掘未知信息,最終利用獲得的信息進行決策的過程,信息的完整、準確程度與判斷力、等共同決定了決策過程中錯誤決策的概率高低


          用研的過程就是一個信息的收集與處理的過程,在信息不足時我們可以通過同理心來“側寫”用戶心智推測信息,這一點從事C端設計的小伙伴應該感同身受,但由于B端用戶畫像與設計師自身往往偏差較遠,單純的通過同理心來感知用戶心智的門檻和難度較大


          此時我們就需要通過用戶研究的手段獲取更準確更完善的信息,通過用戶研究,設計師可以貼近一線場景,了解用戶的真實場景和工作訴求,切身感受到產品的業務邏輯和使用鏈路,以便我們進行更準確的設計決策,同樣的,這樣也可以讓我們的設計方案在講述時有理可依,有據可靠,更容易獲得上下游的信任


          接下來是我對于可用性測試、用戶訪談、問卷調研的學習總結,簡單與大家分享,大家有什么見解也可以互相交流


          1.2用研的緯度


          這是《贏在用戶》書中經常被人用到的用戶研究二維分布圖,這幅圖很好的展示了用戶研究的緯度,橫軸是研究用戶的結果;縱軸是理解用戶的方式,行為、態度,即觀察用戶做什么、聽用戶說什么,因此,用研主要通過定性調研和定量調研分別關注用戶的行為或者態度


          那么什么是定量,什么是定性,行為和態度之間又有什么樣的關系,在正式進入用研工作之前,有必要對這四個方向進行一個簡單的了解


          定性與定量


          定性與定量是用戶研究中常用的兩種方法,兩者之間性質和分析方法有一定的差異


          • 定性研究主要回答“是什么”和“為什么”的問題,是對種類或者質的差異的分析,說白了就是通過經驗、邏輯、同理心等非量化的方式去分析【主觀】的信息

          • 定量研究,除了能告訴我們是什么以外,還能告訴我們“是多少”,一般指具體【客觀】的數據信息



          通過上述示意可以發現,定量更加在意得出的數據,至于為什么會得出這個結果,就需要通過定性數據去驗證,因此定性分析在一定程度上會更偏向于闡述某件事物的意義


          二者是站在不同的角度看待問題——定量關注數,定性關注人,在實際工作中定性與定量往往相互配合,例如通過定量挖掘關鍵數據,再用定性剖析原因,最后定量進行驗證,兩者結合以求得研究效果的最大化


          行為和態度


          行為主要是指用戶的某種動作,比如操作時的點擊、滑動,以及視覺的關注點、肢體語言等,這些都是下意識,無需思考的行為數據,這些數據可能與信息層級、傳遞效率、操作時長、交互鏈路等息息相關,觀察收集這些行為數據的最終目的是了解用戶為何按照自己的方式進行操作,與我們預期設想的路徑有什么不同之處,進而探究是什么促使用戶做出的行動


          態度則是用戶的主觀想法或者情緒,情緒會誘發用戶產生一系列行為,例如操作遇阻時的焦慮,對產品體驗不滿的憤慨或者Aha moment時的驚喜這些都反映出了用戶對于產品當下體驗的一個態度,關注這樣用戶態度就能收集到產品體驗的信息,所以,用戶行為導致了某種結果,態度則揭示了影響行為的根本原因



          在了解了定量與定性,行為與態度之后,我根據目前工作中常用到的可用性測試、用戶訪談、問卷調研,并對每個方法的適用場景和進入調研的關鍵動作進行詳細分析



          二、如何選擇用研


          在開始進行用戶調研之前,我們需要根據具體情況確定調研形式,以便實施后續的展開工作,根據用研目的、產品設計階段、頻次、所需樣本量和成本等多方面因素進行考慮,選定適合當下情況的調研方式



          三、用研執行關鍵動作


          A. 可用性測試


          1.準備階段


          1.1明確測試目的

          首先應該以目標為導向,確定需要測試的產品是什么,想要驗證什么樣的結論或者達到怎樣的預期,是為了發現產品或原型中可用性的問題,還是借此與競品進行有效性、效率、滿意度的比較,或是對某些功能點進行測試


          1.2設計測試任務

          在明確測試目的后開始設計測試任務,測試任務是可用性測試的核心內容,需要根據已經確定的測試目的結合用戶在實際使用過程中可能存在的場景和需求,將任務場景化,然后對復雜任務的整體流程進行拆解,列出任務列表,以此來編寫任務提綱


          任務包括場景,操作和具體目標,設計的任務要有代表性,對應的功能或模塊必須是功能使用的典型場景、盡量模擬用戶真實的使用場景;在任務描述時做到語言簡潔,避免指定的操作或引導用戶,若任務流程較長,可以進行拆解形成多個用戶觸點,但觸點操作不需要告知用戶,僅在用戶操作時進行觀察即可

          1.3 設定衡量指標

          在設計好測試任務后,我們需要為任務匹配對應的可用性指標,目的是為了通過指標反應測試內容的可用性問題,幫助實施者有重點的進行觀察和記錄,還可以結合ASQ量表幫助測試者對每個測試任務的完成情況和滿意度進行反饋


          可用性指標主要包括有效性、效率性、滿意度;這三者構成了衡量指標的一級指標,而每個一級指標下還包括更加細分的二級指標及衡量方式和標準,這就構成了可用性指標對照表;我們依照可用性指標對照表對每個任務的重點有了基本的概念,并且可以根據具體任務描述和衡量指標得到測試記錄表

          現在我們對每個任務的可用性指標有了基本的概念,但是可用性問題除了從實施者角度去觀察用戶行為和結果,還需要幫助測試者結合任務進行自評和反饋


          而在幫助測試者進行任務反饋時,需要將有效性、效率性、滿意度站在測試者的角度進行更加通俗易懂的拆分和信息傳遞,并且能夠做到量化分析,這也就是ASQ評估量表的作用和目的


          有效性可以理解為任務的完成情況,即成功完成、求助后完成,未能完成

          效率性則是針對特定任務,觀察其完成時間是否在正常范圍內,其任務完成路徑是否符合標準路徑,是否存在偏離和猶豫的地方,在進行定量研究時常用指標有任務完成效率、理想路徑偏移率等

          滿意度則是用戶自我報告數據,包括任務完成難易度評價、任務完成滿意度評價、及評價原因


          根據場景描述、測試任務、節點反饋和ASQ評估量表,我們可以得到“任務卡片”,“任務卡片”可以幫助用戶快速進入角色,明確內容,量化反饋,在每次任務完成后,將測試者所勾選的ASQ選項對應的分值相加,便可以得到任務評估分值

          1.4準備測試腳本

          可用性測試一般情況下需要兩人協同配合進行,通常一人安排任務鼓勵用戶發聲,一人觀察記錄,由于涉及內容較多,成本高樣本含量低,對被試用戶進行的活動任務也比較復雜且環環相扣,所以為了保障測試任務更好的實施,一般情況下會準備一份較為完整的測試腳本以供團隊更好的配合


          一般測試腳本包括自我介紹、訪談預熱、測試規劃、測試任務、量表問卷(可選)、結束語、記錄文檔、相關文檔


          1.5準備測試原型


          1.6招募用戶

          用戶可以大概分為新手用戶和專家用戶兩種類型,當然也可以進行更精細的劃分,例如(萌新、高淺、活躍、專業)在招募時為了結果可靠,應避免產品設計相關人員的參與,選擇有代表性的用戶,其中真實的產品目標用戶為最佳,測試者不宜過多,一般5名左右就夠了


          例如調研XX產品的直播教室的可用性問題,就需要招募已在平臺入駐且售賣直播課的老師,在招募時還需要進一步的篩選,如果招募的5名老師都是長期使用平臺產品進行直播上課,用戶對于產品功能足夠了解,關注點會與新手用戶會產生較大的差異


          1.7準備場地

          包括預約測試場地、記錄設備、分配主測員和觀察記錄員、準備相關話術及活動禮物

          • 測試場地:一般選擇安靜明亮的房間/會議室進行,訪談者和用戶最好呈90度的座位

          • 記錄設備:安裝測試產品的電腦、手機;記錄設備可以使用錄音筆、相機或DV。設備要穩定,電量充足


          2.測試中


          2.1暖場

          在了解用戶情況和布置任務前,不要太直接的進入測試氛圍,營造一個相對輕松的交流環境。先聊點輕松的話題,“您從哪里過來的呀”“平常工作忙不忙”等問題,緩解氣氛,把用戶帶入測試場景??珊陀脩袅牧谋粶y產品相關的小問題,平時怎么用的?一般什么時候用?感受怎么樣等等


          2.2布置任務

          向測試者發放任務卡,結合任務卡中的角色和使用環境對任務進行簡單的介紹,如果是專家用戶任務就不用過多描繪場景,可以具象更具體的任務——“上傳一門新的課程、將課程分成基礎班和進階版分別售賣”等等


          2.3觀察并記錄用戶使用過程

          這個過程觀察記錄和引動測試者隨時的發聲很重要,與其他用研方式不同的地方在于可用性測試可以了解到用戶在操作時的想法和行為,用戶的發聲思考可直接影響可用性測試的效果和結論


          我們可以適當引導用戶進行思考發聲,甚至可以為用戶做一些簡單的示范,例如 在新建時,可以說“我準備新建一門課程”,“我正在尋找建班功能,我現在遇到一些問題”等等,將自己操作時的想法表達出來,不需要刻意去思考,這有助于主測員去了解測試者的想法和感受

          每個任務完成后,通過“任務卡片”重點回答測試者任務的完成情況,遇到的問題,詢問測試者的態度和感受,還需記錄任務完成的時間;與任務不相關的反饋可以記錄在備注中,而在記錄時盡量采用詞組、短句的快速記錄方式記錄核心內容,整理后作為優化任務幫助產品進一步提升可用性和易用性


          2.4進行量表問卷

          ASQ量表

          上面在介紹可用性指標及任務卡片時我們有提到ASQ量表,其主要涉及有效性、效率性、滿意度3個方面,安排在用戶完成單個情景任務之后,這時用戶對于任務流程的操作感受是最明確和清晰的


          SUS量表(可選)

          SUS量表一般在相對完整產品整體的大型可用性測試后才會使用,因為一般的中小型測試任務比較集中和針對,用戶無法感知整個系統,量表針對測試設置10個問題(有效性、效率、滿意度),包含5個選項:1分(非常不同意)、2分(不同意)、3分(一般)、4分(同意)、5分(非常同意)

          在布置問題時,奇數問題采用正面闡述,偶數問題采用反面闡述,以此來確保用戶評價的可靠性

          單個測試者提交量表后,我們需要計算量表分值,奇數項計分采用“用戶打分”-1,偶數項計分采用“5-用戶打分”,由于是5點量表,每個題目的得分范圍為0-4,共10題,所以最大值為40,而SUS的范圍在0-100,所以需要將所有轉換分相加后乘以2.5,即可獲得SUS分數

          3.測試后

          3.1問題歸類分析

          簡單測試直接根據發現的問題優化設計即可;如果目的是用于討論和匯報,需要對記錄內容進行整理和輸出,這時需關注問題的出現頻次、優先級和用戶反饋,按照問題維度分類,將不同用戶暴露的相應問題進行合并,羅列問題所對應的功能點、可用性指標、用戶比例、用戶反饋及相關現場記錄文件,之后基于問題對業務和體驗的影響劃分優先級并且標出對應的PM同學,最后針對這些問題給出優化建議


          問題優先級的劃分方式

          通過前期記錄觀察以及錄音錄屏我們可以發現用戶在任務測試中遇到的問題,根據問題對任務完成度的影響,我們可以劃分為P0(緊急問題)、P1(重要問題)、P2(次要問題)的方式對問題進行優化和排期

          • P0:用戶遇到阻力且無法解決,未能完成任務的問題

          • P1:用戶遇到阻力且反饋頻次較高,在求助后完成任務的問題

          • P2:用戶遇到阻力但可以自行解決,完成任務但感到不順利的問題


          3.2輸出測試報告

          較大的可用性測試在得出結果后需要向團隊內的成員分享,所以需要進行一次報告輸出做到內容對齊,一般包含整體概括、重點發現、項目背景、測試過程、測試結論、優化方案幾個模塊,具體匯報形式是不受限制的,一般文檔形式輸出較為高效,keynote匯報從內容和形式上會更加豐富

          • 整體概括可以將測試背景及測試結論簡單的闡述,其中測試背景包括(項目背景、測試內容、施測情況),測試結論包括(測試結論、優化建議)

          • 項目背景就不必多說了,將業務背景和測試目的進行簡單概括即可

          • 測試過程包括準備階段(如何招募用戶、招募了多少名、用戶的基本信息和類型;有哪些測試任務、如何進行測試和記錄形式)及測試階段(本次測試安排的任務、設計的量表問卷、現場的錄像照片)兩個環節進行展示

          • 測試結論需要將暴露的問題進行問題描述,結合整理的文檔表格詳述問題未讀和用戶反饋

          • 最后,結合問題提出完整深入的優化建議和解決方案

          3.3后續跟進方案

          • 探討解決方案:協調產品、設計等多個角色來探討合適的解決方案,要注意,設計時要思考新方案是否會帶來新問題,并再次通過可用性測試來驗證新的方案。

          • 持續跟進:了解項目結果的落地情況;已改進的問題或遺留的問題可在下個版本的測試中繼續跟進




          B. 問卷調研


          在進行問卷調研之前,我們需要認識到問卷調研包括兩種調研類型,定量調研與定型調研,實際上大部分的問卷都是定量調研,需要大量的用戶樣本,在收集問卷后需要分析數據占比來驗證用戶想法,另外小部分就是定型研究,一般原因是因為用戶樣本量較小,通過小樣本量來研究產品的可用性問題


          1.問卷前的準備

          1.1明確調研目的

          問卷調研中設計者并不直接接觸用戶,所以在問題的深度和廣度上是有限的,一份問卷不能解決多個問題,通常會圍繞解決1-2個核心問題去研究,在設計問題之前需要明確此次問卷調研的目的,然后圍繞這個目的去思考各種問題,通過怎樣的問題達到怎怎樣的結果


          例如通過思考和確認,針對我們這款由0到1的知識教育平臺型產品,其調研的目的主要在于

          • 需求驗證,包含對用戶進行市場分析、了解現狀、發現問題,從而提供解決方案,再到兩端用戶是否滿意現在的解決案

          • 用戶接受并付費的意愿如何。收集用戶信息、挖掘分析用戶的付費意愿以及付費習慣


          問卷的目的一般可以分為六個方面:

          1.2目標用戶分析

          對調研用戶進行分類是較為重要的環節,用戶類型不同,問題內容也不同,只有在不同角度不同用戶下設計的不同問題才會獲得有價值的結果


          這種情況在問卷中還是比較常見的,例如我們填完問題一后,根據選擇的不同,可能會跳轉到問題三或者問題五,這就是問卷設計者根據不同用戶分類進行的多種問題設計


          例如在收集知識平臺滿意度和相關競品使用習慣時,個人機構和組織機構的視角是不一樣的,B端客戶和C端消費者的視角也是不一樣的,所以在問題設計時需要分開對待

          問題根據用戶分類設計的好處在于問卷后期可以快速驗證產品的用戶類型和比例,提高調研質量和數據可信度,便于后期對用戶進行更加深入的調研


          舉例

          結合上面調研的目的及用戶分類,以此我們思考在問卷的設置方面:

          對于B端(老師)來說,首先要了解的是客戶目前是否有在使用我們提供的服務、什么時候會使用、使用的頻率是多少、目前使用的體驗如何、有沒有遇到什么問題、有什么建議、對我們提供的解決方案是否愿意接受

          對于C端(學生)來說,首先需要了解的是用戶基本信息,是否使用過課程相關的服務,用過哪些競品、吸引用戶的點在哪等等


          1.3內部需求對齊

          當需要有問卷調研的需要時,首先應該與團隊內部各合作方對齊調研意向,一方面是為了避免過量的問卷投放打擾到用戶,另一方面問卷調研屬于團隊項目,在團隊內部充分討論調研目的后或許你會了解到各業務方當下最關心的用戶問題從而調整調研問卷的內容甚至得到更好的解決辦法,這樣一來才能將問卷調研的價值最大化

          例如教育平臺側在新版本上線前為了調研售課老(機構)師對平臺使用的滿意度和深層次的需求問題,那么在發起調研之前,需要跟產品、教研、客服等業務合作伙伴對齊需求


          2.設計問卷

          2.1劃分問卷模塊


          設計具體問題之前,我們需要預設幾個問卷的模塊,通常圍繞幾個類型:用戶類、行為類、產品類、態度等,在得出完整的問卷之前,我們不需要考慮問題的先后邏輯是否合理,先根據調研目的和模塊類型進行問題窮舉,當用戶模塊相關問題寫完后再繼續寫下一個模塊的問題,直到所有模塊的問題都已經設想完畢,在對問題進行重組

          用戶類:收集用戶基本情況,方便我們了解用戶群體,比如:職業、學歷、團隊構成

          行為類:了解用戶的行為或者與圍繞產品相關但不涉及產品本身的問題。比如:有沒有在其他平臺入駐、售課時視頻課比較多還是直播課比較多

          產品類:了解用戶直接與產品相關的體驗問題。比如:對產品印象如何、一般使用某產品的哪些功能、頻率怎樣、還用過哪些競品、喜歡哪些功能

          態度類:用戶對產品的看法。比如:評價、好感、想要的功能;盡量避免提一些無法判斷、沒頭沒尾的問題,一方面對產品優化沒有幫助,另一方面會降低用戶的的期望


          2.2衡量問題類型

          問卷的問題形式是多樣的,題目類型主要有封閉/半封閉問題、量表式問題、開放式問題組成,需要根據具體目的來選擇相對應的問題

          封閉/半封閉題型的選擇在于能否將答案窮舉,避免出現用戶因為沒有合適的選項而隨便勾選答案的情況

          量表題型在答案上有明顯的程度高低區分,設計者對該問題有進行統計的需求

          在問卷中應盡量避免較多的開放問題,一般在針對某種方向/某個定性的問題做預探索時使用

          這里只對問題的類型做簡單的概述,具體的形式是多樣的,例如選擇題可以有單選、多選、圖片選擇;量表題除了打分之外,還有排序和點數分配等其他形式


          2.3問題重組

          在得到具體的問題后,我們需要對問題進行重新編排,通過改變問題的前后順序來保證用戶在可控的情況下進行真實的問卷回答,除了按照問題的難易度之外,還需要根據問題的屬性由淺入深的重組問題

          例如問卷開始先安排過濾題用于過濾用戶,識別用戶是否符合問卷的目的來保證問卷數據的質量,然后按照暖場型問題、漸入型問題、高難度問題、敏感問題來對問題進行重組,當然這些順序并不是固定的,需要依據具體的問卷內容進行調整

          關于過濾問題:

          用戶在實際問卷回答中,受到各方面因素的影響有很多,例如有時用戶出于自我暗示、自尊心或者時間緊張狀態下,很難根據自身實際情況完成問卷調研,而是隨機挑選或者作出相反的選擇,這種問卷在回收后會對定量分析造成干擾,所以我們需要依據問卷重要程度,安排適量的過濾題來避免此類情況的發生


          比如在對于關于產品改版的滿意度調研中,向用戶詢問有關產品功能的問題

          如果用戶回答“某某功能”,但在是否知道時選擇了否,或者使用時長很久,但卻不知道某某功能時,在后期數據中,可以將這部分無效問卷去除


          • 問題注意事項


          3.問卷投放

          3.1問卷評審

          一切準備就緒,是不是準備投放問卷了?別急,許多問卷在投向用戶之前,往往會忽視通過內部手段進行問卷自評,通過問卷自評可以發現這份問卷有沒有偏離最初的調研目的,你所設想的問題用戶是否可以正確理解、問卷是否有可優化的空間等

          一般自評包括3個環節:問卷自審、問卷內審、問卷內測


          • 問卷自審

          問卷設計完畢之后,需要根據最初確定的調研目的對問卷進行自審,可以站在用戶的視角對問卷進行第一次填寫,確定問題是正確有價值的,是有其他選項,也可以估算回答問卷所用時間,問題中的詞語是否能被用戶理解且沒有歧義等


          • 問卷內審(可選)

          不少公司內部有設立專門的用研團隊,在確立調研需求初期就應該與需求方深度綁定,有明確的需求認知,有句話叫當局者迷,邀請用研團隊參與審查可以從專業角度把控用研目標,評估問題是否能被用戶接受等,他們可以從一些不同的角度發現問題


          • 問卷內測(可選)

          內審之后,可以借助產品的代表性用戶(一般3-5人)進行問卷內測,通過觀察填寫情況來檢驗問卷設計的合理性,例如觀察答題時間、用戶類型與題目是否關聯等等,確保證問卷上沒有其他問題


          3.2預計采集樣本量

          內測完畢之后,就可以向用戶投放問卷了,為了避免給過多的用戶造成打擾,我們需要根據產品的用戶數量判斷問卷的投放數量

          一般沒有明確規范多少用戶投放多少問卷,基本都是自己判斷,一般如果總用戶量不足30,需要至少覆蓋50%(15個);如果總用戶量30-100,30人以上就可以;如果是總用戶量100-1000,覆蓋20%-50%就可以。


          3.3選擇投放渠道

          我一般常用投放渠道有:1)飛書推送;2)站內公告;3)其他內部資源


          問卷調研基本分為線上調研,線下調研兩種方法,線上通常是問卷投放或者電話詢問的形式,線下一般與用戶訪談相結合,做到定性定量相結合;選擇投放渠道時,一般根據調研目的、投放預算、預計采集樣本量、統計分析成本來進行判斷


          4.數據清洗產出報告


          一般用研團隊會使用專業的解決方案快速作出數據分析,比如SPSS,而設計師在實際工作中很少會接觸到此類工具,因為此類視角下探索的方向和內容更加具體,變量在可控范圍之內,不太需要復雜的分析模型,較為常見的更偏向Excel或者問卷平臺自帶的分析功能,所以我們可以對分析思路做一個簡單的了解


          4.1數據清洗

          前面在問題設計時我們有講到篩選題相關的內容,加入篩選題的目的就是在數據分析前便于我們將異常問卷剔除出去,保證最終結果的準確性,除了觀察篩選題的選項之外,我們還可以根據問卷填寫時長、量表打分規律、問卷填寫完整度等幾點進行問卷篩選


          4.2問卷分析

          • 看整體

          還記得我們設計問題的第一步劃分問卷模塊嗎?模塊通常圍繞幾個類型:用戶類、行為類、產品類、態度等,在分析問卷時可以基于這些結構得出一個較為整體的情況分析,例如用戶群體結構(用戶類)、存在的問題和新的訴求(用戶建議)等,通過對比相同角色的回答,找出共性的問題和信息


          • 看差異

          在得出整體結論之后,我們可以通過差異分析深入挖掘更多信息,例如觀察不同用戶角色對于產品的建議或者評分,會發現用戶角色對于產品的建議和需求是不同的,這種分析方法重點在于找到兩個可能存在關系的因素,通過對比不同角色的回答,找出差異和影響因素,根據上述舉例就是將(是什么)(怎么樣)進行差異對比


          • 問題歸類

          根據反映問題的模塊對用戶問題進行歸類分析,寫明用戶的問題描述和具體模塊,并且對后續優化提供解決方案


          4.3產出報告

          問卷報告一般包含調研背景、問卷回收情況、調研結論(功能優先級、用戶反饋、數據展示等)、整體評價(功能評價、體驗評價)、等,分析時從數據出發找出差異,分析原因,給出結論,在具體匯報時可以按照先結論后具體問題的方式呈現報告,同時可以結合數據提供相對應的解決方案


            


          C.用戶訪談

          1.訪談前

          1.1明確訪談目標

          明確訪談目標,可以保證訪談內容在大方向上是一致的,例如調研班主任實際外呼的場景及外呼時關注的信息,在訪談時就不會去問關于主講排課的問題,也可以防止訪談過程中遇到富有表達欲的用戶偏離主題,在訪談過程中難免有用戶興致勃勃的談論自己對產品的看法,在這種情況下,擁有明確的訪談目標可以保證深陷用戶的情境中不迷失訪談方向,保證訪談的最終結果是有價值的 


          1.2確定訪談類型

          根據不同的訪談目標,可以分為三種訪談類型:


          • 開放式訪談

          在圍繞的主題和問題上都是開放的,沒有固定的問題也沒有固定的答案,采訪者可以根據受訪者的表現進行相應的問題補充,受訪者可以充分表達自己的觀點和意見,氛圍最為輕松,接近人們日常的對話,適合進行定性研究。但即使是選擇了開放式訪談也需要事先準備訪談提綱來確保此次訪談是有效的


          • 結構式訪談

          有嚴格的問題順序,采訪者必須按照順序和題目提問,受訪者回答的答案都是固定的A、B、C、D,這就需要采訪者必須有一個很清晰的目標,在問題的設計上要仔細推敲和打磨受訪者可能回答的形式,當然,再縝密的設想在實際訪談中也會有意外,所以也會設置一些開放性的問題讓受訪者可以自由的進行表述,并給出更加開放和深入的回答,適用于定量數據的研究


          • 半結構式訪談

          是實際工作中運用的最多的一種形式,在形式上是結構式與開放式的結合,包含了固定的的問題之外,也設置了開放式的問題,根據訪談時的受訪者的實際情況進行問題的增減,適合定性+定量研究

          按照訪談的途徑來劃分,又可以分為線上和線下兩種,在受訪者不方便的情況下可以進行電話訪談的方式來進行,但是如果訪談包含較為復雜的經歷和過程的詢問,線上訪談比線下訪談要遜色不少


          1.3設計訪談提綱

          明確訪談目的與訪談類型后,就要基于訪談目的,擬定訪談提綱,訪談提綱是方便與用戶交談過程中抓住核心,保證訪談高效有序進行的關鍵,就類似一個標準流程,保證需要研究的問題都可以包含在內,訪談提綱一般包含五個部分,分別是訪談目的、開場白、提問訪談、用戶演示、結束語(基本信息、過往經歷、產品感受、流程體驗、競品體驗),其中提問訪談可以根據具體的訪談內容展深挖細節或者發散問題

          提問訪談是提綱中較為重要的一環,問題設計要由易到難,由淺入深,由邊緣到核心,在開始階段設計一些簡單的開放式問題來營造訪談的氛圍,這個過程中可以了解用戶的基本情況或者對產品的使用情況,等訪談向一個方向聚焦時,再逐漸收縮問題范圍,逐步追問核心問題

          設計好的問題還需要整理成訪談記錄表,在進行訪談、時,一方面按照訪談清單大綱盡可能的進行脫稿提問,另一方面則需要記錄用戶對于問題反饋,記錄問題時記錄員最好記錄用戶的逐字稿,以便于后期進行記錄整理時不與用戶表達產生偏差


          1.4招募用戶:

          用戶招募是較為重要的一環,承接訪談前后兩個階段的關鍵節點,用戶招募準確,后面的訪談才有實際意義,招募哪些用戶是由訪談目的所決定的,一般招募環節分為三部分


          • 1.41.明確目標用戶

          招募用戶的選擇是由訪談目的決定的,不同的訪談目的所招募的用戶是不一樣的,一般按照使用產品深度的緯度來劃分用戶

          • 核心用戶:產品中較為活躍的用戶

          • 邊緣用戶:產品中即將流失或者已經流失的用戶

          • 潛在用戶:當前并不是產品用戶,但在產品定位的用戶群體中


          而訪談目的一般有兩種情況

          • 研究產品所存在的問題,例如研究一下最近用戶活躍度為什么下降

          • 研究產品目標用戶所存在的需求,例如研究用戶對新功能的滿意度


          所以如果訪談目的是發現產品現存的問題,那么應該去尋找核心用戶,他們那對于產品有著明確的認知;但如果為了增長,則應該尋找邊緣用戶和潛在用戶,他們會告訴你他們需要什么,你需要做什么


          • 1.4.2多渠道招募

          面向內部用戶的產品進行用戶訪談時,一般直接找對應訪談者的leader或者pm溝通即可,而在對外產品時則需要根據確定的篩選條件進行用戶招募工作


          核心用戶的招募相對邊緣用戶較為簡單,一般可以通過行為日志數據、登錄時留下的聯系方式、產品用戶群或產品內運營推送推送來招募核心用戶


          潛在用戶由于對產品接觸較少,一般通過問卷、外包招募、熟人推薦的形式進行招募

          • 1.4.3驗證目標用戶并邀約

          在得知用戶是否愿意接受訪談后,需要再次驗證這些用戶是否真的符合樣本特征,要注意的是,篩選訪談對象要注意平衡,避免同一類型的對象占了過多比例,導致訪談結果不全面

          例如做一次關于學習平臺APP的功能優化訪談,就要避免對象大部分是管理者、80后的情況,因為用戶不是目標用戶、80后用戶的需求頻率不大

          很顯然,90后/95后/00后、大學生/剛進入職場的職場新人才是我們的目標用戶,那就根據這類人群的角色模型來篩選邀約對象


          1.5準備場地和物料

          • 場地選擇

          用戶訪談的可選場地有很多,大部分是請用戶到公司來使用公司的會議室,或者有的公司擁有休息區或者共享空間,環境較為舒適和溫馨,也是可以的


          需要注意的是,場所的選擇也會對訪談有些影響。應該盡量選擇溫馨舒適的環境來打消用戶的緊張感


          • 物料

          采訪者需要提前準備好物料,包括訪談記錄表、訪談提綱、錄音設備;訪談時可以一人負責提問,另一人負責記錄,在使用錄音設備對受訪者進行錄音時,需要提前告知并取得同意


          2.訪談中

          2.1開場白

          在一切準備工作ready之后,可以進行訪談了,訪談中難免遇到一些不善表達的用戶,如果一開始就切入正題進行訪談,訪談者可能在緊張的狀態下無法與采訪者達成信任關系,氣氛就會有些尷尬


          所以需要先進行簡單的寒暄和自我介紹讓氣氛輕松起來,還可以簡單介紹訪談的背景、流程、內容、時間,告知受訪者今天只是探討問題,沒有對錯之分,所以希望暢所欲言,不要掩飾真實想法

          2.2訪談并記錄

          還記得咱們前面準備的訪談提綱嗎?在進行簡單的暖場之后,我們可以先對用戶的基本情況和使用經歷進行詢問,從職業、流程、愛好等基礎信息作為切入點,為用戶營造特定的使用場景,然后再進入訪談環節


          訪談時,拋出問題的目的不僅僅是得到用戶的一個結論,而是希望用戶借此將自己的體驗和前因后果告訴采訪者,然而很多時候,用戶告訴我們的信息都比較淺顯,比如“我想要個xxx功能”“我覺得xxx挺好的”,這時我們需要對用戶想法刨根問底,從而證實用戶說的“想要xxx功能”是否合理,或者看能否想到其他解決方案


          • 如何刨根問底?

          1、結合梯子理論,通過問用戶以下4個層層遞進的問題,來了解用戶需求和用戶心理

          • 屬性:對于這個產品,你最在乎什么功能?

          • 利益:你為什么在乎這個功能,它可以解決你什么問題?

          • 心理:解決這個問題,可以達成你什么目標?

          • 價值觀:你為什么在乎這個目標?

          2、情景再現

          回答提問時,用戶很少會去主動聯想具體使用場景下的體驗問題,比如當你問“上次旅行去哪玩了?”用戶大概率會回答“去環球影城玩,人特多排隊兩小時,玩了個什么叫鷹馬過山車,20秒,下次去絕對買優速通...”并不會告訴你怎么去的、以什么標準定的酒店、為什么選擇這個項目/地點,等等這些更想要了解的問題告訴你


          我們需要幫助用戶在基本體驗之上還原體驗的動機,引導用戶對使用場景進行還原,了解用戶當時場景下的行為,再針對場景和行為去挖掘用戶產生這種體驗感受的動機

          3、鸚鵡學舌

          復述的時候,有時用戶還會根據你的復述追加一些他當時沒有想到的關聯信息,比如“你的意思是。。。我的理解是。。。對不對?”這樣可以避免雙方理解的偏差,還可以總結提煉用戶的觀點。這樣又可以挖掘到更多內容


          2.3結束語

          在訪問結束后,我們可以與用戶一起快速回顧訪談的內容,如果用戶有提出一些意見或者建議我們可以再復述一遍進行查缺補漏,并將事先準備好的禮物或者酬勞送給用戶表示感謝,向參與度高,善于溝通的優質用戶表示保持聯系,留下聯系方式方便后續進行可用性測試或者再次訪談


          3.訪談后

          3.1整理訪談內容

          一般是在兩個用戶訪談之間的間隙進行筆記的整理, 將用戶的口頭語言轉換為書面語言,這樣一方面減少后續因訪談內容大量堆積而形成的整理壓力,另一方面可以根據上一場訪談進行復盤,從而對下一場即將開始的訪談進行內容調整,在整理時我們需要將重點放在用戶的提出的問題和負向反饋上

          3.2問題歸類分析

          整場訪談結束之后,我們會發現用戶會提出各種各樣的問題,我們需要依據問題的緯度進行分類,將不同用戶遇到的相同問題進行歸納


          問題歸納主要包含兩個部分,主要問題和具體問題,主要問題就是訪談中出現的較為明顯的反饋問題,例如“超7成用戶對首頁推薦的內容并不感興趣”,而具體問題則需要明確用戶反饋原因、對應的功能模塊和問題類型


          3.3產出報告

          訪談報告是至關重要的,一方面可以和大家共同討論發現用戶真實想法,另一方面也方便產研團隊根據問題關鍵點投入人力作出進一步優化,一般在訪談當天完成結論報告,時間有限是以關鍵結論為主,具體問題可以后續補充。訪談報告一般包含訪談背景、參與人員、用戶信息、主要問題、具體問題、用戶建議、優化建議


          總結

          本篇文章是我學習到的用戶調研的三種方式,調研方式不重要,重要的在于如何理解用戶需求,真正了解用戶想要的是什么,無論B端還是C端,產品最終還是要服務于用戶,作為設計師同樣需要了解用戶研究,只有對用戶足夠了解才能作出高體驗質量的產品



          文章來源:站酷 作者:Hia'laing
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          2021 出鏡率最高的 7 種網頁 UI 風格

          資深UI設計者

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          看完這一波網頁 UI 類設計,再也不愁接下來該如何做設計創新了。

          圖與線疊加

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          這是今年出鏡率比較多的一種設計風格,不管你是在 Dribbble 還是 Behance 上都能見到它的影子。這種風格設計最大特點:形式感、聚焦、簡約而不簡單。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          當然還可以是將線圈與文字疊加圖片,有一種層疊縱深布局感受。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          又或者說圖形只是作為裝飾作用。

          純文字版式

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          純文字版式在今年版式中出鏡率也是相當之高,包括深圳設計周官網也幾乎都是幾個大字排版。其實我們仔細思考,將文字放大處理,有點圖形化的意思。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          上圖是典型的文字圖形化,將文字轉化成線性設計。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圖文混合

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圖文混合設計風格大膽、新穎,讓人眼前一亮。這種版式布局一般會出現在設計工作室網站居多一些,追求形式感與觀賞性。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圖文混合設計,不光只是圖片與文字混合排版,還可以是圖標與文字、粗字體與細字體之間的混合穿插。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圓形版式

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圓形設計趨勢一直都存在,在網頁設計中出鏡率高也是毋庸置疑的事情。畢竟圓形本身自帶超強親和力、聚焦。設計用它可以解決很多枯燥的版式,讓畫面瞬間活了起來。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          還可以將文字處理成圓形,與圓形圖相呼應。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          文字輪廓化

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          文字輪廓化版式今年出鏡率尤其之高,將文字輪廓化設計處理,減輕了文字的視覺重量感,更像是將文字線條化設計處理。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          文字輪廓化設計還可以用在背景,作為設計裝飾效果。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          玻璃質感

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          玻璃質感設計趨勢,也是今年最火的設計風格之一。那么它在網頁出鏡率也是在下半年開始逐漸多了起來,也許是設計師發現這種質感細膩與折射光透露出的細節之美。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          使用線條

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          線無疑是圖形里面運用較多的,今年發現很多網頁中都加了線條作為版式裝飾,或者就是純線條版式設計,讓人眼前一亮,原來還可以這樣玩。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          線條在這里作用明顯,除了美學設計裝飾之外,它還用作信息層級區分。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格























































































































































































































































          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格








          文章來源:站酷 作者:功夫UX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          關于讓設計工作流程更加高效的思考!

          資深UI設計者

          項目的運作是需要多人合作完成的,在這個過程中會遇到內部和外部的各種的問題,我們這里主要討論的問題屬于內部問題,分人和事。


          一、溝通前,多站在對方角度思考


          項目大小不同,投入資源會有所分別,但是項目成員專業構成上卻都基本是一致的。大家的專業背景不同,相互并不了解各自的工作,思維方式也是不同的,大家在討論工作的時候也是習慣用自己熟悉的方式進行溝通,相同的事物會存在認知的差異,在傳遞、執行的時候產生偏差,從而影響目標達成的效率。工作中各自的工作都有不同的專業目標和標準,大家討論問題都是奔著解決自己的專業目標去的,目標不同,訴求肯定就不一樣。


          如下圖,只有三方達成共識才能做出“好的產品體驗”對用戶有價值、高滿意度的產品,缺少一方都無法完成這個目標。


          舉例:開發在實現一個頁面的時候,他們首先要考慮的不是頁面好不好看的問題,而是從實現角度考慮技術方案、難度、性能;設計則是考慮視覺上的美觀性、易用性;產品需求方則是考慮是否能滿足需求,達成目標數據;在這個項目執行過程中,如果大家都堅持自己目標不讓步,這個項目就很難進行下去,然后就有了“妥協”,項目的執行其實就是成員之間相互妥協、博弈的過程。這個過程需要項目團隊不斷的“磨合”,然后形成共識、工作上的默契。


          “妥協”這里不是退讓和降低標準,而是需要站在對方的角度思考,他為什么會要這樣做?他和自己的方案哪個更有利于項目,如果他的方案有利,自己需要做出那些改變和投入?(這里要考慮可行性);如果自己的方案更有利項目,那就需要闡述自己方案的優勢,有理有據說服對方接納;這個過程必然是順暢的,提升在執行項目時候的效率。


          二、項目過程中,及時同步信息并達成一致


          項目常見問題:項目從開始到結束會有很多個項目節點,在過程中因成本和難度,不斷修改設計導致的結果偏差;參與決策者較多,之間沒有達成共識,在項目不同階段完成決策,導致的結果偏差;因外部因數導致目標的變化等等問題…


          每個項目的流程都有不同的差異,但是多多少少都有上面提到的溝通問題和信息傳遞的問題,工作中我一直在思考如何更加有效進行溝通和同步信息。這里和大家分享交流一些心得和看法。


          1、優化流程中的溝通、信息同步

          明確流程節點上需要參與的人員,確保信息的同步觸達范圍;明確流程節點上需要完成的任務,并且有統一的輸出標準、評價標準,讓每一個人都清楚自己在做什么、如何去做;明確每一個階段所需要達成的目標,讓項目成員在項目進行過程中也清晰自己的任務,同時讓新加入、合作的同事快速了解項目,提升協作上的效率,完成一致的目標任務


          2、根據項目大小對流程進行分類

          項目流程模塊化,針對不同內型項目,明確任務需求模板:小項目(A任務) 、中型項目(A+B任務)、大型項目(A+B+C任務),


          3、加強目標在項目中的一致性,建立高效的決策機制

          通過項目階段任務評審,及時將信息同步給項目成員,建立由“項目核心成員”和“決策者”組成的“評審團”,有分歧和問題的時候快速決策,解決問題;避免只討論不做決策的會議,因為永遠都是沒有結論的


          項目經歷和思考


          再過往的項目經歷中,不同公司在不同文化背景下對于項目的流程管控和要求有著比較大的區別。


          • 互聯網公司文化是比較看中體驗的,這種思想是從上至下的,所以再遇到有分歧問題的時候大家有一個共同的判斷標準“這樣做是否會傷害用戶體驗?”,在此基礎上再去討論我們應該這么做,相對比較容易達成共識;

          • 在手機廠商做項目時,對用新增用戶的壓力沒有互聯網公司那么大,用戶量的增加主要看手機賣的好不好,怎么盤活現有用戶,提升活躍增加轉化才是目標。所以更加看中的是用戶運營,在挖掘用戶需求的同時,更多的是考慮如何吸引用戶;

          • 放在制造企業里軟件項目只是整個產品項目流程中的一部分,項目按時上市是優先級最高的目標,其他節點在此時間倒推,硬件的時間往往是很難壓縮的,不然賣出的產品質量無法保證就是很大的問題,所以往往可能被壓縮的就是軟件和產品開發的時間了(硬件產品項目相比互聯網產品其實已經提前很長時間規劃了,但是市場的變化太快)這樣的事情時常發生,也無法避免,所以只能盡早做好規劃、儲備才能從根本上解決硬件產品在軟件流程上遇到的尷尬問題。


          最后談點個人的觀點,現在科技發展迅速的大環境下,用戶被培育的忠誠度不高且善變。從鵝廠開始新起“微創新快速迭代”并不適合制造行業,也可能不在適合現在互聯網,因為現在的“爆點”事件都是發生在創新的產品上,微信不是QQ迭代出來的,大疆也是通過自己的不斷創新贏得了市場。想要做出領跑市場的創新產品,就需要挖掘更深層的用戶需求實現“創新產品的規劃和儲備”,想的更遠才能更有效率的創造對用戶有價值的產品。





          文章來源:站酷 作者:Midea_IoT_UED
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          如何在企業官網刻入品牌DNA?

          資深UI設計者

          我們可以從哪些維度強化品牌特質?我們在保留天虹品牌DNA的同時,實現新業態的呈現升級,向市場展示一個嶄新的天虹。

          如果聊起中國的零售巨頭,我們一定不會忽略天虹商場(現“天虹數科商業股份有限公司”)最初所占據的一席之地。天虹是國有控股的上市公司,自1984年天虹注冊成立后一年,第一家天虹商場——天虹深南店開業,正式開啟零售業的征程,成為全國零售業的先行者之一。


          天虹成立的30余年來,歷經了經濟發展的巨大變化所帶來的市場繁榮,這也使消費需求多元化成為不可逆的潮流,越來越多中國零售企業采取了多業態發展戰略,零售市場從過去的百貨商店、副食店一統天下的局面迅速發展成為多業態并存的市場格局。


          目錄


          01  項目展示

          02  天虹品牌分析

          03  天虹品牌DNA及核心競爭力

          04  天虹新業態的呈現升級

          05  從多維度強化品牌特質



          天虹品牌分析 


          過去幾年,天虹不斷在全渠道方向轉型,突破傳統購物模式,踐行數字化、體驗式、供應鏈三大業務戰略,大力發展線上線下一體化的智慧零售商業模式。如今,它更把自己定位為一家提供生活解決方案的服務商。


          天虹零售行業數字化轉型正在如火如荼的進行,產品線的擴張讓目標客戶發生了變化,反觀消費人群對天虹的印象,仍然停留在天虹僅是一家老牌的實力零售國企的形象,天虹這次找到我們進行官網改版,目的就在于此——在保留品牌DNA的同時,實現新業態的呈現升級,向市場展示一個嶄新的天虹。



          天虹品牌DNA及核心競爭力 


          天虹自2008年確定新的品牌戰略以來,始終將“親和、信賴、享受生活”的品牌核心價值貫徹到底,天虹從事零售行業,貼近生活的脈搏,與生活息息相關,更是以“分享生活之美”作為企業使命。


          品牌DNA不可復制,我們率先從品牌的視覺資產切入,計劃在天虹新官網具體的視覺設計元素上,例如圖標、顏色、配圖等,結合品牌強化天虹DNA記憶符號,讓記憶符號給訪客在視覺、“觸覺”等感官上加深印象。


          一進入天虹的新官網,首屏上,一句“天虹,分享生活之美”的slogan配合自動播放的短視頻,點明了天虹十余年以來一直堅持的品牌使命,天虹對自己品牌核心價值的闡述,也穿插在新官網的各個版塊中。



          天虹的品牌Logo是一抹橙色極簡的彩虹形狀,同時也是一絲紐帶,意在構建一座通往利益相關者之間的橋梁,營造和客戶之間平等、親和、互相信賴的客群關系。


          在首屏接著往下,一句精簡的文案充分闡述了“天虹,分享生活之美”的品牌使命,同時應用了天虹logo一抹橙色極簡的“彩虹”元素,把品牌基因融進網站交互與視覺設計,能讓用戶自然地產生與品牌間的聯想,加深品牌印象。



          這樣給訪客加深品牌印象的設計不在少數,例如從“了解更多”進入到天虹企業簡介的Banner以及每個頁面的底部導航,都有從天虹Logo特征延展出來的圖形設計。



          色彩是一個非常重要的品牌基因。從品牌色延展的色彩方案貫穿應用到網站中,是最為常用的建立品牌印象的方法。


          用品牌色作為組件和高亮色自然是不用多說的:



          但是,色彩并非越豐富越好,過于豐富反而會干擾訪客對網站內容的吸收,我們根據品牌調性控制好品牌色的應用數量,有時候單色或者雙色的配色方案更能形成突出的風格和印象。



          大面積的色彩雖然能刺激用戶的視覺感知,但是也可能分散用戶注意力,因此,如果網站有更多資訊閱讀類的內容就不適合用過多的色彩,否則會破壞用戶的沉浸體驗。


          “分享生活之美”的主旨在網站中更多的表現在配圖上,除了剛剛展示的首頁視頻,我們還在各個版塊穿插了不同生活場景中有溫度的圖片素材,這些圖片素材流露出專注、有朝氣和親和力的氛圍,一定會讓訪客對天虹的好感油然而生。



          在各行各業競爭日益激烈的當下,企業歷經單一的價格競爭、廣告競爭和產品競爭等方面的競爭之后,企業的品牌具有區別和領先于其他競爭對手的獨特能力,能在市場競爭中展示品牌的內在品質、技術、性能和完善服務,引起消費者的品牌聯想,促進其購買行為,因此,品牌競爭力會逐漸成為企業的核心競爭力。


          在現如今的新零售時代,顧客體驗感的提升、用戶和線上+線下移動端多渠道的互動影響,讓企業核心競爭力不再是孤立的某一個因素。而天虹30余年以來,能夠保持自身的核心競爭力——品質與服務,這是天虹站在顧客的立場角度,去思考自身企業真正能夠帶來的價值,我們專門為此設計了一個【品質與服務】頁面。


          在品質上,除了闡述天虹一直貫徹并強調的經營理念,以及一直以來的踐行,我們通過呈現權威的認證證書、六項質量大數據以及天虹的質量管理規范,更強有力的證明天虹品質。



          同時,加入時間軸的交互設計,更清晰明了地向訪客展示天虹從1987年至今,為顧客保證商品品質所付諸的行動,以及所獲得的品質認證獎項。



          在服務上,我們分為顧客選擇天虹的服務之前、天虹服務顧客時、完成服務之后這三個步驟,明確說明天虹可以向顧客保證的服務品質。


          在顧客選擇天虹之前,我們運用七種顏色的交互動效,展示天虹可以給顧客的七重品質保證,每項保證都有針對性的服務承諾。


          這里還有一個在背后小小的設計想法,七種顏色正好對應彩虹的顏色,也正好和天虹的“虹”相呼應。



          為顧客提供服務過程中,直接列出了天虹五項顧客服務的基本準則,體現了天虹為實現品質服務的切實行動。



          天虹完成服務之后,分別展示四個場景、渠道保證顧客無憂售后。



          天虹新業態的呈現升級 


          天虹不同以往的是新業態的改變,要呈現具備科技力的天虹,我們在策劃品牌網站時要確定這兩大要素:


          • Who—天虹的目標訪客群體?

          • What—天虹正在做什么?



          Who 天虹的目標訪客群體?


          一個網站的誕生,是為了服務特定的用戶,在網站設計階段,產品經理通常需要把網站設計構想和思路提交給產品研發團隊、視覺和交互設計團隊進行網站的設計開發,我們的設計開發團隊如何才能清晰理解訪客的真實需求?


          那么,除了網站需求文檔、原型圖為主,還要把用戶畫像作為輔助說明,讓我們設計團隊成員在設計網站的過程中,對網站目標訪客群體有一個更形象化的認識。我們在這不做對訪客基本人物屬性的分析,而是主要分析訪客的使用場景以及訪客故事,從而對網站版塊、訪客體驗、訪客通過網站完成任務時的瀏覽路徑進行設計。



          經過一系列的訪客畫像分析,我們可以肯定的是,擴張了產品線之后的天虹,新官網的目標訪客也會面向更多群體,因此我們將會從這四個應用場景來決定建站方向:



          只有讓這四個目標訪客群體瀏覽了天虹的新官網,才能真正實現向市場展示出一個嶄新的天虹。


          What 天虹正在做什么?


          我國社會數字化轉型進程的不斷加快,數字化轉型是包括零售企業在內的所有企業,都繞不開的一個重大課題,它能夠為企業帶來新的發展機遇。


          對于天虹這樣的零售企業來說,便是借助數字化技術提升企業的運營效能、降低企業運營成本,構建新的數字化環境下新的商業模式是最終目的。在【智慧零售】版塊,正式介紹天虹數字化轉型發展的新業態。


          在為顧客服務上,天虹零售形式的變革是以交付為主要方向的變革,重塑全渠道零售形式之后,【天虹APP】與【超市數字化】把到店與到家等零售形式相融合,實現了顧客“所想即所得”的交付需求,助力了消費升級。


          我們在對應的展示版塊,附上相對應的使用場景圖片,以及天虹APP、天虹小程序的二維碼,更有利于訪客即刻體驗由單一的到店交付,到到家等多場景的便捷交付。



          天虹在進行數字化轉型中,還瞄準了一個重點是以數據驅動購物百貨運營模式的重塑,能夠實現原先由人決策、執行、協同,轉變為由數據決策、數據執行與數據協同。


          天虹購物百貨的運營模式在進行數字化重塑之前,僅是依靠商戶品牌形象+店內交易才得以完成交易,在【購百數字化】的說明中,我們展示了天虹“Before+After" 的數字化運營模式,向訪客充分說明天虹從智能方面尋求新的突破,通過智能設備與數據智能,從而提高了入駐天虹商戶的運營效率、降低運營成本的重要措施。



          我們明白,信息架構作為網站交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗才能夠有本質上的提升。在商戶服務上,天虹還做到服務產品化,我們分別從這兩類業務入手為訪客做好闡述:


          • 平臺業務:天虹在自己構建的平臺上為商戶提供各種經營工具及服務管理方案;

          • 數據業務:天虹會提供海量數據集成展示的看板給商戶。


          天虹具體賦能商戶的四項支持,我們遵循整站的簡約風格來做展示:



          【天虹科技子公司】則直接跳轉到靈智數科的官網,這是由天虹數字化經營中心孵化的數字化零售SaaS產品,為零售企業提供數字化轉型方案,這更能表明天虹未來在實體數字化深耕的決心。



          天虹在購物中心&百貨、超市、便利店的運營模式中迅速鋪開數據化、信息化、智能化的建設道路。其中,我們將天虹超市數字化運營細分為四個方面,真正做到可觸達、可交互、可洞察、可追溯。



          天虹微喔便利店同樣運用線上+線上雙模式,從四個方面共同打造天虹微喔的品牌力。



          在天虹新業態的展示中沒有做花哨的視覺和交互設計,因為當我們對信息架構有足夠的認知時,我們在設計頁面時才能有合理的思考方向,做出正確的設計,一家老牌的實力零售國企的數字化轉型,我們更傾向通過展示一些應用場景,將具象化的價值傳遞給訪客,能簡則簡。



          從多維度強化品牌特質


          消費升級時代的到來,數字化技術已經與傳統的產品和服務產生了緊密相連的聯系,正因有天虹這樣的企業率先進行改變,我們早已能在日常生活中切實感受到服務的優化和改變。


          我們團隊通過品牌梳理進行本次天虹官網的改版,從天虹的品牌DNA、核心競爭力以及升級新業態的呈現等多個維度來強化品牌特質和傳遞品牌價值。我們在新官網做到對三個方面的升級,真正做到向市場展示一個親和力與科技力并存的新天虹:


          a.更溫暖

          天虹從事零售行業,以“親和、信賴、享受生活”作為品牌核心價值,更是以“分享生活之美”作為企業使命,與我們的生活息息相關。在天虹新官網里,我們呈現了更多有溫度的生活化應用場景,讓天虹的形象更貼近用戶,更貼近生活的脈搏。


          b.更清晰

          天虹的數字化新業態轉型、品牌符號和視覺形象在新官網更清晰有力的傳達給各個訪客群體。天虹作為一家成立至今已有30余年的老牌零售國企,我們更傾向于謙虛地闡述天虹的營銷理念,保持良好的信息層級可以讓整體的瀏覽體驗感更好,而不是對品牌展示的過度包裝。


          c.更立體

          網站設計的過程是先發散后收斂,我們在動手畫原型、寫文檔之前,需要進行大量的思考和調研訪客實際的瀏覽邏輯究竟是怎樣的,也就是回歸應用場景。在天虹新官網的建設中,我們確定四個目標訪客群體來指導網站布局設計的方向,其中【洽談合作】、【投資者關系】與【人才發展】版塊的設計,讓天虹誠信、分享、創新和開放的形象更加立體,訪客或許會因此對天虹多一份信賴。


          文章來源:站酷 作者:增長超人
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端兩大設計系統哪家強?

          資深UI設計者

          編輯導語:有效地利用 B 端設計系統,產品設計師將可以更高效地做出更好的交互設計。那么前段時間發布的 Arco Design 設計系統,和已有的阿里 Ant Design 系統,二者有什么區別呢?本文作者對兩大設計系統典型頁面發表了他的看法,一起來看一下。

          簡介

          前兩周字節發布了自己的中后臺設計系統 Arco Design,在仔細閱讀官網文檔了過后,想和大家聊聊我自己對于 Arco Design 設計系統的與阿里的 Ant design 的一些對比和差異分析。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ArcoDesign 是一套設計系統的簡稱,是基于字節跳動所有的中后臺產品。ArcoDesign 主要服務于字節跳動旗下中后臺產品的體驗設計和技術實現,主要由 UED 設計和開發同學共同構建及維護。

          Ant Design 是阿里打磨出的一個服務于企業級產品的設計體系, 通過模塊化解決方案,降低冗余的生產成本,讓設計者專注于更好的用戶體驗。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          總覽

          Ant 和 Arco 兩者的前端框架都是基于 React 和 Vue,設計價值觀和設計原則也有所不同。Arco Design 基于「清晰」、「一致」、「韻律」和「開放」的設計價值觀,試圖建立務實而浪漫的工作方式。在「設計價值觀」的堅持上,Ant Design 有四點與眾不同:「自然」、「確定性」、「意義感」、「生長性」。

          我的個人理解 Arco Design 是站在設計規范的基礎出發點考慮,希望給用戶傳遞出來的價值出發,讓用戶深刻感受到系統是「清晰」、「一致」、「韻律」和「開放」的,而 Ant Design 所傳遞出來的價值觀似乎更加玄學或者說格局更高,上升到更高的思維境界,即大自然思想和社會責任。

          當然這部分的內容相對比較虛,每個人側重點想法都不同,大家可以自己去理解一下這部分內容。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B 端典型頁面分析

          接下來會從工作臺、表格、表單幾個典型高頻的 B 端界面進行分析,看看兩者的差別。

          1. 工作臺

          1)布局

          Arco 的卡片列布局靈活,基于 24 柵格進行布局,將整個柵格區域 2:2:1 的比例進行分割,信息卡片的寬度根據柵格寬度進行自適應,這樣的工作臺頁面既靈活也能夠滿足業務需求。

          Ant 的卡片列布局采用 3:2 比例進行布局,同樣是基于 24 柵格。目前主流的 B 端頁面都是以 24 柵格為基礎進行設計。3:2 還是 2:2:1 這兩種卡片布局方式沒有絕對的優劣,主要是根據我們頁面的信息量以及行業屬性去確定。如果工作臺所展示的單個信息量較多可采用少列大寬度進行布局,滿足信息展示的最優布局。

          作為 B 端的工作臺頁面,核心訴求是能夠清晰找到用戶想要的信息,想要做的內容,所以我們設計師要優先保證用戶能夠快速定位到核心的信息,快速到達要到達的功能。

          2)信息展示

          Arco 針對同系列的模塊設計了兩種尺寸的間距,例如歡迎問候信息與下方的數據信息之間是大間距,數據信息與下方的團隊動態最近項目之間是小間距。

          格式塔心理學的接近原則指出:接近的事物會被認為是同一個整體,擁有相似的功能或特征。所以在這里設計師通過兩種間距的留白對我們視覺進行暗示,強調信息之間的關聯程度,便于區分信息層級。

          Ant 在卡片方面沒有為卡片間距設置兩種尺寸,從上下到左右都是一種尺寸,這樣做的好處可以讓視覺更加對齊,顯得頁面更加規整,不好的一點就是內容區域外間距與卡片之間的間距一樣寬視覺上并沒有聚焦,顯得內容區域很散。標題方面沒有進行加粗重色強調,將內容進行突出,使用戶更加聚焦于內容。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          3)導航方式

          兩個系統默認都采用側邊欄導航方式,側邊導航在國內的 B 端產品當中最為常見的。將菜單欄放置在左側,頁面布局上基本為左右結構,將導航菜單放置左側固定。側邊欄導航擴展性強、展示靈活、能夠快速定位,缺點是不易閱讀、閱讀沉浸感低。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Arco 導航區域與內容區域都使用同類淺色,采用線的方式進行分割,整體視覺比較清爽。Ant 導航區域使用了傳統的重色與內容區進行區分。

          目前的設計趨勢流行淺色導航,有幾個產品的 WEB 端進行了一系列的大改,YouTube、Twitch、Twitter 都進行了重新設計,他們不約而同地將塊面去除,去掉多余的的灰色,通過留白和空間將頁面拉開。這否是下一個 WEB 端所要追尋的趨勢,我還不得而知,但是對于導航層級多的側邊欄導航,我仍然建議使用深色背景區分導航欄。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          有一個細節,在頁面背景有一個以登錄的用戶名形成的一個背景水印,在 B 端的頁面中,對信息的保密程度要求很高,這里是為了防止公司核心數據資料泄露,在截圖的時候會有水印的存在,增強了信息的保密級別,這是一個很好的設計洞察點。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          2. 表格

          1)表格樣式

          表格作為組織整理數據的手段,可以有效地向用戶展示數據信息,是 B 端產品中出現最高頻的模塊之一。

          用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化(關聯和區別)。好的表格信息展示設計,應當是能夠輔助用戶高效便捷地實現以上場景中的訴求。

          Arco 和 Ant 的表格設計樣式與市面上多數產品都類似,采用表格列無分割線條、表頭與內容左對齊、數字右對齊的方式。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          合格的表格設計要定義合理的表格行高,在具體設定表格行高時,由于表格中以文字信息為主,我認為可以參考文字排版的常用做法,將整個表格的行高分成文字行高、文字與分割線間距離,即上下間距兩部分來考慮。

          文字行高可以設定為字號的 1.2~1.8 倍,文字與分割線間距離可以設定為字號的 1~1.5 倍。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          2)信息展示

          表格行高決定屏幕內能呈現的行數,即用戶在一屏內能獲取信息的數量,主要影響用戶縱向對比數據的效率。

          在 B 端用戶使用場景中,數據量極大的表格的展示問題是體驗優劣的關鍵因素。對于 1920*1020(包含該分辨率)以上的大屏用戶,對于一屏顯示行數的感知不強,但對于 1366×768、1280*720 等這類小屏,顯示行數有限,用戶進行縱向數據對比的效率就會有所降低。在設計前,應當充分了解目標用戶的行為訴求,了解目標用戶設備屏幕分辨率的占比分布情況,有針對性的設置行高。

          B 端產品的特點之一是通用化,覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。產品為了讓不同用戶都能獲得較好的體驗,可以考慮把表格疏密度的設置開放給用戶,建議不是完全開放給用戶去調整尺寸,而是給出一定階梯度的快速選項,例如舒適、標準、緊湊三種高度來滿足用戶需求。

          Ant 的表格功能很齊全,很多功能都是 B 端產品的痛點,例如表格可以通過調整單元格行高來調整密度,緊湊模式下可以顯示更多的數據。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          3)操作路徑

          作為一個查詢表格,我不是很理解為什么 Arco 將查詢條件放置在表格右上角這么隱秘的位置,而將明顯的左上角放一個添加按鈕,如果存在多個查詢條件是不是要從右往左放置呢?這里我不是很理解,大家也可以說一下自己的想法,相互探討一下。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Ant 的表格使用路徑符合 F 型視覺動線布局,在 B 端的市場中這種表格的設計方式已經符合用戶的操作習慣了。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          在 2006 年時候,尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享,他們通過研究發現,用戶傾向于一種 F 模式去查看網站。F 模式,能很好地幫我們創建好的視覺層次結構設計,因為這是人們可以輕松掃描設計一種布局,它能讓大多數用戶感到舒適,因為我們用戶一直從上到下,從左到右閱讀。

          在設計之前,我們先要去確定哪些內容最重要,明確信息的優先級,只有清楚知道你希望用戶看到什么,才能將它們放在用戶視線熱點中。

          個人認為在表格設計的完整度和設計的合理性方面來看,阿里的 Ant 系統做得比字節的 Arco 更好。

          3. 表單

          表單在界面中主要負責數據采集的功能,任何一個表單都可以被拆解成三個最基本要素:

          標簽(標題)、輸入框和按鈕。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          1)表單布局

          Arco 的表單屬于復雜表單,當表單條目數在 7 個以上,可歸類到復雜表單,這時候就需要根據表單的復雜度、邏輯性、關聯性進行判斷,選擇合適的分組方式,進行歸納簡化,降低表單填寫負荷。采用 3 列布局,便簽與文本框上下左對齊,這樣的對齊方式有利于用戶瀏覽的效率、對齊的美觀以及國際化拓展頁面的對齊問題。

          Ant 的表單也是較為常規的布局方式,有一點差異就是文本框并沒有右對齊,這里阿里自己也做出了解釋:文本框是根據需要填寫的字段進行長度展示的,需要填寫內容比較長的文本框就會比較長。實際業務中,大部分 input 所需填寫內容都存在理想長度,input 的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。

          2)標簽對齊方式

          Arco 和 Ant 都使用了頂標簽的形式對齊。

          標簽分為左標簽、右標簽、頂標簽三種,不同的對齊方式,使用場景不同。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          該如何選擇呢?我們需要從 3 個方面進行考慮:操作效率、標簽長度、屏效、視覺對齊。

          ① 操作效率

          根據 Matteo Penzo 的研究總結得到的瀏覽時間表發現,標簽移動到輸入框的時間,頂部對齊最快只要 50ms,其次是右對齊 240ms,左對齊耗費時間最長 500ms。

          因此當以操作效率為主時,推薦使用頂對齊的方式。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ② 標簽長度

          當標簽長度超過 8 個字,或者需要考慮中英文雙版本時,推薦使用頂對齊的方式,其容納的標簽文字更多,拓展性更好,比如 Ones 的建任務的標簽,就采用標簽頂對齊的方式:

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ③ 屏效

          如果只考慮屏效,那么標簽左對齊右對齊均可,但是如果還考慮表單錄入效率,那么推薦使用標簽右對齊的方式,比如蜂鳥匯報:

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          顏色主題配置

          Arco 的顏色主題配置可以說是讓人眼前一亮了,可調整的范圍非常廣非常牛逼??梢跃庉嫷木S度從基礎的顏色、字體、陰影、 到組件的按鈕、導航、分類、表格 一共有接近 40 款組件的樣式,并且都是可以進行可視化編輯與實時預覽的。

          如果你用了 Arco 過后,或許不用苦苦地站在前端后面,讓他幫忙調整頁面,作為設計師自己就能夠搞定,并且每一個組件可以調整的粒度是非常之細,包含各種寬度、圖標大小、顏色、投影,等等…在這里可以編輯自己的主題,也可以在商城社區查看到別人發布的主題,真的是很方便啊。

          真的有些 amazing!假如你需要去設計一套官方的設計系統,完全可以通過 Arco 進行設計和預覽、落地。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Ant 并沒有做這方面的功能,顏色主題配置這一塊確實是 Arco 很大的亮點。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          總結

          無論是 Arco Design 還是 Ant Design 設計系統,都代表了字節跳動和阿里兩家互聯網巨頭公司在 B 端領域的沉淀和競爭。對于 B 端交互設計師來說,兩個設計系統都值得我們去研究和學習,建議大家都去看看設計規范里面的內容,對于我們認識和熟悉控件以及和開發對接都很有幫助。

          文章來源:優設 作者:哄哄
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何去做好響應式設計?

          資深UI設計者

          對于大多數網頁設計師來說,你的成品需要在各種類型和尺寸的設備上進行外觀和工作,這是顯而易見的。創建多個設計來實現同一目標的日子已經一去不復返了。


          這一切都歸結為選擇響應式或自適應設計模型,以實現任何規模的一致網站設計。


          但是響應式和自適應之間有什么區別?它們真的只是一回事嗎?讓我們來看看并解釋你需要知道的一切。喜歡記得關注UI范,每天更新,打造你的知識武器庫!




          1.與設備無關的設計的兩種方法



          就其核心而言,響應式和自適應技術在最終用戶看來可能是一樣的。創建設計和開發方法都是為了使網站在所有設備類型上都具有良好的外觀和功能。
          主要區別在你如何使用響應式或自適應技術創建網站。




          2.響應式設計



          響應式設計是任何使用網站的人的“家庭”術語。也許幾乎令人驚訝的是,它并沒有那么老。它是由Ethan Marcotte在 2010 年創造的:

          現在比以往任何時候都更重要的是,我們正在設計旨在沿著不同體驗的梯度觀看的作品。響應式網頁設計為我們提供了一條前進的道路,最終讓我們能夠“為事物的潮起潮落而設計”。


          而這正是我們目前關于響應式網站的思想學派的起點。




          響應式設計是一種技術,其中網站在任何給定尺寸下“響應”瀏覽器的尺寸,以便針對屏幕優化設計。理想情況下,用戶應該從單個網站獲得相同的體驗,無論他們是在只有幾百像素寬的移動設備上手持它還是在超寬屏幕顯示器上觀看它。

          響應式網站使用了許多你可能熟悉的元素:媒體查詢、靈活的網格和響應式圖像。它可能是針對多種屏幕尺寸進行設計的最流行方法。(純粹主義者會注意到響應式設計與設備本身無關,只與大小有關,而不是自適應,它在完美渲染的道路上檢測設備類型等。)

          根據交互設計基金會的說法,響應式設計更容易,實現的工作更少。這可能是它被更廣泛使用的原因。


          響應式設計師創建一個單一的設計,用于所有屏幕,通常會從分辨率的中間開始,并使用媒體查詢來確定將對分辨率標度的低端和高端進行哪些調整。這往往會讓用戶感到高興,因為熟悉的網頁設計似乎保證可以轉換到任何設備的屏幕上。均勻性和無縫性是提供良好用戶體驗的關鍵考慮因素。

          此外,由于涉及開發時間,響應式設計通常是大型網站的選擇。響應式設計植根于網格系統,響應式測量(考慮百分比或最小值和最大值)可幫助設計以不同的尺寸擴展、收縮和堆疊。
          這種設計技術是新開發的規范。



          3.響應式設計的優點

          • 無論設備或瀏覽器如何,該設計都適用于任何視口尺寸。

          • 響應式設計對搜索引擎友好(谷歌甚至推薦它)。

          • 允許設計中的很多精確度,以便設計師可以調整任何或每一個細節。

          • 高度移動友好的設計選項。

          • 與你可能用于網站項目的大量主題、網站構建器和工具兼容的常見設計實踐。

          • 該設計將具有統一和無縫的外觀,這將提升整體用戶體驗。





          3.響應式設計的缺點

          • 確保響應式元素在不同尺寸(尤其是較小尺寸)下仍保持可讀性和可訪問性非常重要。
          • 通常需要比其他網站更多的編碼,這可能需要時間或導致重量。重要的是要注意并注意這里。
          • 你無法控制所有設備尺寸,最終可能會設計出與舊尺寸或更模糊尺寸不符的設計。
          • 元素可能會在你身上四處移動,并不時以奇怪的位置結束,甚至由于核心內容管理系統或網站框架更新,因此重要的是要隨時了解變化。



          4.適應性設計


          自適應設計幾乎與響應式設計一樣古老。該技術于 2011 年首次使用,涉及針對特定設備尺寸和類型進行設計,以獲得更加個性化的體驗。
          這是來自MDN Web Docs 檔案的一個很好的解釋:“自適應設計更像是漸進增強的現代定義。自適應設計不是一種靈活的設計,而是檢測設備和其他特征,然后根據一組預定義的視口大小和其他特征提供適當的特征和布局?!?/section>

          設計植根于六種固定變化(寬度):

          • 320 像素

          • 480 像素

          • 760 像素

          • 960 像素

          • 1,200 像素

          • 1,600 像素


          自適應設計最常見的用途是將舊設計轉換為更適合移動設備的設計。這并不是說它不會發生在新的開發中。




          5.自適應設計的優點


          • 移動設備會告訴設計它們是什么,以便設計非常適合該設備和瀏覽器類型。
          • 自適應設計在事物的設計方面提供了幾乎精確的控制。
          • 智能廣告是一種可能性,允許來自智能設備的鏈接。
          • 自適應設計在速度測試中的得分往往高于響應式設計。
          • 該設計可以使用更多的個性化功能,連接到智能設備的使用選項和適配。
          • 對于需要刷新的小型網站來說是不錯的選擇,因為你只需“設計”較小的尺寸。



          6.自適應設計的缺點

          • 由于配置錯誤,您在設計時可能會遇到一些不太常見的設備(例如平板電腦)的問題。

          • 自適應設計可能是勞動密集型的,需要更多的開發時間和成本。

          • 由于內容重復,搜索引擎在使用自適應網站時會遇到更多困難。

          • 有一個偷偷摸摸的現實,你設計同一個網站六次。

          文章來源:站酷 作者:UI范

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

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

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


          創建設計系統前,6 件必須知道的事情

          資深UI設計者

          編者按:資深產品設計師 Taras Savytskyi 將自己在初創團隊中的設計經驗濃縮成為今天的這篇文章,如果你也是設計團隊中唯一或者主要的設計負責人,需要考慮到設計系統的問題,那么這篇文章的6個總結,應該能夠給你不少幫助:

          創建設計系統前,6 件必須知道的事情

          成為公司當中唯一負責產品設計的設計師,其實并不是一件容易的事情。你可能會非常忙碌,因為你需要處理很多事情。你需要考慮產品的設計,交付物料,和研發人員協作,在溝通會上做QA,做用戶訪談等等。

          此外,你可能還需要保持你的設計技能持續精進。比如 Figma 或者 Sketch 更新了新的功能,推出了新的插件,你可能需要持續關注。我們通常會使用 Figma 來作為主要的設計和協同工具,所有的設計、探索、頭腦風暴都在其中完成。

          我加入 Statflo 之后不久,作為公司唯一的設計師,我需要設計一個全新的 APP,在這個過程中我需要設計一個全新的設計系統,幫我足夠快速地創建后續的原型。

          1、無需猶豫,直接基于現有的開源設計系統

          創建設計系統前,6 件必須知道的事情

          剛開始的時候,你不需要太多的素材。你可以直接調用絕大多數的原子組件,比如按鈕、下拉菜單、表單、字體、配色,等等。默認初始狀態的樣式無關緊要,因為后續點擊幾下就能夠快速調整樣式。

          但是這也意味著,你需要在第三方設計系統當中,找到重要的、足夠靈活的、合適的組件來套用。你可以從下面幾個設計系統開始著手:

          免費: Ant Design Open Source, Lexicon DSL

          付費:Tetrisly , Venus Design System,73px

          2、主要關注基礎組件、顏色和排版

          創建設計系統前,6 件必須知道的事情

          在此之后,你如果要繼續推進你的設計系統,你需要首先關注幾件簡單的事情:配色、排版和基礎組件。

          完成這幾個部分能夠幫你更快地完成整個體系的搭建。比如你預設了不同狀態的配色,那么當你完成某個UI組件的默認狀態的設計之后,可以快速添加其他狀態的樣式。

          又比如,如果你不確定在輸入字段當中使用什么圖標,那么你只需要創建一個 16×16 的正方形,使用灰色填充,作為占位符,等后續圖標素材確定之后,再填充進去就好了。

          3、總是從一個組件開始設計

          創建設計系統前,6 件必須知道的事情

          當你是初創團隊中唯一的設計師的時候,你有很大概率需要自己構建一套設計系統。如果你想在這件事情上節省時間,那么最好的方法,就從你當前正在做的這一個 UI 組件開始,將其中所有的元素轉化為固定的組件,逐步拓展出設計系統。

          以這種方式來執行,可以節省大量的時間,并且這種方式能夠幫你更快明確哪些元素在一開始可能就是重要的。

          在理想情況下,你的設計流程是繪制小元素,然后逐步組件成為你所需要的組件,這樣的處理機制讓你無需花費時間來反復更新組件的設計。

          4、使用 Figma 當中的「Master」插件

          創建設計系統前,6 件必須知道的事情

          不過,以這種方式來創建設計系統的時候,你可能會碰到一個問題:你可能會忙于設計,而忘記將創建特定的組件,相反可能會復制一堆完全相同的畫板。這個時候,手動撤銷操作可能是一件極度麻煩和無聊的事情。這個時候,你就需要一個專門解決這種問題,這個插件名為 Master,創建者是 Gleb Sabirzyanov,它可以幫你將這些重復的畫板轉化成為一個固定的組件。

          但是這還不夠。如果你執行的操作足夠多,這些你所復制的元素可能已經應用多個畫板和頁面當中,這個時候,你需要借助名為 The Similayer 的插件,來幫你搞定相似組件的識別問題:它可以一鍵識別出分散在各處相同的元素,然后你可以將他們轉化成你所指定的 UI 組件了。

          創建設計系統前,6 件必須知道的事情

          5、利用項目間歇來完善設計系統

          有時候項目和項目之間是有間隔時間的,這個時間段就特別適合你去覆盤之前設計的組件,將其逐步改進融合成為一個系統。相信我,你在這件事情上所花費的時間,將會在你下一次創建新的功能和組件或者原型的時候,得到回報。

          我一直試圖在自己每周的日程表當中,騰出幾個小時的時間專門來做這件事情,幫我完成我的設計系統的增量更新和迭代。

          創建設計系統前,6 件必須知道的事情

          6、一開始不要糾結于正確命名

          在創建設計系統的過程中,尤其是當你在不同的項目過程中,各種組件總是沒法正確的命名。根據我的經驗,在設計的時候,怎么命名方便怎么來其實是很合理的,一開始一定不要糾結,留著在后面的階段再行解決都好,之后單獨梳理命名、路徑、結構、嵌套等等關系,比起你一開始做某個小組件的時候就糾結這些事情要更加合理,也更加方便。


          文章來源:優設 作者:VMIC UED

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

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

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





          日歷

          鏈接

          個人資料

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

          存檔

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