或這樣:在優先考慮所有功能之后,關鍵利益相關者改變了主意,您必須重新計劃所有事情。兩種情況都發生在我的團隊和同事身上。
功能優先級的成功或失敗是因為一件小事,在這里最終處決答案之前,我不會讓您感到疑惑。關鍵因素是選擇標準。但是首先是第一件事。讓我們看看可能出什么問題,然后我們將討論減輕這些風險的方法。
產品團隊努力做出正確的權衡,并在資源有限的情況下嫁入無數種選擇。通常,決策是協作活動的結果,例如點投票,價值對體積畫布,MoSCoW,Kano模型等。
盡管這些技術是由不同的人發明的,但它們的工作原理基本上是相同的:團隊成員將帶有所有功能構想的便箋貼在板上,然后將最有希望的構想入圍。打分或投票給這些想法打分,或者根據每個功能的可行性,可取性或創新性沿縱向分布它們。
當您邀請專家參加時,這樣的民主表現就非常有用,這些人是內在地知道這個話題的人,或者像丹麥物理學家尼爾斯·玻爾(Niels Bohr)說的那樣,“犯了當團隊中的每個人都是專家時,票數的分配將表明最佳想法。所有可能在非常緊張的領域犯下的所有錯誤”。
但說實話:講習班通常具有辦公室政治的味道。例如,一個研討會可能會吸引對您的建筑不感興趣的高能干利益相關者,或者您可能必須邀請失去動力并影響整個團隊工作的非必要專家。那就是為什么在房間中只有兩個或三個可以做出明智決定的人變得如此容易的原因。
并且,作為協調人,您急切希望提出最共識的意見,而當專家的聲音與非專家的聲音相同時,這就會成為問題。
即使,您有專家參與,他們也可以代表不同的領域和領域。因此,他們將做出不同的選擇。如此,即使對于有知識和熟練的人來說,理性思考也不是另一種方式。
人類必須應對許多同時發生的思維過程,并面臨180多認知偏見。啟動效應就是一個例子:在研討會之前一個人發生的事情會影響他們在研討會期間的行為。因此,如何確保專業知識(而不是個人喜好或情感)驅動功能優先級?
之后幾乎不可能猜測每個選擇背后的原因-除非您以某種方式提前支持理性思考。
商業并非全是娛樂和游戲:團隊必須根據數據做出艱難的決定,將自己的異想天開,品味和偏見插入門外。作為促進者,您當然不想根據利益相關者的喜好或當下的感受來做出業務決策,對嗎?但是,在許多練習中,“我喜歡這個主意”與“這將幫助我們的公司成長”一樣,值得信賴。
優先活動的另一個陷阱是度量系統,例如:
對一個人而言,獲得一定數量的選票或特殊計量單位的目的是為了在優先排序過程中平衡意見。但是他們沒有考慮有人對現實的看法有何不同,更不用說全球團隊的文化差異了。的方面可能對另一個人無關緊要。
例如,如果我聽到美國客戶說的是“好”而不是“很棒”或“很棒”,那我就知道自己有麻煩了。這意味著他們不太滿意。但是“好”是歐洲普遍贊美的表現。投票也如此:S大小的任務對內部高級布局開發人員來說是一回事,而對于市場顧問則意味著另一回事。
而且,現在很多人都精通“設計思維”和“敏捷”,可以下意識地操縱選票或有意利用尺度系統的模糊性來推動自己的想法。
如果團隊成員之間的爭執失控,您將花費大量時間徒勞,并且無法及時達成共識。嚴重惡劣的是,辯論最終將導致會議室中潛在的影響力的利益相關者所提倡的想法的被迫同意。那么,如何更好地處理優先級?
在我的一個項目中,我們正在設計一個復雜的解決方案,其中涉及技術,業務流程以及全球數百個人的專業知識。因此,我們不能狹義地定義功能的期望值(例如用戶滿意或可用),因為它不僅僅與最終用戶或界面有關。
我們的團隊確定了解決該解決方案中受益的五種利益相關者類型,并且我們提出了一個描述性規模來評估功能。它既考慮了利益相關者的覆蓋范圍,也考慮了該解決方案可以幫助他們解決的任務的重要性。
當然,我們可以使用1到5的簡單比例,其中1代表值,5代表最高值。但這并不能使我們清楚每個功能的價值在現實中意味著什么。從而,在真空中評估項目始終具有挑戰性?!暗汀庇嘘P什么?“中等”比例又是什么?公認會出現這樣的問題。
同樣,我們決定添加真實的描述。代替抽象的“低”,“中”和“高”,我們根據該功能的實現應涉及大量勞動力和金錢來打分。我們知道,可以在一定程度上決定所需工作水平的因素是我們可以自己完成還是僅與第三方一起完成。
結果,數字獲得了意義。
后來,我們創建了一個結合了多個特征的書呆子表。這有助于我們檢查某個功能是否具有均衡的合理性,可取性和獲利能力-簡單,是否可以做到,客戶是否期望并為企業賺錢。
根據您的項目,條件可能會有所不同。一個項目可能需要您評估潛在的收入和實施工作,而在另一個項目中,您可能必須重點關注易用性,預期的部署工作和估計的維護成本。如何,方法都保持不變:首先,定義基本標準,然后建立可行的量表,最后進行評估。
如何建立這樣的規模?從極限開始-最小和最大標記。1(或0)是什么意思?5、10或意味著什么?
當定義了最小和最大標記時(在上面的示例中為1和5),您可以為中間標記(3)然后為其余標記(2和4)寫一個描述。這種方法有助于在標記定義之間保持或多或少近似的增量。
在表中排名不同,畫布提供了更靈活的表示形式和更獨特的獲勝者。但是,如果使用模糊的標準,則可能會破壞整個練習。
從到高的標度的主要問題是它們的分類性質。任何想法的作者都不會承認它的價值不高。他們將堅持自己的立場,說服團隊成員將便簽貼放在“低-低”區域之外的任何位置。另外,您可能會發現所有“局外人”想法都屬于實力較弱的利益相關者。
“困難”可能意味著任何事情,但“需要外部專業知識和資源”可以更好地說明這種困難。期望值也不會:“解決已證明的嚴重痛苦”是一種過濾器,它不會讓有人提出沒有任何證據支持的想法-無論是用戶研究,客戶支持票證還是市場分析。
該方法簡化了優先級排序,但是以花費一些時間來準備規模,特別是在準備簡潔的部門名稱上花費了時間。
在使用這類畫布時,請注意交通燈的顏色編碼。對于最終的輸出演示文稿,這可能是一個不錯的選擇,但是在研討會中,這將增加偏見,使人們不愿意讓自己的選票最終出現在紅色區域。
投票是達成共識的快捷方式。匿名時,所有選票均被接受且權重替代。投票授權謙虛的利益相關者,并降低等級障礙。但是,這也掩蓋了每個單獨選擇背后的原因。最大的挑戰是,參與者需要以某種方式立即權衡所有可能的標準,并迅速選擇(并希望明智地選擇)。
在與客戶的許多計劃會議中,我都加入了經典的點投票,并且常常產生一些決定,我們稍后會完全改變。自然,我想避免雙重工作。因此,在一次會議中,我們嘗試了增強版,并為具有不同專業知識的人員分配了特定的顏色-綠色代表客戶語音的“保持者”,藍色代表有財務思想的人,紅色代表可以評估可行性的技術專家。
首先,這種方法使我們了解了人們在做出選擇時可能會想到的想法。其次,我們縮小了獲獎者名單。僅有幾張便條紙從這三種顏色中獲得了票數,并被同時認為對客戶有利可圖,有價值。
這種方法使我們能夠專注于最好的功能,而不會被單方面有前途的項目所干擾。通過經典投票,我們通常會有5至7名決賽選手。多元化的投票顯示只有兩個或三個符合所有標準的最高創意。
有一種話語可能會破壞優先級:“投票給您最喜歡的功能”,或者改寫為“現在選擇您喜歡的想法”。這些話打開了主觀地獄的大門,并向您的團隊發出了幻想和推測的正式邀請。
不要給這些無益的指示,而是要使人們處于理性的情緒中,并幫助他們傾聽內在的理性聲音。
主觀性是人性的一部分。我們不可避免地要做出情感決定,但是有一些方法可以使選擇減少一些偏見。主持人無法控制專家頭腦中正在發生的事情,但是我們可以嘗試使團隊成員處于正確的決策狀態。我推薦兩個基本的東西來簡化決策過程:
隨意使用這些 優先練習的Miro模板。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
項目有自己的生命周期,我們作為設計師也應該學會變通,在項目的不同生命周期采用不同的設計策略,脫離現實情況空談體驗往往難以推進……
設計的本質是解決問題,守住內核,保持匠心……
動效對產品的可用性體驗有多維度的影響。在界面中動效不僅僅是一種視覺裝飾,它能夠提升產品的參與度并擴展交流的范圍。
本文追根溯源,先從動效的起源講起,一步步推進與產品、體驗之間的關系,最后通過案例分析動效設計的原理和應用。一起來看看吧~
一、動效設計的起源
動效與用戶體驗的結合相對較新,其根源是迪士尼動畫設計的十二個條基本原理。迪士尼動畫原理是為了講故事而提煉出的基本的物理運動規律。這些原理能讓繪制的卡通角色移動和表演,但不能充分滿足現代UI界面的交互需求。
為了彌合這個差距,動效專家Canedo Estrada改編的《動效設計的10條原理》更適合應用到數字產品設計中。
在圍繞界面元素建立用戶體驗時,重新定位動效原理的關鍵在于:
二、動效設計與用戶體驗
在討論動效設計的原理之前,重要的是要強調動效不僅僅是裝飾,而是一種用來幫助用戶體驗的行為。動效設計涉及兩種基本的交互類型:實時和非實時。
實時
當用戶在屏幕上點擊UI元素時,實時交互提供即時反饋,會對用戶的操作做出即時響應。
非實時
非實時交互發生在用戶操作后,這意味著用戶需要經過短暫的轉場才能看到結果,然后再繼續。
另外動效設計通過四種不同的方式來提升產品的可用性:
1.期望:當用戶與界面交互時,他們期望看到哪些行為?動效是否符合預期或引起混亂?
2.連續性:交互在整個體驗中是否發生一致的運動行為?
3.敘述:觸發的動作是否與滿足用戶意圖的事件的邏輯進程相關聯?
4.關系:UI界面的空間、美學和層級結構如何相互關聯并影響用戶的決策?動效如何影響各種元素的關系?
三、產品動效設計原理
這里提供12種動效設計原理的解析,每一種對應不同的案例,從更直觀的角度來解讀抽象的原理。
1、緩動(Easing)
緩動效果模擬了現實世界中對象隨時間加速或減速的方式。它適用于所有運動的UI元素。下圖中的卡片和對應的椅子移動速度很快,但由于緩動效果它們可以平穩地受到控制。
2、偏移和延遲(Offset & Delay)
當多個UI元素同時快速移動時,用戶傾向于將它們組合在一起,而忽略了每個元素自身的功能性。
偏移和延遲會在移動的UI元素之間創建層級結構,并傳達它們相關但又不同的消息。元素的時間、速度和間距不是完全同步的,而是交錯排列從而產生一種微妙的“一個接一個”的效果。
當用戶在屏幕之間穿梭時,偏移和延遲表明存在多個交互選項。
3、父子關系(Parenting)
父子關系將一個元素的屬性鏈接到其他元素中。當父元素中的屬性更改時,子元素的鏈接屬性也會更改,同時所有元素的屬性都可以相互鏈接。
在下圖中,將父元素(藍色滑塊)的位置與子元素(燈泡發光效果&光照強度)相關聯。當父元素左右移動時,子元素的發光效果的范圍和光照強度的數值會發生變化。
父子關系在元素間創建關系并建立層級結構,允許多個元素同時與用戶交互。因此這種效果非常適用于實時交互中。
4、轉換(Transformation)
當一種UI元素變成另一種形式時就會發生轉換。例如,轉換展示了下載的開始、中間和完成狀態——下載按鈕轉換為進度條,進度條轉換為完成圖標。
從UX角度看,轉換效果告知用戶元素的狀態發生了變化并將信息傳遞給用戶,提高了用戶的認知度。
5、數值變化(Value Change)
數值的變化(數字、文本或圖形)在數字界面中非常豐富,從銀行APP到日歷到電商網站的各種產品中都會出現。
在某種程度上,數據的動態表達和交流可能會對數據的價值產生影響。例如下圖中的數值被動態引入,向用戶顯示他們有能力影響數據,提升了參與活動的意愿。
6、遮罩(Masking)
遮罩是對界面上的部分內容進行戰略性的顯示和隱藏。通過改變元素的形狀和比例,在改變元素效果的同時允許元素本身保持可識別性。因此,照片和插圖等視覺形式是理想的選擇。
從可用性的角度來看,設計師可以通過遮罩向用戶展示產品正在進行一系列的交互。
7、覆蓋(Overlay)
二維空間中沒有深度,元素只能沿X或Y軸移動,疊加在界面中創造出前景/背景相區分的位置關系。通過模擬深度,覆蓋可以根據用戶的需要隱藏和顯示元素。
在使用覆蓋時,信息層級結構是重要的考慮因素。例如,用戶在筆記應用中首先應該看到的是筆記列表,然后使用覆蓋來顯示每個筆記的輔助選項,如刪除或歸檔。
8、克隆(Cloning)
克隆是將現有的對象拆分成新對象,這是一種突出顯示重要信息或交互選項的方法。
通過克隆將元素與界面相鏈接,如果元素只是突然出現或消失沒有關聯性,那么用戶將缺乏信心去交互。
9、模糊(Obscuration)
想象一扇磨砂玻璃門,雖然看不清門后的東西但是我們能察覺到門后事物的存在。
模糊的工作原理是一樣的。它為用戶提供提示,讓用戶意識到自己正在操作的界面之后還有其他的層級結構。導航菜單、密碼屏幕和文件窗口是常見的示例。
10、視差(Parallax)
當兩個(或更多)元素同時以不同的速度移動時會構成視差效果。
視差的主要目的是劃分層級結構:
視差引導用戶點擊可交互的元素,同時允許非交互的元素保留在屏幕上并保持設計的統一性。
11、維度(Dimensionality)
維度使界面元素具備具多個方向的交互,這種行為是使元素看起來是可折疊、可翻轉、浮動的或具有深度。
作為一種敘述性工具,維度意味著元素的不同側面是相互聯系的,并且可以實現無縫的屏幕過渡。
12、平移與縮放(Dolly & Zoom)
平移與縮放通過視角的變化能產生更多空間上的體驗,逐級遞進顯示更高級別的細節。
平移:點擊元素后發生距離遠近的平移,用戶的視點會越來越接近圖像。(一個人拿著照相機走到一朵花前面近距離拍攝)
縮放:用戶的視角與圖像的距離保持不變,但圖像在屏幕中的比例會增加。(這個人站在原地不動,只利用相機的變焦功能使花顯得更大)
四、總結——動效即交流
互動體驗要求動效具備敏捷和微妙的形式。堅持動效設計原理,即使最基本的界面元素也能成為交流的復雜媒介。
動效設計與產品用戶體驗之間的關系正在迅速成熟,而且動效跨越了二維屏幕上元素的抽象運動和3D世界中對運動的感知之間的鴻溝。
文章來源:UI中國 作者:Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你覺得設計系統重要嗎?那目前手里的設計系統是在靈活運用?還是落灰、擺設?你對設計系統理解有多深?它在你的設計中有多大的用處?節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范?那怎么避免設計系統帶來了統一和便利,但同時失去了變化和新鮮感?
設計系統是今年來熱門的話題之一,想要帶來良好的用戶體驗,設計系統就是其中重要的一環,那它和設計規范、設計模式、設計語言、設計原則有什么關系?
設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔,在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色,文案,字體等等),所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的,是需要維護與改進的。
設計模式是一種經常性,可重復使用的解決方案,可用于解決設計問題,我們經常會說解決整個方案我們要運用什么樣的設計模式。
設計語言是把設計作為一種“溝通的方式”,用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。
設計原則可以理解為設計語言中的語法,是構建設計語言系統的起點,用于傳達品牌主張或設計理念,它將指引業務設計執行的方向。
比如Airbnb的設計原則可以簡單歸納為幾點:
設計規范對于設計師來說并不陌生,日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率,同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。
我曾經加入一個設計團隊,看到平臺風格不統一,當時很自豪很堅定的制定了一套平臺設計規范,從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系,還有交互方面。當時一心想著有這個規范寶典在手,平臺統一性指日可待,沒想到這個規范就成了我自己的規范,僅僅是我在自嗨。
為什么已經建立設計規范了,還是沒能解決平臺統一的問題?這里延伸出另一個問題,為什么其他設計成員不用?協作不起來?是它不夠好?我嚴格按照標準來,為什么推不起來?
那要追溯到設計體系的目的是什么?它的意義何在?
1-建立統一的設計文化體系
2-保證多團隊成員共同參與的項目視覺一致性
3-提升品牌調性
4-節省與研發人員的溝通成本
5-將元素組件化,提升設計師和程序員的工作效率
6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。
7-在用戶層方面,對某產品的體驗一致性得到落實
8-減少設計出錯率
……
整體可以歸納為
規范定義的基礎是圍繞某種風格或者設計文化。對內統一,一個品牌的設計風格,是要有別于同類競品的,比如阿里云、騰訊云,他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分,一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站,各個頁面的設計差異明顯,像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。
多個設計成員協同一個產品,迭代與更改規范都能更快的同步??梢栽囍胂笠幌乱粋€幾十人的設計團隊,如果沒有統一設計規范,那網站會變成什么樣子。
在UI還原中,設計需要經常與前端進行溝通“這里這里這樣做,那里那里這樣做”,對于每一塊的設計,前端都會詢問你,這樣大大增加了溝通的成本,把時間花在了無效的事情上。
設計規范統一后,減少了無效溝通,可以更專注創新方向,比如:要改變預先設定的一個輔助色,無論是設計還是開發,修改組件的顏色,全局使用到這個組件的地方都會改動,大大節省了設計時間。
做品牌的時候需要制定一整套VI規范手冊,那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式,更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂,看到界面都可以立馬識別出這是哪個app。
你能分出哪個是網易云播放界面,哪個是QQ音樂播放界面嗎?
設計經常碰到設計完后需要修改一個點,然后就要找出設計稿中所有相同的地方進行修改,這樣很容易漏,統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。
設計規范的意義這么強大,對網站及品牌有至關重要的作用,那為什么還會出現沒有應用起來的情況呢?
很多設計師會說:“設計不就應該是變化多端的嗎?就是要表現創新力呀?制定了設計規范是不是就失去了變化和新鮮感?那設計還有什么意義?開發都可以做設計的事情了?!?
這里就要看對設計規范理解的深度—設計規范是分層次的,平臺規范歸根結底是為了確保產品的易用性,是為了減少用戶的學習成本
底層基礎元素也可以說是全局樣式,比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素,給用戶一種統一的視覺形象,在跨界面、跨端、跨系統間有熟悉感,從而潛移默化地進行品牌的滲透。
對組合自由度較低的基礎組件做精簡的樣式變化限定,對組合自由度較高的復合組件減少過于局限的限定條件,考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態,多種可能。
設計規范是需要迭代的,而不是我只要制作出來就放那了,就像女生買衣服,去年的衣服已經配不上今年的我,嘻嘻
~~希望我每天都有新衣服穿,做夢中~
設計體系最大的重要性毋庸置疑就是規范節省人力,設計師可以更多的時間去發揮創造性。
很多設計師覺得統一了規范,那我的創造性從哪發揮,界面都長的差不多。在設計中,設計目的是解決商業或用戶的問題,并不僅僅是為了有創意而引入新的樣式或交互方式。
有了設計體系,統一了整體品牌風格,不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上,更多的回去關注更全局的設計策略。
它僅僅是設計軟件上可復用的組件,所以可由設計師獨立完成,這種想法是錯誤的,是需要來自不同角色支持和參與的,這里包括前端、品牌、動態設計、 用戶研究等。
有時候會想只要完成了規范就大功告成了,其實不然,對待設計規范就像對待產品一樣,是需要維護和改進的,包括兩個方面:一種是對內部使用的開發以及同事,一種是對用戶的,應該定期收集用戶以及同事的反饋,確保及時更新迭代。
1-提高設計開發效率,最顯而易見的好處就是,組件庫的可復用性。
比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。
2-確保設計一致性,為用戶提供連貫一致的用戶體驗,設計的一致性讓用戶能縮短的學習使用產品的周期,讓他們能夠預見他們的操作所帶來的改變。
網站統一的視覺規范、交互體驗,會讓用戶產生一種掌控感。
3-設計系統促進了公司內部的合作和交流,一個成功的設計系統是需要跨功能團隊參與,設計系統因此促進了公司內部不同職位的合作和交流,這種文化的建立也會幫助公司更有效地推出新的產品或服務。
已經了解了規范的目的/意義,那該怎么去著手呢?
在制定規范前期,不應該是一個人規定這個規范,設計團隊的成員應積極參與,前期先把規范的基調定好,人人都參與進來了,規范也就能更好的運營,當時我就是一個人定了規范,只是單純把規范發給其他設計人員,他們沒有參與,自然不會使用規范,對里面的設計元素沒有加深理解。
這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力,這樣能把紕漏降到。
大家一般說的設計規范是界面的視覺規范,從UI的定義,User Interface—用戶界面,用戶與界面之間的交互關系,可以歸納規范其實可以包含兩大類,一類是視覺規范,一類是交互規范。
視覺規范可以給用戶傳達統一的品牌形象,確保視覺一致性。后期的設計元素須復合規范的原則。
交互規范可以減少用戶的學習成本,讓用戶有歸屬感。交互規范在制定的過程中,需要寫好交互規則與條件,不然后期維護會混亂。像蓋房子一樣,地基都沒打穩的話,整個樓都是偏的。
那在使用規范時,一定要遵循規范里的要求進行應用,否則會亂套,不僅起不到統一的品牌風格,反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。
節點和公司的進度搭邊,看當前的產品是應該先獨立風格還是先統一基礎規范。
1-固定的設計風格規范,比如:google的“扁平”,微軟的“磁貼”,可以全局使用,并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊,定好基調,不會走偏。
2-不斷優化的設計規范,根據公司的節奏,有些產品目前比較迫切的是需要界面統一性、交互統一性?;A做完以后,進而考慮產品固定風格。這種比較適合小團隊協作??梢噪S時調整。
利用粒子構成的原理與三維解構,一個組件被科學的三維解析后由粒子再構成,理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變,高度靈活
建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。
并不是每個時刻都能夠直接使用完整的組件,元素是我們工具庫必不可少的部分,它可以更大的方便你修改組件,再造組件以及特殊的排版,方便拖拉拽。
規范組件命名,方便查找、方便協作。
一鍵導出/同步組件到Sketch模板。
標注方面,目前我們團隊使用的是藍湖私有化。
一般情況下,公司有不同的產品線,且都需要長期的開發與迭代。
公司中,越來越多的設計師加入,設計風格需要統一。
設計體系里面包含了設計語言、設計規范,需要與前端、品牌、動態設計、 用戶研究等溝通,還是需要迭代優化的,這是非常繁瑣耗時的項目,初期會非常的艱難,當設計師開始做組件時,也是非常耗時的工作,需要考慮不同場景下的使用情況以及設計的延展性,都需要投入大量的設計人力。
聊了這么多,大家對設計系統有了一定了解,建立好設計系統可以事半功倍,以此提升效率才能提升UED價值。
思考點:
1-對于設計團隊只有一兩個人的時候,是否需要建立設計系統?
2-你是否愿意把時間花費在前期建立設計系統,后期更多時間用于創造性地東西?
3-建立設計系統前很枯燥,你會怎么堅持,怎么讓設計體系價值更大化?
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在設計工作中,你可能會遇到這樣一種場景:甲方爸爸開發了一款產品,委托你進行包裝推廣,但是甲方對于設計將要解決的需求并沒有明確定義,或者只給出了行為層的建議,好比高端、大氣、上檔次,低調、奢華、有內涵balabala,甚至發來帶有魔幻主義色彩的參考圖,上來就要求出幾版方案先看看,這些情況在服務中小型企業時十分常見。
這種情況怎么辦?
無視甲方的奇葩要求?憑著自己的經驗干?還是順著甲方的偏好干?畢竟人家是金主吖?
恐怕都難有好結果。
對于設計師是自找改稿,畢竟你連將要解決的問題都不清楚,自然無法有效的論證“設計為什么這么做”,這就相當于把方案的主導權拱手讓給了非專業的甲方。而甲方如果思維跳躍“很有想法”,你就有改不完的稿子了。
對于甲方而言,則可能買回一堆無用品,畢竟方案出街后面向的用戶其實是甲方的客戶,靠設計師和甲方拍腦袋本身是舍本逐末,解決不了問題,用戶才是真“爹”。
so,一切以主觀為意志的設計行為都不明智,最終很可能落得一個雙輸的結局。
正確的做法是怎樣的呢?
這種情況下就需要設計師上升到產品思維的高度,與甲方溝通推進,乃至于進一步的用戶調研。
一個面向市場的產品,被制造出來一定是為了滿足市場上某一類用戶的需求缺口,否則它就沒有存在的理由。而設計是為產品賦能的角色,所以在確定設計將要解決什么問題,以及產生洞見的過程中,一定是圍繞“用戶需求”為中心,只有真正明確了這一點,你的設計才是有意義的。
那么,如何搞明白用戶需求呢?
接下來我會從“什么是用戶需求、如何通過做用戶調研、如何萃取用戶需求”這三個部分來和大家分享,如何通過洞察用戶需求,來幫助我們更好的設計。理解了這些能夠幫助你提升一個段位(配合收藏+點贊食用更佳)。
一、用戶需求都有哪些?
在介紹具體的方法論之前,首先你得知道用戶需求都有哪些。 人的需求通常可以分為“功能需求”和“情感需求”兩大類,分別由左右腦管控。
功能需求,是顯而易見的外在具體需求。
比如找工作你會關注工資、五險一金、福利待遇,買電腦會看內存、CPU、屏幕大小,點外賣會看價格、送餐速度。功能需求是用戶的“左腦”需求,也是用戶基本想要的東西。
情感需求,則是與之相對的,隱性的、抽象的內在心理層次需求。
比如這家火鍋店的服務太周到了,讓我感覺心里暖暖的,喝一杯星巴克,體驗到白領小資的情調,穿上這套西裝,讓我感覺自己像明星模特。情感需求同樣重要,它是感性驅使,用戶“右腦”情緒上的需求。
李叫獸曾在《十四天改變計劃》課程中的產品戰略模塊細分出了十類用戶需求
這些同樣可以歸納為“功能需求”和“情感需求”這兩大類。
A功能需求:低價、性能、便捷性、可達性、降低風險。
B情感需求:高端、定制化、新穎、過程體驗、理想自我。
給大家解讀一下:
A1-低價
低價,是解決了“用戶曾經因為價格原因無法獲得的,現在可以獲得了”的需求。
比如我們身邊各種無節操的促銷活動▽
拼夕夕動不動的砍一刀▽
拼夕夕一言不合就轟炸的紅包▽
這些都是切中低價需求的設計,low不low且不說,但它們是成功有效的。
反之如果把一個促銷頁做成買不起的樣子,那注定是個失敗的設計。畢竟商業設計從來不是自我陶醉的做出一些高逼格的東西,而是在不同情景下使消費者內心與行動上買單。
A2-性能
性能,解決的是“滿足用戶對某項功能追求”的需求
比如Intermarché 橙汁▽
為了進一步強調產品“新鮮”的特性,在包裝上白底黑字印上了超大的數字時間,表示生產日期。這一設計巧思,使產品上市當天便獲得5000萬次社交媒體曝光,一個月內銷量增長了4600%。
深澤直人的仿生包裝▽
通過對產品包裝的色彩、造型,甚至工藝質感上的直觀呈現,來表達產品“原生態”的特性,幫助商品在琳瑯滿目的貨架上脫穎而出,大大增加產品售出的機會。
A3-便捷性
便捷性,解決的是“降低非貨幣成本”的需求。
比如亞馬遜▽
amazon作為全球商品品種最多的網上零售商,所主張的就是“降低你線下購物的時間成本”,包括亞馬遜的標志傳遞的也是“從A到Z,應有盡有”的概念。
再到聯邦快遞▽
不論是標志中隱含的箭頭,還是對外的品牌創意廣告,都是在強調“24小時使命必達”的強大的貨運能力。解決的同樣是用戶的“便捷性”需求。
A4-可達性
可達性,是解決“獲得過去難以獲得的某些東西”的需求。
比如數碼相機▽
在膠卷相機時代,拍完了照片得洗出來后才能看到拍的好不好,而數碼相機的設計,讓你可以實時看到拍攝后的樣子,達到了以前達不到的功能,解決了以前不能解決的問題。
美圖秀秀▽
你可以讓自己變得更加苗條,更美麗。以前只有設計師經過專業學習才能P出好看的照片,現在普通人也可以輕易的對自己的人像實現美化。同理,都是“可達性”的需求切入。
A5-降低風險
降低風險,是解決“降低本次消費帶來風險”的需求。
比如神州專車▽
用滴滴你可能會遇到黑車、黑司機,之前也鬧出過這樣的新聞,神州專車則撿大品牌的漏,通過自營車輛專門解決打車過程隱患的風險,解決的就是“降低風險”的問題,在對外推廣中也都是在強調專業和安全。
以上是功能性需求,那么情感需求呢?
B1-高端
所謂高端,切中的是馬斯洛需求模型中的尊重需求“身份認同”。
比如小罐茶▽
我給朋友送禮希望擺上一盒茶葉,朋友就知道這茶很貴,不需要解釋也能體現我對朋友的重視,自然就需要穩定價格和品質的品牌。小罐茶則抓住了茶類的這一空白地帶,順利打入市場,設計的調性同樣都是圍繞這一策略服務。
B2-定制化
定制化,解決的是“滿足用戶特定功能與體驗”的需求。
比如檸檬盒子▽
根據消費者的健康情況,量身定制滿足消費者每日所需的維生素,從對外的廣告到帶有姓名的產品包裝,都是在強調“定制性維生素”的品牌定位,這種差異化打法,讓檸檬盒子從保健品中脫穎而出。
B3-新穎
新穎,是解決“消費者對過去陳舊市場不滿,追逐潮流”的情感需求。
比如味全每日的拼字飲料▽
通過包裝的貨架創意呈現,與消費者形成互動,最終形成社交媒體自傳播,上市后每個月的銷售額都有同比40%的成長。
Milgrad牛奶▽
最近也是在社交平臺上形成現象級刷屏,為品牌省下不少廣告費。
二廠汽水▽
去年夏天的老牌新造,成功逆襲成為網紅品牌,年銷近三個億。這些都是從情感性需求“新穎”的角度切入。
B4-過程體驗
過程體驗,是解決了“ 消除用戶在完成某個任務的過程中所存在的阻礙”的需求。
比如海底撈▽
餐廳高峰期經常人滿為患,排隊體驗差。海底撈則會在你排隊等待的時候,提供免費美甲、護手、零食...等等各種周到服務,贏得了口碑傳播。如果你留心觀察,你會發現海底撈的標志也是用了一個打招呼的氣泡Hi,來強調服務為先的品牌定位,解決的是情感需求中的過程體驗。
B5-理想自我
理想自我,解決的是“幫助用戶成為更理想的自己”的需求。
比如Odorono止汗劑▽
1912年智威湯遜著名廣告人詹姆斯·楊,在幫助客戶推廣面向女性群體的止汗劑時,砍掉了原來“出汗是一種疾病”的推廣策略,推出了一條新的至今人被人津津樂道的策略:“出汗將會影響你的人際關系,讓你不再受男性歡迎”,這一策略在美國形成現象級轟動,遭到女性憤怒的同時,也成功幫助Odorono打開了女性市場,是“理想自我”的典型應用。
受于篇幅,以上十點講的比較概括,這些案例很多都非常經典,感興趣大家可以自己百度搜索。
通過這些案例你會發現,設計其實有很多種“玩法”。
講這十點的意義,一是啟發大家在實際工作中思考多個角度可能性,先把思路做多,而不是只局限在通過設計強調產品的某一功能特點,接著著眼于形式,那樣很可能我們一開始的切入點就沒找對。
另一方面,讓大家對這兩類需求有更具體的認識,你會發現這些“玩法”都是基于用戶需求而存在,不是直覺或玄學更不是毫無章法的創意。設計是基于嚴謹思考推理的解決問題的過程,而解決的問題無非歸納為理性的“功能需求”與感性的“情感需求”這兩類。
那么應該如何發現用戶到底有怎樣的需求呢?支撐依據是什么?
固然不是靠甲方拍腦袋,更不是靠設計師拍腦袋,而是靠“用戶調研”。
二、如何做用戶調研?
想想看你都接觸過哪些調研方式?
常見的調研方式包括問卷法、后臺數據法、訪談法、觀察法等等。這些調研方式前兩者屬于“定量型”,后兩者屬于“定性型”,它們有不同的側重點與優缺點。
1.定量型
定量型調研側重于“廣度”,是通過大數據,量化用戶的行為偏好。包括:
●后臺數據法
通過產品APP或者平臺的后臺來提取用戶操作數據,來獲取用戶的選擇偏好。
舉個例子,比如你將要設計某個電商產品詳情頁,那么你就可以提取該電商平臺的后臺數據,通過品類下關鍵詞的搜索詞頻,來獲取用戶的真實需求,作為設計方向的指導依據。具體可以參考南孚充電寶詳情頁的設計過程。
這種調研方式的優點,是能快速獲取到用戶真實的顯性需求,缺點是受限于互聯網產品或科技類產品。所以對于小眾產品,一般會采用第二種定量調研方式。
●問卷法
對覆蓋用戶以問卷的形式采訪,也是最常見的調研方式。比如可以通過目前的主流問卷平臺:問卷星、金數據、騰訊問卷等渠道來取樣,問卷法的優點是操作簡單,易擴散,能夠獲取到大量的基礎反饋數據,缺點是獲取到的信息深度十分有限,基本只能獲得自己預設范圍內的反饋,畢竟大部分用戶根本不關心你問卷的填空題。
整體而言,定量性調研只能獲取到用戶行為層面的顯性數據,對于用戶為什么會產生這些行為是沒有答案的,所以一般情況下還需要定性型調研來配合。
2.定性型
定性型調研側重于“深度”,是聚焦少量人群,洞察行為背后真實想法的方式。包括:
●訪談法
針對某一類問題,與少量不同的目標用戶約談,通過溝通,挖掘他們行為背后更深層的情感需求。
舉個例子,比如肯德基曾經推出了一款特價咖啡,為了從主要競爭對手星巴克手中搶奪用戶,當時訪談了很多用戶,調查他們選擇或不選擇星巴克的原因。最終發現購買星巴克的大多數人是為了星巴克提供的附加價值,如第三空間、品牌體驗等,包括發現很多人喜歡拿著星巴克的杯子自拍;而不買星巴克的原因是認為咖啡本身太貴,原料不具有性價比。
最后肯德基推出了“咖啡為了覺醒,不是為了凹造型”的廣告來攻擊星巴克。暗示星巴克的購買者是追求面子、擺造型的膚淺的人,而肯德基咖啡的使用者卻是“聰明的消費者”。這種通過對用戶行為背后價值觀的挖掘,幫助肯德基更好的拉進了產品與受眾的心理距離,爭取到更多的潛在顧客。這也是定性調研的意義所在。
那么具體來說,訪談的過程中有哪些要點呢?
1)以人為本
將關注焦點始終放在對方身上,而不是對問題清單上固定的內容進行提問和記錄。
2)不斷追問
問原因、問細節、問感受。你為什么覺得它好?你覺得它好在哪里?你當時是怎么想的呢?這些追問能幫助我們挖掘到用戶行為背后,更深層的想法與價值觀是怎樣的,這也是定量調研無法觸及到的部分。
3)留意情感表達
關注對方背后的情感是怎樣的?比如隨著第二步,留意對方有沒有感覺上的形容詞并順著追問?!澳阏f到上次的購買體驗很糟糕,能具體說說當時的情況嗎?”這些都能幫助我們捕捉到那些沒有被用戶說出來的隱藏情感需求。
需要注意的是,有時候用戶可能并不知道自己的真實需求是什么,或者不愿意說。所以在用戶訪談的過程中,不僅要著眼于對方說出來的需求,還需要去觀察用戶沒有說出來的需求,這里就涉及到第二種方法:“觀察法”。
●觀察法
什么是觀察?觀察不等于“看”,而是調用你的眼睛、耳朵,以及所有感官去感知,并用心去揣摩用戶行為背后的原因。
舉個例子,腦白金創始人史玉柱當年在做產品調研的過程中,經常會找小區樓下和老頭老太太聊天,詢問他們:如果有一個便宜但很好的保健品你會購買嗎?不會,如果更便宜呢?還是不會。
史玉柱通過對不同老人的接觸與觀察發現,老人對自己是很摳門的,他們更愿意把錢留下來給自己的兒孫。但是,如果是別人送給自己的,尤其是自己的兒孫買給自己的,他們則很樂意接受。一方面能感受到兒孫的孝心,另一方面可以和其它老人炫耀。后來腦白金團隊花了大量時間鉆研如何把送禮這件事說的好,才誕生了那句經典的廣告語。諸如此類的偉大洞見,很多都來自于觀察中誕生。
那么應該如何來觀察呢?其實可以有很多角度:
1)觀察自己
自己作為用戶試用一遍產品,就相當于換位思考一遍,記錄自己整個過程的使用感受,優點是能獲得直觀的反饋。缺點也很明顯,就是你的體驗不一定和其它用戶是一致的,畢竟每個人的認知和偏好是不同的,蘿卜青菜各有所愛,所以只能作為參考和驗證方向。
2)觀察用戶真正在乎的事
用戶有時候會“說謊”。就像史玉柱問老人是否買保健品他們回答“買不起”,但顯然不是真買不起只是摳門不愿意買而已。再比如你問人為什么會買幾萬塊的品,他的回答大概率是像精致的做工致敬,而不會說是為了身份認同。亦或者,用戶可能會給出受限于自身認知的答案,好比如果在過去時代,你問用戶理想的交通工具是怎樣的,它可能說想要一匹更快的馬。面對這些情況,你就需要抽絲剝繭,揣摩用戶行為背后的用意,而不是執著于具體回答。
3)觀察極端用戶
極端用戶是指消費群體的天平兩端。比如很多游戲公司,都會著重調研初次接觸游戲的新手玩家,和職業玩家的反饋,這兩波人群就是極端用戶,因為他們可能會放大被普通用戶被忽視的需求。同理,如果你要推廣某產品,去研究初次消費以及最頻繁消費的那兩波人群,觀察他們的需求上怎樣的。這并不是指用少數人的需求代替多數人,而是從極端用戶身上尋找啟發,用來向大多數普通用戶驗證,他們可能會給你帶來寶貴的回饋。如Odorono止汗劑廣告的成功,就是從對極端用戶的觀察中產生洞見。
4)觀察用戶的變通行為
很多時候,用戶并不會注意到某個產品或設計中體驗不好的地方,他們往往只會認為“它們本身就是這樣的”。你能想象旅行箱的輪子,是在旅行箱發明之后的200年后才加上的嗎?在這之前他們都使用推車來運輸行李箱。所以,你可以觀察用戶在使用過程中是否有采用變通方式,有沒有“兩波三折”的過程,或者是否有“蹩腳”的行為,來判斷某些不合理的地方,捕捉這些未被滿足的需求。
以上是關于定量型與定性型的調研方式和技巧分享。
而當我們通過這些調研方法,拿到一堆龐雜的數據,又該如何的利用這些數據產生洞見,幫助我們做出更好的設計呢?我們還可以通過一些技巧萃取用戶需求,轉化成具體的解決對象,幫助我們產生創新想法。
三、如何萃取需求?
關于萃取需求,主要給大家介紹兩個實用的方法工具。
1.用戶畫像
“用戶畫像”是一個使用頻率非常高的工具,它是建立在用戶調研的結果之上,通過找到優先級比較高的需求,虛構出“典型人物”,來代表和還原一群人的行為特征。
目的一是“總結”,將用戶調研的結論,用更直觀、可視化的方式呈現,幫助團隊更好的了解用戶,促進共同決策。
二是“移情”,建立與用戶的同理心。幫助我們從用戶視角出發,更好的領會對方的需求和痛點是什么。
這就像打仗前,在地圖上勾畫敵人的行軍路線,幫助我們催生策略與洞見。
怎么做用戶畫像?
第一步,找出工作目的與用戶需求的交集。比如你將要設計一則廣告,目的是說服用戶購買某產品,那么你就要找出用戶購買這個產品的動機是什么,以及為什么會產生這樣的動機?這些就是你工作目的與用戶需求的交集。
第二步,提煉出用戶需求的共性,將調研數據合并同類項,提煉出那些覆蓋面廣,權重最高的幾個共同點需求。
第三步,將畫像具象化。用更直觀生動的方式演繹用戶需求和用戶特征。
一般來說,一個用戶畫像包括:
1)用戶的基本信息:肖像、名字、性別、年齡、工作等等。
2)用戶與調研主題相關的特征描述:比如性格、興趣、習慣等等。
3)用戶的動機與痛點描述:他想要什么?為什么想要這些?阻攔他達到目標的障礙是什么?
前兩個是顯性數據,通過定量型調研就能拿到,最后一個是定量性與定性型調研綜合的結果,也是畫像的核心。
舉個小栗子,南孚充電寶的電商詳情頁設計,經過前期后臺數據調研,和用戶訪談。
得知用戶購買充電寶的場景有:
1)外出旅行 2)出門逛街 3)商務出差。
用戶對充電寶的特征和偏好有:
1)希望容量大,夠用。2)希望體積迷你,方便攜帶。3)希望是大品牌,更安全有保障。
那么我們就可以勾勒出一張用戶畫像,如下所示。
這樣一張畫像就完成了。當然一張畫像只能代表一部分群體,不能代表全部類型的用戶,所以按照調研需求,可以分別勾勒出多張不同的用戶畫像。具體數量取決于想要覆蓋的人群。比如還可以有:王小麗38歲,公司高管,經常旅游······周小芳22歲,大學生,喜歡逛街·····
在確定了用戶畫像之后,再給大家介紹第二種啟發創作思路的工具:用戶觸點地圖。
2.用戶觸點地圖
所謂用戶觸點地圖,也叫服務藍圖,或者用戶旅程地圖,也就是研究用戶是怎樣與我們的產品&服務發生接觸的,一共有哪些接觸點,每一次會接觸有怎樣的體驗?將這一連串接觸點像地圖一樣呈現出來,從而幫助我們汰劣留良。
海底撈在這方面做的就特別好,它將用戶從進店到離店的整個體驗過程,細分出了N多個接觸點,從進店、帶位、點餐、用餐、結賬、甚至上洗手間,都面面俱到的顧及客人需求,你排隊不耐,給你擦鞋、美甲,你用餐時擔心頭發沾上味道,給你發圈,你孩子哭,給你帶娃······
而用戶觸點地圖在其中的意義,則是一個有效的整體體驗規劃工具。通過觸點地圖的繪制,你可以知道用戶在各個環節下,在想什么、要什么、有什么感受,幫助我們提煉出待改善或是創新的機會點,完善整體體驗。
怎么繪制用戶觸點地圖?
很多專業書籍和文章會講的很復雜,但其實關鍵就兩步:
1)橫坐標畫出用戶使用產品從“始”到“終”的過程,
2)縱坐標畫出三種感受,分為滿意、一般、糟糕。并在坐標內填充各個關節的體驗是怎樣的。
舉個例子,我經常會收到一些求職者的簡歷作品集,但是在這一個過程體驗有時候并不好,比如文件太大,有的文件打不開,有的干脆發過來源文件或者網址······如果把這個體驗過程從始(收到email)到終(保存聯系)畫出來,可能是這樣的。
如果在這之前就針對這一過程,從用戶的角度出發繪制了用戶觸點地圖,那么你就能很大程度避免這些誤區。這也是繪制用戶觸點地圖的主要意義。
最后再啰嗦一句,用戶觸點地圖不僅能幫助我們建立整體認識,避免踩雷,還能幫助我們找到關鍵節點,更合理的分配資源。這里涉及到一個諾獎級別的配套知識點“峰終定律”。
所謂峰終定律,指的是人們在經歷了一次事件后,只會記住兩個因素,一個是事件的高潮,即為“峰”,還有一個是事件的結束,即為“終”。這一定律在服務體驗中經常被用到。
比如在宜家的購物流程中有很多負體驗,迷宮般的路線、有時還得自己搬運產品。但是看到精致優雅的產品,以及結束后的1元冰淇淋,會讓我們覺得整體的體驗還是不錯的,愿意下次再來。正是因為在關鍵時刻和結尾帶給我們的體驗是正峰值。
這給到我們最大的啟示是,任何商業以及設計行為,能調用的資源是有限的,而我們可以通過在關鍵節點與結尾,制造正峰值,達到資源的更大化利用。
比如在很多日本的設計上都有這樣的小巧思。
蘑古力零食,吃完以后,盒子最里面寫著“無論何時,都請再來享受一刻小憩”。
拉面館喝完最后的拉面湯才看得到碗底寫著“謝謝”。顧客對店主肯定的同時,也獲得了店主的感謝。
這些小彩蛋,都是對用戶終值體驗的提升,甚會因此細節而留意,成為回頭客。
這些何不是精妙的設計?
設計是一門科學的藝術,我們要懂得利用社會上已被證實的方法論,避免行為的盲目性。這比單純的從速成派大師那里學一些水面上的術,重要太多了。
總結一下本文講述的內容。
設計不是玄學也不是直覺,它是有邏輯的滿足用戶需求的過程,而調研則是洞察用戶需求與創新之源。
關于「如何洞察用戶需求」這個話題。
首先,我們分析了用戶的需求有兩類,一類是“功能需求”,它是表面的、理性的,另一類是“情感需求”,它是深層的、感性的。功能需求包括但不限于低價、性能、便捷性、可達性、降低風險;情感需求包括但不限于高端、定制化、新穎、過程體驗、理想自我,這些都能啟發我們思考不同方向的可能性。
其次,介紹了兩類基礎的調研方法,分別是“定量型”與“定性型”。定量調研側重于廣度,如后臺數據法、問卷法,能幫助我們獲得大量顯性數據;定性調研側重于深度,如訪談法、觀察法,能幫助我們捕捉用戶行為背后的原因,這些也都是洞察用戶需求的基本功。
最后,我們介紹了兩種萃取用戶需求的工具,分別是“用戶畫像”與“用戶觸點地圖”。用戶畫像是提煉用戶關鍵需求,虛構出具體人物來代表一類人群,是一種可視化的用戶需求總結方法,同時也能幫助我們切換視角,與用戶同理共情,催生創新想法。 用戶觸點地圖是細分出用戶接觸產品的各個環節,幫助我們汰劣留良,發現機會點,以及更合理的分配資源。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
排名榜單數據在我們日常生活中經常會遇到:
比如微博、抖、快的熱搜榜單、各省份之前的GDP對比、雙11的現場的榜單數據等等
都會涉及到,可以說排名數據已經涉及到了我們生活中的方方面面。
那我們應該如何做好榜單排名數據可視化呢?
我們常遇到的榜單排名數據主要分為兩種:
↑ 榜單排名數據分類
一種是無數據的排名,也就是只有排名和名稱;
另外一種就是有數據的排名,也就是包含了具體的數值;
那么,本篇文章我將按無數據的排名和有數據的排名,給大家帶來,當我們遇到榜單排名數據時,應該如何將圖做的更好看!
總共涉及到大于15種可視化表現形式,希望能夠對你有所幫助!
最簡單的方法,我們可以從排名的數字本身去做優化,比如將排名數字1、2、3....去做內容的填充豐富,改為TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...
還可以基于數字本身所處的環境去做優化,比如在其底部加入填充形狀墊底,讓數字排名更突顯出來(如正方形、矩形等等)。
通過這兩種形式,可以讓單調的排名數字有了更多的細節,內容更豐富,展示更好看。
↑ 基于數字本身去做優化的案例
在數字本身變化的基礎上我們還可以加入對文字的變化,比如在文字的底部墊上形狀(如圓圈、條形圖等等)。這樣通過對數字和文字本身的設計強調,就從整體上得到了優化。
↑在文字底部墊上圓圈,在整體上突出設計感
雖然排名沒有具體的數值,無法生成條形圖,但是依舊可以通過等比縮放的矩形來強調文字,比如倒立金字塔和橫向柱狀圖。
↑通過矩形形成倒立金字塔和條形圖,在整體來突出設計感
如果排名數據內容所傳達的主題是品類、物品、或者城市,那么就可以借助icon來豐富可視化。
排名的數據如果涉及的是品類中的細分物品,比如生活中常見到的吃的、穿的,用的,那么就可以使用定制插畫來豐富排名可視化。
當我們的排名數據中涉及到了人物、品牌、產品之間的排名時,我們可以通過與之對應的頭像、品牌LOGO、產品實景圖來豐富排名的可視化表現。
如果排名數據講的是省份之間的排名對比,那么我們就可以借助地圖元素來豐富排名的展示。但是如果要用到中國地圖,一定要注意使用中國標準的地圖,當然基于設計的風格,你也可以使用簡約風格,去掉地圖元素,只保留可視化的部分。
排名數據也可以借助視覺背景模板來做變化,比如在涉及某個主題排名榜單時(如淘榜單、星數榜單等)就可以通過背景視覺元素來突出排名。
其實這種背景視覺模板,對可視化的要求并不高,你只需將排名通過單一表格的形式展示出來,但需要一個很強的視覺背景版來做襯托,這樣,做好一個模板,其余的榜單都可以進行復制使用了。
如果數值單一,那么可以通過常規的可視化表現形式進行展示(如基礎柱狀圖、餅圖、圓圈大小、直角三角形柱狀圖、180°變形柱狀圖等等)。
結合第一節講到的基礎排名樣式再加上橫向柱狀圖來進行展示。這樣的排名展示形式簡單、直觀,特別適合單一排名數據之間的對比展示。
如果排名數據中數值所傳達的是占比,那么便可使用餅圖或圓圈大小的形式對排名數據進行展示。
通常我們會使用常規的豎向柱狀圖來表現數值的大小,但其實還可以對其進行一點點變形,比如將柱子的右側直角邊去掉,那么就變身成為了直角三角形柱狀圖。
這時如果排名的文字比較多,我們還可以將排名和文字置于柱子的上方進行展示,一方面節省了空間,另一方面在視覺上也起到了美觀度。
柱狀圖的變種,在《如何做出比別人好看的柱狀圖?》系列文章中有講到,大家對如何實現這種形式感興趣的可以看下之前的文章,同樣的排名數據也可以基于180°的變種柱狀圖來進行展示。
除了基礎的可視化展示和排名數據結合外,如果排名數據所涉及的是一些主題元素(如生活中吃的、穿的、用的等等)。那么就可以將基礎的可視化和icon、頭像、產品實景圖、插畫等等去做結合來豐富可視化。
當排名的數據中,還多了一列數據涉及到分類, 那么就可以使用?;鶊D來進行可視化的展示(如國家屬于什么地區、公司屬于什么行業、城市屬于什么省份等等)。對如何實現?;鶊D感興趣的可以看看之前發的?;鶊D教程。
4 排名連線圖展示
如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。
如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。
和第一節講到的地圖一樣,如果排名數據中涉及到了地理位置數據,那么可以結合地圖進行排名數據的展示。通常情況下,完成地圖可視化后,可將具體的排名信息以表格的形式羅列在地圖的空白區域內,這樣結合地圖和具體的詳細排名數據,就會更加的直觀和豐富。
如果我們的排名數據維度非常的豐富,數據所包含的信息點在3個以上,那么就可以通過將多種可視化的表現來進行結合,通過組合式的可視化來進行展示。
排名數據也可以通過簡單的動態柱狀圖來進行展示。如果只是單一的排名沒有涉及年份的變化,那么可以通過柱子從上到下一個一個地出現來進行展示(如下圖左),如果涉及到年份的變化, 那么就可以通過柱子隨著年份的上升或下降來進行動態的展示(如下圖右)。
動態柱狀圖的實現方法也很多,我在想做出漂亮的圖表,這12個網站不能錯過!中有講過,可以通過flourish網站(https://flourish.studio/)來快速的實現。同時如果想自己DIV得到更定制化版本的動態柱狀圖,也可以使用B站UP主見齊的開源可視化項目(http://r6d.cn/JdYy)進行實現。
同樣的我們還可以通過動態折線圖的形式進行展示,這種表現形式主要看的是排名的趨勢變化,同樣的,借助flourish網站(https://flourish.studio/)就可以實現這種動態折線圖的展示效果。
當然,我們的排名數據也可以使用現在市面上很火的3D可視化的表現形式來進行展示,比如隨著攝像機移動的3D柱狀圖、還有基于主題而自定義化的3D場景排名展示等等。
將基礎的柱狀圖,通過3D立體柱狀圖的形式進行展示,排名的結果并不是啪的一下直接公布,而是隨著鏡頭慢慢地公開,對觀眾來說隨著鏡頭的視角觀看有一種慢慢揭秘的感覺!
如果我們的數據,所要傳達的信息非常富有主題場景感,那么就可以通過3D場景渲染的形式進行展示,比如下圖GIF中,在表現《哪個國家上班族工作時間最長》就可以將各個國家的學生,置于一個教室中,再通過鏡頭的移動位移來進行展示。
這種展示形式,實際投入成本還是很大的,從建模到渲染至少也需要2-3天的時間。所以最好基于一個好的選題再選擇這種形式,要不然就會出現”雖然視頻本身展示酷炫,但是由于選題不好,最終播放量不高“的尷尬情況。
比如說,當我們在時間非常緊急的時候,排名數據如果是和地理數據相關的,那么我們會盡量避免使用地圖元素來豐富可視化,因為這會增加我們審核檢查地圖正確性的時間成本。我們可采取常規的可視化表現形式進行展示,雖然會丟失掉一些美觀度,但是正確性會有更高的保障。
基于文章內容,需要在圖中重點強調某些數據時,可通過填充顏色、框選、重點信息豐富(比如展示TOP3)的形式來對排名進行強調.
排名數據看似簡單,但其實所包含的展示形式和細節還是非常多的。希望當你在遇到排名數據時,這篇文章能夠對你有所幫助!
文章來源:站酷 作者:鄒磊ZouL
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天給大家詳細的分析一下移動端選擇器。
一.什么是選擇器
選擇器是一個輸入字段, 用戶必須在其中選擇一個(或多個)選項,這與文本字段中用戶可以自由使用的輸入區不同。選擇器具有各種不同的形狀和形式。下拉菜單,復選框,切換按鈕,滑塊等都是不同類型的選擇器,但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數量:一個或多個。
二.選擇器的類別
-單選選擇器
-多選選擇器
1.單選選擇器
單選選擇器按效果又可以分為:點擊選擇器、滑動選擇器、多聯動選擇器、開關選擇器、可搜索效果的選擇器、地圖選擇器。
特點:同一時間只能選擇一個選項,當你已經選擇完一項后,準備選取另一項,那么后選的一項會立刻使先選的一項被取消選擇。
1-1點擊選擇器
點擊選擇器可分為兩種狀態,狀態一為立即觸發,當你點擊后會立即跳到下一步操作;狀態二為再次確認觸發,當選中某項時,不會立即觸發操作,而是需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。
-立即觸發式:
特點:直接進入,并沒有再次確認的按鈕,可以讓你快速到達想要的目的。
建議:雖然目的能快速達到,不過也很可能會造成誤操作,所以在設定這類選擇器時要多考慮手指的觸碰區域以及每個選擇元素的距離,同時正因為是直接跳轉,所以應當加入一些操作提示。
舉例:汽車之家在用戶選擇二手車時就會出現此選擇器,當我在汽車之家想要選擇二手車時,它會彈出立即觸發式選擇器控件,我們在控件上可以看到有7個圓形選項,分別為:汽車之家誠信聯盟、準新車、奧迪、奔馳、寶馬、三廂轎車、分期購車,當我點擊“奧迪”選項時就會立即跳轉選擇后的頁面,為了讓用戶知道自己選擇后的狀態,在跳轉頁面時還會彈出非模態彈窗的文字提示“共找到1943輛車”。
-再次確認觸發式:
特點:這是最為常見的選擇器類型,當所在選項選上,除了選擇另一個選項之外,便沒法取消選中狀態。(選且只能選擇一個選項)
建議:在設定此類選擇器時我們應該從產品的角度去考慮是否給用戶一個默認選項,甚至是否考慮給出一個重置按鈕。
舉例:我剛注冊小紅書時,在小紅書填寫信息頁面中,它的默認選項是“男”,我點擊“女”,則會自動取消掉“男”,它們兩者并不能同時存在,并且只有我點擊下一步按鈕時才會正式確認我選擇完成。
1-2滑動選擇器
特點:滑動選擇器是將需要選中的內容滑動至中部,然后點擊確認按鈕確認選中后返回選中內容。大多數運用在選擇時間或地址上。
建議:滑動選擇器的展示區域有限,部分選項會被隱藏,最好是當用戶對所有選項都比較熟悉、有預期的時候,才使用它。為了保證手機屏幕觸控精度,以免發生誤觸,滾輪選擇器建議控制在5列以內。
舉例:在小紅書填寫年齡信息時,我們只需用手指在區域內滑動即可選擇想要的選項。
1-3多聯動選擇器
特點:多聯動選擇器是由兩個或兩個以上的中繼器制作而成,第一個中繼器選擇后,一般會對第二個中繼器進行篩選,不過因為顯示的區域有限,所以當你要切換時,還只能挨個切換,效率低下。
建議:可以通過數據以及功能來減少選擇時間,例如在選擇地區時,根據當前GPS定位地理位置,定位相關省級信息及名稱,減少滑動操作。
舉例:如下,當我選擇了內蒙古自治區,那么2級內容就應該篩選掉內蒙古以外的城市,比較適用于省份-城市或者品牌-產品這種類似的選擇,當然下面第一張多聯動選擇器也結合了滑動選擇器。
多聯動選擇器展示的方式非常多,不僅可以用滑動形式展示,還可以用點擊、平鋪列表等形式展示。
在左圖選擇城市時,我們必須要先選擇省份,再選擇城市,最后才能選擇縣;
右圖則沒有先后順序,不過當你首先選擇顏色時,如果沒有相同尺碼的衣服,缺貨的尺碼則不會被選中,先選擇尺碼也是相同道理。
1-4切換開關選擇器
特點:切換開關選擇器有且只有兩種選項,用來在開和關兩種狀態之間切換。開關屬于觸發類組件,撥動開關時,它所指揮的某個操作會立即生效,常見的使用就是授權。開關的默認狀態并不都是關閉的,還要從產品本身的設定上來決策。
建議:如果某開關的功能是用戶經常使用的狀態,那么可以在默認狀態下打開開關,不過需要注意的是在某些特殊的開關按鈕需要打開時,必須要提前告知用戶。
舉例:當我打開UC瀏覽器的設置時,它的輔助功能就使用了切換開關選擇器,切換的開關只需要點擊即可。
1-5可搜索選擇器
特點:可搜索選擇器一般用于選擇項較多時,特別是對于電商購物類的APP搜索選擇器是必不可少的,搜索選擇器會根據用戶輸入的內容,對中繼器進行模糊的搜索,讓用戶快速找到并選擇內容。
建議:在搜索區域輸入文字時,可給予用戶更多的文字提示以及以及引導類信息。
舉例:小紅書在搜索時就會出現數字化的信息提示,這樣能夠很好的引導用戶進入到想要的搜索結果:筆記或者商品頁面。
1-6地圖選擇器
特點:作為最特別的選擇器,它的功能是復雜的,它的操作方式也是多樣化的,地圖選擇器的操作可點擊、可拖拽、可放大縮小等等,它多用于生活類APP。
建議:可以在選擇器中加入更多趣味、互動、可感知的設計,如加入過節元素、車輛行駛路徑、熱門區域、甚至選取后手機的震動等。
舉例:
打車類APP必用的地圖選擇器,滴滴出行的用戶可以實時看到車輛信息,可以采用點擊、拖拽、放大等操作來選取上車地點,選取后還有文字信息提示,讓用戶確認操作是否正確。
貝殼APP則用地圖選擇器來讓用戶選擇二手房,同時也采用了聯動式的效果,第一步是查看區域,可以明確看到區域的售房套數,點擊選擇區域后我們可以看到每個路段的房子套數,點擊路段后就可以看到每個樓盤的套數以及均價,直到點擊樓盤就會彈出詳細信息框。這樣有助于用戶在選擇二手房時從大數據分析二手房的情況,有更好的對比性與選擇性。
2.多選選擇器
當單選選擇器不能滿足用戶需要時,這時我們就可以采用多選選擇器,一般常用的多選選擇器都是采用點擊的方式,當然也有滑動類型的多選選擇器。
2-1點擊多選選擇器
特點:當用戶想要選擇多個類別的情況下,我們就可以用點擊多選選擇器來展示提供給用戶選擇,通過屏幕點擊選中或取消選中該選項,它不會立即觸發操作,需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。
建議:從用戶的角度來講盡量不要強制用戶選擇數量或者默認全部數量;多選項時觸碰區域不能太小,以免造成誤操作。
舉例:小紅書在選擇感興趣的內容時就采用了點擊多選選擇器,不過在選擇興趣時它就強制用戶至少關注4個興趣,而對于單興趣或者少興趣的用戶來講,這無疑會造成用戶體驗的不佳,被逼再次從中選擇次要的興趣。
2-2滑動多選選擇器
特別注明:從用戶的角度來看,它可以選擇多個區域段的內容,所以我把它分為多選選擇器中。
特點:當系統給出的選項不在自己的選擇區間時,可以很好的自定義選擇區間,把定義權限交在用戶手里。同樣,它需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。
建議:在用戶滑動操作期間要有明確的操作提示,讓用戶時刻感知目前處于的狀態;滑動區域盡量不要超過100刻度,如果刻度距離太小,用戶在滑動時也很難精準的選擇范圍。
舉例:在汽車之家APP中,當我要選擇汽車價格范圍時就會出現此選擇器,我們可以用手指滑動來選取它的價格區間,相對于上半部分的單選價格拓展性更強,用戶可以自行選擇上半部分的單選選擇器,也可以選擇滑動多選選擇器,給予用戶更多的選擇。
三、選擇器的十大應用要點
1、簡單易懂
標題易懂:
在選擇器中標題一定要簡單明了,很快的讓用戶知道他在為什么做選擇(如:當你關注某烹飪的APP后,它會讓你勾選喜歡的菜譜,你的標題就可以用“選擇菜譜”四個字,簡單明了)
文字標簽易懂:
一般使用短語而不是句子,也并不需要用標點符號來結尾。(如:當選擇想要的菜譜時,菜譜后的文字不需要加入標點符號)
選取狀態易懂:
用戶能夠明確感知什么是選中狀態,什么是未選中狀態,什么是禁用狀態。(如:選中狀態為高亮顯示,未選中為普通顯示,禁用狀態為灰度顯示)
反饋提示易懂:
當你在選擇中遇到選項限制或是否需要確認操作時,反饋提示一定要一目了然。(如:當你選擇某衣服時,S碼不能選擇,則會用灰度顯示的文字代替,甚至可以用中橫線劃過文字,明確告訴用戶不能選擇)
2、基本排序
從邏輯順序:
邏輯排序能讓用戶很快很準的找到自己需要的選項,特別是對于選擇地址/時間/個數等常規的選項時,可以按照字母/遠近/大小來進行排序。例如下面在選擇地址時,就是按照A-Z字母排序,這樣可以大大節省用戶選擇的時間。
從產品利益角度排列順序:
當然為了產品自身的利益也可以自己優化排序方式,選項的順序可以說服用戶進行選擇,用戶可能因為第一個選項在列表中的位置而選擇了第一個選項;可以輔助用戶,也可以讓用戶向著產品所希望的方向傾斜。例如你在選擇菜譜時,產品為了讓用戶選擇更加優質的菜譜,就會把用戶評價高的菜譜放在前列;當然商家也會這么做,例如你要去買某款商品,商家會在選項中把熱門、優質的產品放在最上方,讓你優先選擇。
從用戶體驗排列順序:
從用戶角度來說哪些對用戶體驗好,那么就把它排在前面。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位,而把用戶量最少的輕客放在了最后一位;同樣它在汽車品牌選擇中,單獨列出了熱門品牌把它放在前列,讓用戶進行快速選擇。
3、一致性
視覺布局一致:
每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態的視覺體現。一般情況下移動端更傾向于左對齊,這樣有利于快速讀取選擇內容,可以提高用戶的瀏覽效率并減少錯誤。
圖片/插畫風格統一:
在圖文結合的選擇器中,我們一定要保證圖片(插畫)的優質以及風格的統一。
4、合理運用默認選項
默認選項是選擇器的開始狀態。在不同的選擇器中有不同的默認方式。
默認未選中:
這是最常見的一種狀態,特別是對于選擇年齡、生日這些個人隱私信息,系統也沒有辦法進行默認選擇。
默認選中其中一個選項:
要想默認其中一項,必須考慮兩點因素,因素一:你想要潛意識的像用戶傳達信息,在單選選擇器中默認選擇一項后,就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產品的傾向,例如此產品的性別9成都是女性,那么建議默認選項為女性。
默認選中全部:
其實默認選中全部在用戶體驗上來講真的不是那么的友好,例如微博這個選擇器界面,剛進這個界面時已經全部勾選中,并且當你沒注意習慣性的點擊下面的按鈕時會生立即效,沒有返回的余地。(吐槽:有些APP甚至沒有一鍵取消功能,要一個個的點擊取消...)這也是為了產品犧牲掉了部分用戶體驗吧!
5、給用戶更多選擇
單選選擇器的更多選擇:
如果用戶不想做出選擇,那么應該提供一個中立選項,為用戶提供一個明確的方向,中立選項比勉強選擇要好。例如在選擇行業領域時,以上并沒有你所處的領域或你不確定你的領域,你就可以選擇“不限”或“其他”。
多選選擇器的更多選擇:
在多選選擇器中,如果不能把控到用戶的準確選項區間,那么可以考慮滑動多選選擇器,讓用戶有更多的選擇區間,不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。
6、控件狀態
選擇控件在操作過程中必須更改其狀態/外觀,要明確讓用戶知道是否能選中,是否被選中??丶顟B一般分為三種:未選中、選中、禁用。
未選中
選擇器的開始狀態,向用戶表明,可對該選擇控件進行操作。
選中
用戶操作選取狀態,選擇控件處于被選中的狀態。
禁用
一般情況會為灰色顯示,用戶將無法與選項進行交互。
7、操作提示
指的是用戶在操作中讓用戶得到相應的反饋,用戶根據這些反饋可以判斷當前狀態以及操作后狀態。在選擇器中,操作提示一般用輔助文案提示及非模態彈窗提示。
輔助文案提示(選擇前與選擇中):
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明,例如下面是地區選擇,我在選擇不同層級的區域時,它的上方會出現輔助提示文案,讓你明確的知道你上一層級選擇的是什么。
同樣,當我在選擇價格區間時,滑動選擇器的左上方一樣有文字類的提示:
非模態彈窗提示(選擇后):
非模態彈窗一般出現在用戶操作完的跳轉頁面中,為了讓用戶感知所選的選項在頁面的狀態,如下,非模態彈窗告知用戶一共有7輛車符合標準。
當然除了非模態彈窗外,還有模態彈窗,但是用戶體驗極差,目前很少使用,所以就不列出來了。
8、合理使用操作區域
擴大點擊區域:
在選取按鈕類的操作時,容易出現點擊不到或誤操作的現象,我們可以通過擴大點擊區的交互區域來提高易用性,例如下圖,雖然按鈕在左邊,但是可以把橫向區域都列為可點擊區域。
當然我們也可以從設計的角度來擴大視覺范圍,從而也提高了點擊范圍,這樣的處理不僅提升了視覺層面,還提升了交互體驗。(圖文結合方式)
注意交互間距:
在元素與元素之間一定要有合理的交互間距,不然很容易出現誤選的情況。
合理利用有效區域:
在選項較多的選擇器中,我們可以利用好選擇主體控件之外的區域,例如在選擇城市/品牌時,我們可以做A-Z index式字母交互區,幫助用戶快速找到想要的選項。
9、趣味性
讓用戶選擇本來就是一件枯燥乏味的事情,如果讓這件事變得有趣那么會極大的提升用戶體驗。
從文本層面:
例如當用戶填寫性別信息時,你給予用戶的文字信息并不是“男”/“女”,而是“帥氣的boy”與“酷酷的girl”,這樣會讓用戶覺得這是一件比較有趣的事情,而不是被動選擇。(注:這樣的取名一定要符合產品的特性)
從視覺層面:
加入可玩兒性的選項,例如汽車之家的頭像切換,可以選擇自己喜歡的頭像。(頭像并不是強制選擇的,如果不進行操作則是默認選項)
從交互層面:
讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒,在未選擇狀態他的人物會360度圍繞著轉動,當然你也可以快速拖拽,或者放大縮小,可玩兒性十足,并且在內部設定了最匹配/新人的高亮顯示,協助用戶去選擇。
10、合理使用選擇器
不同的產品在使用選擇器時都各有不同,因為每個選擇器都有他的利弊,而真正要怎么去選擇還要根據產品本身來定。
那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊:
1/多聯動選擇器(平鋪式)
貨車幫采用的是多聯動平鋪式選擇器,它最大的特點就是能夠一眼就看清楚所有地址,不過地址多時需要花時間去找,只是當你經常使用此功能時便會形成記憶,再此搜索的時候就能形成記憶點擊,效率很高,并且在操作外還有路徑提示,不僅可以幫助你記住層級選項,還可以實時返回路徑進行重新選擇。
手勢操作:點-點-點
2/多聯動選擇器(列表跳轉式)
閑魚采用的是多聯動列表跳轉式選擇器,這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內容,那么就又要切換到上一級,閑魚采用它的原因是因為它只有二級聯動,不存在遺忘現象,不過這樣列表式的選擇效率并沒有平鋪的效率高,人眼習慣掃視橫向內容,所以橫向的內容獲取往往要比縱向的多,在地址選擇器上我個人是不太建議采用多聯動列表跳轉式,因為并不也不直觀。
手勢操作:滑-點-點
3/多聯動選擇器(列表式)
轉轉采用的是多聯動列表式選擇器,它的優點是可以根據右側字母來找城市,數據偏大也能夠很快的查找。不過如果在層級的選項中出現錯誤,同樣就要切換到上一級,并且在操作中沒有輔助信息提示。
手勢操作:滑/點-滑/點
4/多聯動選擇器(下滑式)
安居客采用的是多聯動下滑式選擇器,這種形式的選擇器不會遮擋后面的主要內容信息,在選擇完地址之后能立即看到地址的篩選結果。優點是能快速選擇多級地址,并且層級分明,擴展性較強可以做成地址多選。缺點是不適合3個層級以上的地址選擇。
手勢操作:點-滑/點-點
5/地圖選擇器
美團外賣采用的是地圖選擇器,這個選擇器一般用在需要精準定位的生活類APP中,它的優點就是能夠快速精準定位,并且自動錄取定位信息,它的缺點也顯而易見,不能含帶層級并且對范圍也有約束。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你覺得設計系統重要嗎?你了解設計系統嗎?讓我們一起來深度解析下設計系統,預計閱讀時間為15分鐘
你覺得設計系統重要嗎?那目前手里的設計系統是在靈活運用?還是落灰、擺設?你對設計系統理解有多深?它在你的設計中有多大的用處?節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范?那怎么避免設計系統帶來了統一和便利,但同時失去了變化和新鮮感?
設計系統是今年來熱門的話題之一,想要帶來良好的用戶體驗,設計系統就是其中重要的一環,那它和設計規范、設計模式、設計語言、設計原則有什么關系?
設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔,在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色,文案,字體等等),所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的,是需要維護與改進的。
設計模式是一種經常性,可重復使用的解決方案,可用于解決設計問題,我們經常會說解決整個方案我們要運用什么樣的設計模式。
設計語言是把設計作為一種“溝通的方式”,用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。
設計原則可以理解為設計語言中的語法,是構建設計語言系統的起點,用于傳達品牌主張或設計理念,它將指引業務設計執行的方向。
比如Airbnb的設計原則可以簡單歸納為幾點:
設計規范對于設計師來說并不陌生,日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率,同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。
我曾經加入一個設計團隊,看到平臺風格不統一,當時很自豪很堅定的制定了一套平臺設計規范,從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系,還有交互方面。當時一心想著有這個規范寶典在手,平臺統一性指日可待,沒想到這個規范就成了我自己的規范,僅僅是我在自嗨。
為什么已經建立設計規范了,還是沒能解決平臺統一的問題?這里延伸出另一個問題,為什么其他設計成員不用?協作不起來?是它不夠好?我嚴格按照標準來,為什么推不起來?
那要追溯到設計體系的目的是什么?它的意義何在?
1-建立統一的設計文化體系
2-保證多團隊成員共同參與的項目視覺一致性
3-提升品牌調性
4-節省與研發人員的溝通成本
5-將元素組件化,提升設計師和程序員的工作效率
6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。
7-在用戶層方面,對某產品的體驗一致性得到落實
8-減少設計出錯率
……
整體可以歸納為
規范定義的基礎是圍繞某種風格或者設計文化。對內統一,一個品牌的設計風格,是要有別于同類競品的,比如阿里云、騰訊云,他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分,一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站,各個頁面的設計差異明顯,像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。
多個設計成員協同一個產品,迭代與更改規范都能更快的同步??梢栽囍胂笠幌乱粋€幾十人的設計團隊,如果沒有統一設計規范,那網站會變成什么樣子。
在UI還原中,設計需要經常與前端進行溝通“這里這里這樣做,那里那里這樣做”,對于每一塊的設計,前端都會詢問你,這樣大大增加了溝通的成本,把時間花在了無效的事情上。
設計規范統一后,減少了無效溝通,可以更專注創新方向,比如:要改變預先設定的一個輔助色,無論是設計還是開發,修改組件的顏色,全局使用到這個組件的地方都會改動,大大節省了設計時間。
做品牌的時候需要制定一整套VI規范手冊,那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式,更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂,看到界面都可以立馬識別出這是哪個app。
你能分出哪個是網易云播放界面,哪個是QQ音樂播放界面嗎?
設計經常碰到設計完后需要修改一個點,然后就要找出設計稿中所有相同的地方進行修改,這樣很容易漏,統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。
設計規范的意義這么強大,對網站及品牌有至關重要的作用,那為什么還會出現沒有應用起來的情況呢?
很多設計師會說:“設計不就應該是變化多端的嗎?就是要表現創新力呀?制定了設計規范是不是就失去了變化和新鮮感?那設計還有什么意義?開發都可以做設計的事情了?!?
這里就要看對設計規范理解的深度—設計規范是分層次的,平臺規范歸根結底是為了確保產品的易用性,是為了減少用戶的學習成本
底層基礎元素也可以說是全局樣式,比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素,給用戶一種統一的視覺形象,在跨界面、跨端、跨系統間有熟悉感,從而潛移默化地進行品牌的滲透。
對組合自由度較低的基礎組件做精簡的樣式變化限定,對組合自由度較高的復合組件減少過于局限的限定條件,考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態,多種可能。
設計規范是需要迭代的,而不是我只要制作出來就放那了,就像女生買衣服,去年的衣服已經配不上今年的我,嘻嘻
~~希望我每天都有新衣服穿,做夢中~
設計體系最大的重要性毋庸置疑就是規范節省人力,設計師可以更多的時間去發揮創造性。
很多設計師覺得統一了規范,那我的創造性從哪發揮,界面都長的差不多。在設計中,設計目的是解決商業或用戶的問題,并不僅僅是為了有創意而引入新的樣式或交互方式。
有了設計體系,統一了整體品牌風格,不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上,更多的回去關注更全局的設計策略。
它僅僅是設計軟件上可復用的組件,所以可由設計師獨立完成,這種想法是錯誤的,是需要來自不同角色支持和參與的,這里包括前端、品牌、動態設計、 用戶研究等。
有時候會想只要完成了規范就大功告成了,其實不然,對待設計規范就像對待產品一樣,是需要維護和改進的,包括兩個方面:一種是對內部使用的開發以及同事,一種是對用戶的,應該定期收集用戶以及同事的反饋,確保及時更新迭代。
1-提高設計開發效率,最顯而易見的好處就是,組件庫的可復用性。
比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。
2-確保設計一致性,為用戶提供連貫一致的用戶體驗,設計的一致性讓用戶能縮短的學習使用產品的周期,讓他們能夠預見他們的操作所帶來的改變。
網站統一的視覺規范、交互體驗,會讓用戶產生一種掌控感。
3-設計系統促進了公司內部的合作和交流,一個成功的設計系統是需要跨功能團隊參與,設計系統因此促進了公司內部不同職位的合作和交流,這種文化的建立也會幫助公司更有效地推出新的產品或服務。
已經了解了規范的目的/意義,那該怎么去著手呢?
在制定規范前期,不應該是一個人規定這個規范,設計團隊的成員應積極參與,前期先把規范的基調定好,人人都參與進來了,規范也就能更好的運營,當時我就是一個人定了規范,只是單純把規范發給其他設計人員,他們沒有參與,自然不會使用規范,對里面的設計元素沒有加深理解。
這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力,這樣能把紕漏降到。
大家一般說的設計規范是界面的視覺規范,從UI的定義,User Interface—用戶界面,用戶與界面之間的交互關系,可以歸納規范其實可以包含兩大類,一類是視覺規范,一類是交互規范。
視覺規范可以給用戶傳達統一的品牌形象,確保視覺一致性。后期的設計元素須復合規范的原則。
交互規范可以減少用戶的學習成本,讓用戶有歸屬感。交互規范在制定的過程中,需要寫好交互規則與條件,不然后期維護會混亂。像蓋房子一樣,地基都沒打穩的話,整個樓都是偏的。
那在使用規范時,一定要遵循規范里的要求進行應用,否則會亂套,不僅起不到統一的品牌風格,反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。
節點和公司的進度搭邊,看當前的產品是應該先獨立風格還是先統一基礎規范。
1-固定的設計風格規范,比如:google的“扁平”,微軟的“磁貼”,可以全局使用,并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊,定好基調,不會走偏。
2-不斷優化的設計規范,根據公司的節奏,有些產品目前比較迫切的是需要界面統一性、交互統一性?;A做完以后,進而考慮產品固定風格。這種比較適合小團隊協作??梢噪S時調整。
利用粒子構成的原理與三維解構,一個組件被科學的三維解析后由粒子再構成,理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變,高度靈活
建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。
并不是每個時刻都能夠直接使用完整的組件,元素是我們工具庫必不可少的部分,它可以更大的方便你修改組件,再造組件以及特殊的排版,方便拖拉拽。
規范組件命名,方便查找、方便協作。
一鍵導出/同步組件到Sketch模板。
標注方面,目前我們團隊使用的是藍湖私有化。
一般情況下,公司有不同的產品線,且都需要長期的開發與迭代。
公司中,越來越多的設計師加入,設計風格需要統一。
設計體系里面包含了設計語言、設計規范,需要與前端、品牌、動態設計、 用戶研究等溝通,還是需要迭代優化的,這是非常繁瑣耗時的項目,初期會非常的艱難,當設計師開始做組件時,也是非常耗時的工作,需要考慮不同場景下的使用情況以及設計的延展性,都需要投入大量的設計人力。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在理解了80/20法則后,我們可以將此法則廣泛的適用于各個場景中,如下:
80/20法則也有一定的爭議,但是還是適用于絕大部門場景,當然特殊場景還是要特殊對待。80/20法則可以幫助用戶關注核心功能,最終達成目標。
很多時候我們會覺得情緒板設計可有可無,或者因為時間的關系不允許我們經過這一步。但,如我一開始提到的點,情緒板可以在前期幫助我們去打通很多思考的壁壘,輔助設計師在前期直觀的與產品側進行方向上的探討,從而找到大方向上的共識。
藍藍設計的小編 http://www.syprn.cn