三肖中特二八五 http://www.mubeei.tw 愛設計,愛分享。 Mon, 01 Jul 2019 07:51:05 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.1 漂亮調色板制作教程,新人也能學會 http://www.mubeei.tw/swatch-tutorial.html http://www.mubeei.tw/swatch-tutorial.html#respond Mon, 01 Jul 2019 07:51:05 +0000 http://www.mubeei.tw/?p=30841

色彩是品牌和產品設計語言系統中最重要的元素之一,色彩能引起我們共同的審美愉悅的。所以建立一個有序的調色板是非常重要的。我們在設計系統時會通過系統化思考去定義規范和原則。色彩也是如此,我們在嘗試配色時也應該合理的制定一套規范。 在這里,我們將定義色彩的規則并不斷延展增大它的適用范圍,在界面配色時能真正應用到。當你學會了定義色彩的方法還可以自由的組合它們了。 下面我列舉了一下色彩的屬性,我們會利用這些色彩屬性來定義更多的顏色。 色相(色調)即色彩相貌(比如藍色、綠色、紅色等) 色度是不包括亮度在內的顏色的性質,它反映的是顏色的色調和飽和度。 飽和度(純度)是指色彩的鮮艷程度,飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大,飽和度越大;消色成分越大,飽和度越小。 亮度或明度是指顏色的明暗程度。 不透明度是指顏色的不透明度值的百分比。 色調是通過向顏色中添加灰色,讓它比原始顏色更平淡。 暗色調是通過向顏色中添加黑色,讓它比原始顏色更暗。 淺色調是通過向顏色中添加白色,讓它比原始顏色更亮。

顏色屬性列舉,我們使用顏色屬性組合來展示顏色變化

我建立10等分網格,幫助大家更好的理解顏色屬性

框架網格

上圖顯示了特定顏色的明度/不透明度/色調/色度和色相之間的關系。上圖使用了10等分網格。顏色的不透明度在X軸上按10%循序變化,并且明度在Y軸上按10%循序變化。 我們用了上面的簡化版,使用25%來搭建我們的基礎框架網格。這個網格將作為我們的標準,會生成更多的顏色。 我用Sketch來創建框架網格,當然也可以用Photoshop / Illustrator / Figma 等其他設計工具中創建相同的框架網格。我們將用比較流行的HSB Color配色系統按照以下幾個步驟操作: 步驟1. 選擇一個色相,用它創建一個50 x 50像素的正方形。比如我選擇了藍色色相(H 212,S 67,B 89)。 步驟2. 創建一個10 x 10像素的白色方塊(H 0,S 0,B 100)。 步驟3. 復制這些白色塊(5行,5列),用它們覆蓋步驟1的整個方塊。 步驟4. 從左到右將每列白色方塊的不透明度降低25%。 步驟5. 將每排白色方塊的亮度從上到下降低25%。 現在你有了基礎的框架網格。我們將用它學習一些生成新顏色的方法。 為了更好地展示顏色變化,我用了3個色相作為案例。當然你可以根據喜好選擇自己的顏色

01. 深淺色調法

由于這個很簡單所用經常使用。基礎框架網格就是用此方法生成的。色相的白色方塊不透明度和亮度分別從100%到0%(從左到右)和0%到100%(從下到上)。 右側的顏色方案是用我們的3個色相創建的,并從左側的中間列(箭頭所示)中選擇不透明度和亮度值。

02. 疊加混合法

在此方法中,我們用了相同的基礎框架網格,并將白色方塊的混合模式更改為“疊加”整個網格上形成了美麗的色相變化。

03. 柔光混合法

與#2 疊加混合方法類似,我們將白色方塊的混合模式更改為“柔光”。然后我們選擇所有的白色方塊,并將它們復制兩次。這樣會產生更強的飽和度差異,從而產生更好的色彩鮮艷度。

?04. 冷色疊加混合法

此方法使用我們在#2 疊加混合方法中創建的網格框架。然后我們任意選擇一個冷色(例如藍色)。繪制藍色的矩形并將其放置在整個網格中。將其混合模式更改為“疊加”。生成的顏色網格具有鮮明的炫酷效果。

?05. 暖色疊加混合法

非常類似于#4 冷色疊加混合方法,在這里我們任意選擇一個暖色(例如橙色)。繪制橙色的矩形并將其放置在整個網格中。將其混合模式更改為“疊加”。生成的顏色網格具有戲劇性的溫暖效果。

?06. 亮度調整法

該方法與上述方法略有不同卻更容易。我們創建一個色相(如上圖左側所示),并通過分別增加和減少其亮度值來創建一系列淺色和深色。 右側的顏色主題是使用我們的3個色相創建的,然后簡單地增加和減少亮度值以分別創建深淺明暗變化。

?07. 亮度 飽和度調整法

該方法使用#6亮度調整方法的相同網格。在這里,我們調整飽和度值和亮度值。我們通過增加和減少其亮度值來創建一系列淺色和深色,同時分別降低和增加飽和度值。 規則1:較淺的顏色變化=較低的飽和度 較高的亮度。 規則2:較暗的顏色變化=較高的飽和度 較低的亮度。

調色案例

這是一個混合調色的案例,它結合方法#1,#3,#4和#5來生成漂亮的顏色調色板。這是我從Sketch Tricks上看到的一篇文章,可以在Sketch中快速構建色彩系統。

結論

當然還有更多混合方法可以生成顏色主題。當前創建基礎框架網格是最重要的部分。網格作為你想象力的樂園,可以生成顏色系統。你可以組合多種方法,從一個色相創建一組全新的顏色。(可以嘗試使用漸變而不是色相) 謝謝閱讀! 公眾號「設計達人」后臺回復“色板”,獲取Sketch文件 原文:https://medium.com/sketch-app-sources/building-a-color-palette-framework-96dbda541c2e 作者:Rahul Chakraborty 翻譯:水手哥(id:shuishouge_design)


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/swatch-tutorial.html/feed 0
網頁編輯器也美化,FiraCode 代碼專用等寬字體 http://www.mubeei.tw/firacode-font.html http://www.mubeei.tw/firacode-font.html#respond Sun, 30 Jun 2019 07:33:39 +0000 http://www.mubeei.tw/?p=30833

最近在更新設計導航 HTML 代碼時,發現有個樣式總是加載不出來,經過細看發現竟然是因為用了中文的雙引號導致,但因為網頁代碼編輯器西文和中文的雙引號太相似所以忽略查找這個問題,如此初級的問題卻浪費了不少時間…… 所以最終解決方案就是為網頁代碼編輯器使用代碼專用字體:FiraCode + 中文字體組合(也適用于網頁端),使用此方法,可以美化代碼效果,減少因字符視覺差造成的小問題,對眼睛疲勞也有一定緩解作用哦。

一、FiraCode字體

FiraCode估計很多資深編碼人員都了解過,在 Github 已經有30000 的 Star,它主要有2個特色: 1、字符等寬 每個字符寬度占用距離是一樣的,所以無論大小寫,你都能看到它是對齊的,但是若遇到有中文字體,這就不太好使了。 2、連字符號設計 當用戶如輸入 這兩個符號,就會自動連在一起。如下圖:

二、中文字體選擇

為了解決引號的視覺問題,我們還必須選擇中文字體,經小編測試一翻后,最后使用了思源黑體,這樣引號就比較好分別了。WIN 系統下顯示可能會更加明顯。當然最后還是個人喜好設置中文字體啦。

mac 系統 Atom 編輯器截圖

三、Atom 編輯器修改字體方法

小編使用的免費的 Atom 網頁代碼編輯器,所以只能用它來舉例,其它編輯器修改方法也大同小異,可自行百度哦。 1、選擇菜單 Atom ,然后在下拉菜單中選擇用戶樣式設置 2、在「atom-text-editor」加入 font-family 和 font-size 的 CSS 屬性:
font-family: "firacode-retina","Source Han Sans CN";
font-size:16px;
需要注意的是,小編使用了 Retina 屏的電腦,所以字體名稱就用「firacode-retina」,在非高清屏的下直接使用「firacode」就行,具體大家可以自己試試,區別不是很大。 具體如下圖:

四、下載地址

下載的字體非常全面,包含 ttf 及網頁端的eot, woff 等字體格式,無需轉換就能直接使用。 Firacode 官方下載地址: https://github.com/tonsky/FiraCode 思源黑體下載地址: http://www.mubeei.tw/app-she-ji-bi-bei-zi-ti.html

總結

使用FiraCode 中文的字體組合,不僅能讓一串串代碼變得工整美觀,還能減少因字符顯示引起的出錯率,推薦大家收藏使用。 ?


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/firacode-font.html/feed 0
感受文字元素的排版魅力 http://www.mubeei.tw/feel-the-typographic-charm-of-text-elements.html http://www.mubeei.tw/feel-the-typographic-charm-of-text-elements.html#respond Fri, 28 Jun 2019 10:24:49 +0000 http://www.mubeei.tw/?p=30831

排版的方法有很多,純圖形、純文字或圖文結合都可以,在視覺傳達設計中,版式設計的魅力就好似音樂的韻律。 而版式設計構思時常常要將攝影圖片恰當地考慮應用到設計中。設計師在決定了版式設計主題后,就要根據主題來選取合適的圖片運用到設計中去,同時還要掌握圖片拍攝與圖片處理的技術。 在沒有好的圖片素材可利用的情況下,是不是就沒有設計思路了? 來欣賞一組來自日內瓦平面研究設計工作室Futur Neue的作品,感受一下幾乎只有文字元素的版式魅力: Fonderie Kugler第1季 - 2011年海報 Fonderie Kugler CENC Residence - 2012年海報 HEAD第19期 - 2012年第1期 2/3 Caravelle - 報告活動 傳單2011 Fonderie Kugler Philippe Gindre Vernissage - 海報2012 #1 - Paper 2015 Futur Neue Paper Noir sur Noir 碳粉盒TN 2010 - 海報2016年 Armando,海報2017年 #6TypographischeMonatsbl?tter(TM) - Education 2017 年 2017年實驗海報2017年 Taxonomie - 2017 HEAD-Geneva?2017年 Floppies Grotesk 2017年 ESAD Caldas de Rainha(PT) - Outcomes Strip and Talk 2018 Junior Design Research Conference — Identity 2018 作品版權歸作者所有 圖文轉自@字體設計


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/feel-the-typographic-charm-of-text-elements.html/feed 0
同時擔任設計師&產品經理?我是這樣應對的 http://www.mubeei.tw/how-to-be-a-designer-and-product-manager.html http://www.mubeei.tw/how-to-be-a-designer-and-product-manager.html#respond Thu, 27 Jun 2019 07:34:37 +0000 http://www.mubeei.tw/?p=30829

“工作中難免遇到團隊部分職能缺失、人手不足等問題,需要設計師除完成本職工作以外,還要主動去承擔一些其他職能的工作,如產品經理、運營、項目經理等角色以便目標達成、想法落地。” 前段時間,本人有幸為自己之前負責設計的產品擔任項目經理&產品經理&體驗設計師,進行產品“體驗改版”,該產品屬于「后臺運維監控」產品,負責大規模、批量化的集群運維及服務部署、服務升級等操作,是在企業中銜接基礎硬件與上層服務的高復雜性、高專業性產品。改版內容則集中在前端框架與技術的重構、產品結構與信息的組織、交互流程與界面視覺的優化上。 首先介紹一下常見的改版方式: 1、老版正常在線上使用,起過渡作用,重新搭建框架建立一個新的平臺。功能逐步建立、完善,完成后遷移用戶。 前提:需要有相對整體和成熟的設計方案,讓大家對未知結果的投入達成一致; 風險:風險大,耗費資源相對較大,時間周期較長; 優勢:可以從頭思考、梳理,能從根本解決一些問題;優化的體感更強。 2、在老版的基礎上進行優化,整體架構保持不變,局部體驗優化。 前提:業務合作中常見的設計合作模式,局部功能優化,跟產品同步迭代; 風險:較難從根本上解決遺留的體驗問題;整個產品體驗較差,局部體驗改善容易被忽略; 優勢:風險小,投入的資源相對較少,結果可控,見效時間快;較容易達到預期。 本次我所負責的產品改版選擇的是「第一種方式」,風險相對較高。前期設計側通過用戶調研、痛點分析等設計方法的數據收集,已具備相應的數據支撐,明確改版的必要性;然后通過產出一版整體優化的設計demo來詮釋設計思路,與業務方對目標達成一致,明確本次改版的關鍵內容和為用戶解決哪些痛點。鑒于業務內容的保密性,這里不對設計過程做過多講解,本文旨在以設計師角度,如何看待項目管理的工作、職責,以及在整個過程中的收獲和對設計本身的價值。

一、項目管理需要做什么

一般項目經理(PM)在一個項目中的職能主要包括以下: · 負責項目時間管理與進度把控 · 協調資源來推動項目進度按計劃進行 · 平衡和適當的策略調整解決時間成本、資源間的相互制約 · 確保項目干系人之間的順暢溝通。 當承擔多個角色時,工作職責和協作的范圍邊界就會被擴大。一般體驗設計師需要重點關注在“需求對接”、“設計輸出”、“前端開發配合”這三個部分,同時參與“項目計劃”、“測試走查”這些環節。當站在PM角度,設計師除了關注本身的設計工作外,還需要關注整個流程中各環節參與者的配合與產出。 前期負責項目的用戶調研與數據分析、項目落地的節奏計劃、用戶需求的收集與對齊整理;中期實現階段關注設計、前端、后端的交付時間及質量;后期對測試bug的優先級進行規劃與解決方案確定,直至完成上線交付。 作為設計師還要負責所有需求的設計產出。由于在這個項目中設計師身兼多職,因此會將需求PRD、交互&視覺的設計在一個demo中同時產出,節省前端的需求了解和查看成本,也縮減設計者多文件輸出需求的時間。(當然具體工作分配要看項目投入的人力情況) 挑戰對設計師來說是一定存在的,但是這樣的機會確實也需要具備相應的前提: 1、業務理解與熟識程度 對你所負責的產品、業務具有較深入的認識和了解; 了解用戶使用中遇到的問題,并能針對問題提出有效的核心解決方案,而非單純的美觀。 2、信任 在平時的合作中與業務方建立的信任; 合作同事間的信任與配合意愿。 3、機遇 一般團隊會有專業的pm和產品經理,但有些產品團隊,人員配備不足; 產品體驗方面得到上層重視,自上而下推動。 4、老板支持 老板給予后盾與配合(自己的老板和業務方老板)。

二、經驗教訓

在設計師擔任項目管理和產品工作的過程中,初期遇到很多挑戰。本身開發技術對設計師來說就存在門檻,由于知識背景、工作內容的差異,以及前后端工作配合流程的不熟悉,導致工作評估不準確、項目延期等現象。總結下來,以下四點「經驗教訓」希望可以給有相似經歷的設計師以借鑒。 2.1 經驗:規則制定,“丑話”說在前面 前期確定統一的“完成”標準和項目合作規則,這點很重要,不妨先把“丑話”說在前面。比如我們項目組在啟動時就確定好了各參與者都需要遵守的合作方式,以確保進度的把控和必要的風險溝通。 但是,項目第一周期(根據需求優先級整個項目的開發周期分4個周期)完成后,就出現了延期現象,雖然延期在很多項目中不可避免,但還是期望能夠及時的發現問題、總結問題、反思工作,讓問題不像滾雪球一樣越滾越大,因此就第一周期的問題進行深度分析與解決方案的思考。 延期的原因主要有: 1、工作評估不充分,計劃太理想 現象:計劃時間無法完成計劃的工作,評估的時間不夠準確 結果:計劃的時間起不到約束作用 2、“完成、進度100%”的標準定義不明確 現象:了解工作進度時,可能統計已完成,但又會占用時間去測試、優化、調整;實現效果與需求不完全一致; 結果:進度評估不準確。 在充分了解需求后評估工作以及明確了“完成”的標準后,項目管理者會對整體環節的把控更加心中有數,也對可能會出現延期的部分留有空隙。 2.2 經驗:策略及時調整,有限時間內干更有意義的事 承諾的交付時間是確認的,因此,我們只能以deadline倒推。在剩余的時間內,我們能完成什么,從而有針對性的做排兵布陣。如果把時間比作一個盒子,當盒子空間固定,若要塞進更重要的東西,則需要將不那么重要的東西去除,否則盒子會爆裂。 同樣項目管理中需要及時調整計劃,在有限的時間內干更有意義的事,否則工作一直做不完,一直延期,產出的質量和項目目標都不如人意。我們需要及時根據優先級調整策略,對需求區分主次,甚至在某個需求中再拆解,如高級功能暫緩,先保證基礎功能的使用等。 2.3 經驗:核心體驗提升才是對用戶更有價值的事情 看了那么多改版產品的反饋,第一時間的不適應必然存在,尤其對中后臺運維產品來說“穩定”是用戶的訴求之一。但緊抓核心體驗,從功能層面解決用戶問題,最后一定是正向的評價與結果。如果新體驗的價值不足以掩蓋舊體驗的缺憾和切換成本,那么對用戶的價值也就微乎其微,甚至毫無價值,就如下面的價值公式。 雖然「老版」用戶使用具有一定的熟悉度,也有“小眾”“臨時性”的功能,但是「新版」可以從以下5個核心亮點出發,解決用戶使用中的體驗問題,從功能層面解決使用問題,這些優化對用戶是更有價值的。 2.4 經驗:積極協作,配合協調 1. 當項目出現風險,要及時找相關人甚至是上級尋求幫助,及時溝通、主動匯報; 2. 過程中遇到分歧及時溝通,避免問題越滾越大,影響效率; 3. 一定要在充分理解需求的前提下展開工作(設計理解PD需求,后端理解前端需求),否則后期返工代價很大。

三、成長收獲

我承擔這項工作的意義是什么? 設計師能做好項目管理及產品工作嗎? 接受這項任務時我也有疑惑,就像工作初期以及一些師弟師妹咨詢的困惑一樣:我現在做的很多事是產品應該做的,本應該產品輸入的信息需要我去協助他們甚至幫他們完成,這正常嗎?我應該這樣做嗎?我做產品方面的工作對我專業有什么價值? 我的答案是: 有價值!如果你是用戶體驗設計師,那就需要具備產品的思維,適當的產品工作與思考會幫助鍛煉產品思維,并且隨著工作的深入,設計能力與產品能力的交集會逐步擴大! 在《用戶體驗要素》一書中提到用戶體驗分為五層要素,分別為:表現層、框架層、結構層、范圍層、戰略層,將這五層的工作內容進一步解讀,會發現「結構層、范圍層、戰略層」屬于產品的職責范疇,它們對應的價值目標也存在交集,因此必然有些工作是交織在一起的。 3.1? 產品思維 產品思維讓我保持產品大局觀,從業務的根本去理解當前手頭工作的意義,以業務目標為導向; 從產品角度拆分功能、流程,明確做什么不做什么,確立最小功能集合,平衡投入產出; 設計需要價值導向,在專業價值的基礎上結合業務價值,更好的完成價值自證。業務目標明確的前提下,設計的重點會非常明確,知道發力點是什么。 3.2? 大局視角 視角的轉化,從頁面中的一個icon的美觀,一個組件規范、一個合格的頁面到整個項目的質量。 會把用戶真正需要的價值放在首位,在開發過程中,也會為了產品的性能、時間保障等,犧牲部分體驗的追求。 3.3? 組織協調 項目過程中任何環節出現問題,都需要第一時間站出來解決,或者找別人尋求幫助; 各方資源的溝通協調,以保障最后的目標實現。 3.4? 流程配合 更清楚前后端、測試的合作流程、以及各個節點的時間配比; 對一個項目開展的基本要素以及可能遇到的問題也有了更深入的認識,便于以后的工作交流。

四、總結

最后,在此總結一下設計師主導“技術產品”的項目管理工作的優勢和劣勢。 4.1 優勢 1、交互人性化 站在用戶角度思考交互行為和體驗,而非技術角度。 B端產品的體驗要求:高效、安全、簡單,通過設計減少用戶學習成本,簡化交互流程,使界面、信息易懂、易用。 2、全局考慮,設計一致性 從設計師視角出發,通盤考慮頁面展現形式和層級關系,可以將頁面進行類型劃分,便于產品的一致性與交互統一。 對功能入口及操作設計整合與規劃,而非隨意添加。 3、體驗意識傳播 在業務中為體驗發聲,關注體驗的重要性,從而進一步驅動技術優化。 4.2 劣勢 1、業務理解難度大 產品的專業名詞、技術概念理解成本較大; 需求業務邏輯強。 2、技術了解不足,各角色溝通成本較大 設計本身是一種感受、體驗,可以不是科班出身,都能通過界面或操作感受到好壞; 開發技術對設計師存在門檻,設計師無法評判好壞并真正理解; 溝通缺少共同知識體系,很有可能向技術妥協。 3、時間把控不準確 設計一般處在需求實現的前部分,會按照要求的截止時間完成工作,盡量節省出時間給后臺開發; 前后端開發的時間不可控,對設計師存在技術黑盒。 以上,是我個人基于本次工作的一些經驗與收獲,期望對有需要的設計同學有所幫助。 作者:晏菲 公眾號:TXD技術體驗設計


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/how-to-be-a-designer-and-product-manager.html/feed 0
再談用戶體驗設計——感悟與反思 http://www.mubeei.tw/user-experience-design-thinking.html http://www.mubeei.tw/user-experience-design-thinking.html#respond Wed, 26 Jun 2019 06:58:31 +0000 http://www.mubeei.tw/?p=30827

聽到“用戶體驗設計”,大家再熟悉不過,無處不在的“提升用戶體驗” ,張口閉口的“用戶至上”,時不時飆出的“以人為本”,近幾年“重視體驗”這股風,吹的設計師心里美滋滋,心想終于知道老子的重要性了。 然鵝,當膨脹中的你發現,有些產品的體驗做的極為相似,但其中一款的用戶量,照樣被另一款碾壓時;有些產品的設計明明做的很爛,依舊有很多用戶樂此不疲的使用時,你內心會不會覺得那“重視體驗”有毛用。 工作時間越久越發現,比起產品出現的時機、定位、戰略,所謂的“用戶體驗設計”有時顯得非常無力。 所以,在無數次因為我跟迪麗熱巴一樣晚上堅持不吃宵夜而失眠的夜里,都會忍不住比較有深度的問題,比如:“用戶體驗設計的價值真的有那么大嗎”? 今天擼篇文章,跟大家分享一波夜深人靜中大牙的相關思考。

什么是用戶體驗設計?

有沒有人跟我一樣,被近幾年各種的“UX”、“UE”、“UI”、“GUI”、“UXD”、“HCI”等不同的專業名詞搞的一臉懵逼,鬧不懂究竟有什么本質區別,嚇得自己趕緊捂住Z罩杯的胸口喊:我是誰,我在哪,我是不是要失業了!更不用說什么是用戶體驗設計了。 我們在談“用戶體驗設計”之前,首先要弄懂“什么是用戶體驗”,官方對它的定義是:用戶在使用產品過程中建立起來的一種純主觀感受。 “用戶體驗”這一概念第一次是在Donald Norman 2010年在Uxdesign.com發表的《UX Design Dedined》一文中被提起的。 那“什么是用戶體驗設計”呢?官方定義是:以用戶為中心的一種設計手段,以用戶需求為目標而進行的設計。 官方定義總有一種魔力,就是里面字都認識,但就是看不明白、記不住。所以,貼心的牙把它翻譯成大白話:好的用戶體驗設計就是圍繞著用戶目標,設計出讓他們覺得真香、還想要的使用感受。

為什么要重視用戶體驗設計?

道理都懂,大家都知道對用戶來說,產品當然越好用越好,但是對于以商業化為最終目標,在資源有限情況下的企業來說,為什么需要優先重視用戶體驗設計呢? 經過分析,我把它大致分為以下兩個原因:1.“用戶體驗”不止于外觀;2.“重視體驗”是必來趨勢。

1.“用戶體驗”不止于外觀

很多人提到“用戶體驗”,下意識的覺得就是設計師做的事兒嘛,比如:交互合不合理,視覺好不好看。真的是這樣么? 我們想象一個場景:當讓你評價淘寶和京東哪個體驗更好時,你會怎么評價? 你會發現,你更關注的是網站上有沒有你要買的東西?價格ok不?能不能快速找到?質量靠不靠譜?支付方不方便?商品多久能到?出問題了有沒有服務保障?因為任何一個環節,都會影響著你對體驗的評估。 可以看出,“用戶體驗”不僅限于人機交互,它是用戶使用產品時整個過程的體驗和感受。 《用戶體驗要素》這本書,把影響用戶體驗的因素分為5個層次:a.戰略存在層;b.能力范圍層;c.資源結構層:d.框架層;e.感知層。 tips:大家都見過上面這個框架,但有多少人會在日常工作時代入式的去思考呢?今天又拿出來說它,其實是想著大家平常在做設計時,一定要有產品框架思維的意識去做設計,不要僅停留在好不好看層面,撿了芝麻丟了西瓜,抓不住問題本質,而盲目的成為這條gai上,最單純的畫圖仔。) 我們拿美團舉例:因為最近關于美團“變黃”了的文章,在我公眾號列表里刷屏了,下面我們嘗試著拿“用戶體驗五要素”來看這件事兒。 a.戰略層 戰略層是一切產品體驗的根本,在這一層要考慮的兩個問題:1.產品想得到什么?2.用戶想得到什么?如果這一趴都想不清楚,就別再想后面的體驗了。 那么美團的戰略是什么呢? 可以看出,近幾年美團已經從以前的“團購產品”,把戰略聚焦為Food Platform,正以“吃”為核心,建設生活服務業從需求側到供給側的多層次科技服務平臺。 它的這個戰略,跟用戶最基礎的“食”、“住”、“行”需求完美匹配(“衣”的話應該也不是美團的優勢,已經被阿里滿足的很好了)。 因此,找到“產品定位”和“用戶需求”之間的平衡點,是保證用戶體驗的第一步。這也就解釋了為什么有很多產品明明交互視覺體驗很爛,還是會有很多人使用,是因為它們在戰略層做對了。 a.范圍層 范圍層指的是:1.我們要做哪些事;2.我們不做哪些事。 如果沒有清晰的戰略,產品就會出現什么都想做,什么都做不好,別人做啥我做啥,用戶一臉懵逼的看著跟自己毫無關聯的功能。有了清晰的戰略,“范圍層”就可以朝著戰略的方向變化、拓展。 比如,美團明確了自己的戰略后,就一直圍繞著“戰略層”拓展自己的功能和服務。 “吃”前你要干嗎?對,出行,因此有了打車和騎行服務;“吃”后你要干嗎?唱唱歌,看個電影吧,因此有了娛樂相關服務;“吃”太多胖了怎么辦?游泳健身服務了解一下... 再比如,支付寶戰略是:鏈接和“錢”有關系的一切服務。因此,在范圍層就不在對“社交”抱有太大的執念,而是也不斷擴充相關功能服務,例如:轉賬、余額寶、記賬本、彩票、生活繳費、發票管家,等等...(他們這種多維交鋒超級場景的打法,還使支付寶在2019年3月份,移動互聯網app用戶規模增長排行中,排名第二,同比增長1.3億,僅次于抖音。) 可以看出,有了清晰的戰略,“范圍層”不僅不會被競爭對手牽著鼻子走,且使產品帶來正向收益,同時還給用戶提供了更聚焦的服務體驗。 c.結構層 結構層是根據“范圍層”確定下來的功能和信息,通過分析這些信息之間的關系,進行結構化的歸納組合,使其符合用戶心里心智。 下面是美團目前涉及到的大概的功能信息結構: 有一個問題大家可以思考下,“訂單”其實是屬于“我的”范疇內,在大眾點評和淘寶里,它們只是“我的”里面的一個入口,而在美團確單獨拎出來一個tab來承載它。 所以在結構上,不僅要分清楚功能信息之間的從屬關系,同時也要考慮自己產品的特性,進行處理。 合理的結構層,能夠使產品功能得到合理的曝光,同時也能讓用戶快速找到他們想要的內容。 d.框架層 框架層是基于我們上一趴“結構層”梳理出來的功能信息,進行可視化的框架設計,這部分一般是由交互設計師來完成的。 這塊我想說的是,有趣的、創新的交互形式固然重要,但是解決產品真正問題,才是最核心的。 比如,拿美團首頁的框架舉例,來看看交互設計師應該如何思考。 我把整個首頁分為了:基礎功能區、生活服務區、廣告區、內容推薦區、導航區。 首先我們看下“基礎功能區”,由于它在不太易操作頂部,所以把位置留給操作頻率較低的功能,比如:“位置切換”、“ ”功能;或者給更加全局性的功能:“搜索”。 然后,左上角的個人頭像,點擊進去里面是產品的“積分體系”,這是給運營同學,讓他們通過一些積分任務手段提升產品的留存和活躍,因此在首頁露出(但感覺也沒什么人用)。 “生活服務區”,“生活服務”是整個產品戰略的核心,也是用戶來這個產品的首要目標,因此要放在金剛位。 “廣告區”,是擔負著產品收入目標的,放在生活服務區下面,能夠確保在小屏手機也能漏出,不然廣告方會不同意,這畢竟是商務同學好不容易談來的合作(但如果廣告質量不好的話,會很影響用戶體驗)。 “內容推薦區”,不僅為用戶推薦了優質的內容,同時也給優質的商家更多曝光機會。這樣同時鼓勵其他的商家,告訴他們如果你好好干、好好服務,用戶口碑好了,你也能上推薦位,上來后就會有大波流量過去,你就能賺更多的錢。這樣商家開心、用戶開心、平臺也開心,良性循環。 “導航區”這塊就是全局的導航,大家都很熟悉,就不過多介紹了。 因此你可以看出,框架層要考慮的因素包含著:產品戰略、商務合作、運營玩法、商家流量、操作體驗等。 優秀的交互設計師,在框架層不僅要權衡好功能之間的主次關系,同時還要平衡好產品目標和用戶體驗的之間的關系。 e.表現層 最后一趴“表現層”,也是用戶最直觀能感受到的地方了。雖然這層經常被稱為“視覺效果”,但是,它絕對不是說好看、好炫就完事兒的。而是你有沒有清晰的傳遞產品定位和業務目標。 比如,像開頭所說的“美團變黃了”,不僅在線上的APP整體升級。 線下的周邊產品也全黃了。 他們為什么要變黃呢? 這個時候,如果你僅僅局限在視覺設計師思維里說:“因為黃色代表這生機、活力、充滿正能量...”,我想說:“這位太太那邊請..”。因為這個理由太表層。那么,視覺設計師應該怎么思考呢?首先,這個問題你要分兩層來看:1:它為什么要變?2:為什么是黃色? 1.它為什么要變? 從戰略角度上來看,他們定位是生活服務平臺,那么也就意味這是線上和線下相結合的。 目前美團的產品線在品牌認知上比較散,沒有統一的認識,如何做到線下品牌和流量和線上品牌和流量的認知形象達到一個點上,才是核心問題。他們應該是想形成自己的視覺錘,讓用戶有統一的認知,所以才要變。 2.為什么是黃色? 美團的四大支柱業務分別是:外賣、到店、酒店/旅游、出行,其中外賣是流量最大的,而且大街上無處不在的穿著黃色衣服的外賣小哥,一看就知道是美團外賣,已經無形中扎根于用戶心智中,在很多人心中美團外賣=美團,所以選擇黃色,看起來是最合適的,教育成本最低的選擇。 所以,視覺設計師在日常工作中要學會抓住問題的本質,要抱著解決業務問題的心態,去做設計,才能給用戶傳遞更優的體驗。 總的來說,“用戶體驗”不止于外觀,它不僅包含“框架層”和“表現層”,還包含著戰略層(我們想得到什么和用戶能得到什么)、范圍層(我們做什么和不做什么)、結構層(信息怎么歸納更合理)。 只有把每一層都配合好,才能打造出讓用戶感覺“真香、還想要”的產品體驗。只有更多人愿意使用,產品才能更好的實現最終商業目標,因此,企業需要重視它。

2.“重視體驗”是必然趨勢

除了上面說的原因,往外看大的環境,“重視體驗”將成為必然的趨勢“。這是為什么呢?因為:a.互聯網紅利期已過;b.體驗經濟時代的到來。 a.互聯網紅利期已過 大家應該都知道,互聯網企業的高速發展,離不開互聯網人口紅利期。但是目前紅利期已過,再也不是那個就算你體驗做的很爛,先把用戶框進來就完事兒的時候了。 那在好日子到頭的時候,企業該咋辦呢? 目前很多企業都在尋找突破口,它們開始從之前的“追求增量”,轉化為“挖掘存量”用戶價值。 怎么提高存量用戶價值呢?就像開頭所說,企業的最終目的都是為了商業化的話,怎么能從存量用戶身上賺更多的錢呢? 拿產品的增值服務舉例,很多企業采用不同營銷手法,讓用戶感覺產品“便宜”;或者運用價格歧視,最大限度地降低消費者剩余,讓他們從腰包里掏出自己能付的最高的價格,等等的方式... 但是不管怎么搞,身為企業最核心的還是為用戶提供真正好用的產品體驗,讓用戶愿意留下(留存)、愿意常來(活躍)、最終愿意花錢(商業化),最終覺得值(復購),才能成為一個長期且良性的循環。 b.體驗經濟時代的到來 人類的經濟社會經歷著從農業經濟時代、工業經濟時代和服務經濟時代到體驗經濟時代的過程。 拿媽媽為小孩準備生日蛋糕為例:在農業經濟時代,媽媽拿自己家農場的面粉和雞蛋等材料,親手做蛋糕;到了工業經濟時代,媽媽到商店花錢買混合好的盒裝粉回家,自己烘烤;進入服務經濟時代,媽媽是去超市訂購做好的蛋糕;到今天,媽媽不僅不需要自己哼哧哼哧買蛋糕,甚至都不用自己費事辦生日晚會,只用花錢把生日晚會交給別人去做,對方提供一條龍的服務,讓他們為熊孩子籌辦一場難忘的生日晚會,這就是體驗經濟的誕生。 體驗經濟時代,“用戶體驗”為什么該被重視? 因為在這個時代,顧客/用戶購買的不僅僅是產品本身,而是一種服務,是一種情緒上,情感上,精神上的體驗。 比如,下面這幾款APP,從互動的形式,到文案的互動,都是更像是跟真人對話,而不是停留在滿足功能就ok的層面。 像“52赫茲”這個APP,它的靈感來自“世界上最孤獨的境遇Alice”,說很多時候我們就像這只鯨一樣跟別人頻率不同,無人收聽。它希望成為復雜網絡海洋中的信號中轉站,順著頻率尋找或遇到最同頻的人。你會發現近兩年,一些產品從品牌故事、玩法、到文案都更加情感化的趨勢。 因此,在這個高度同質化物質化的時代,能夠重視用戶全流程體驗,提供真正用心的服務,是企業競爭的核心要素,也是在市場紅海中制勝的法寶。 總的來看,不管是企業本身要意識到用戶體驗的重要性,從大的環境和所處的經濟時代來看,"重視體驗"對企業的發展也是不可忽視的。

如何衡量用戶體驗的價值?

上面說了“什么是用戶體驗設計”,以及“為什么需要重視用戶體驗設計”,接下來面臨的難題就是該如何衡量它的價值。 就像開頭所說的,用戶體驗是一種純主觀的感受,如此主觀的感受,我們如何衡量它的好壞呢?怎么才能判斷資源投入進去值不值得呢? 目前,常見的衡量方式大致有兩種:1.定性;2.定量。 1.定性 常用的定性分析方法有:用戶訪談、用戶體驗地圖、焦點小組,等等。 定性分析,是調研用戶對自己產品整體體驗的主觀感受。這個方法的優點就在于:你能夠近距離的、比較自然的環境下,跟用戶進行深度溝流和觀察他們行為反應,是“臥槽,牛逼”的感嘆,還是“尼瑪,傻逼”的抱怨,還是一臉茫然的困惑。 2.定量 常見定量分析的方法:用戶問卷、數據試驗等等。 它是對大體量的代表性用戶,進行封閉問卷訪問,或者對產品進行數據埋點。然后,將把相應的數據進行整理,通過數據統計等方式量化出來結論,優點就是比較客觀。 比如:我們常用的A/B測試法,在絕大部分條件不變的情況下,只改變少量用戶體驗相關的條件,對比產品的相應指標在修改前后的數據變化:用戶完成任務所需要操作步長是否減少?用戶使用時間/頻率是否增加了?等等... 但是,如果把上面這兩種方式,單獨去使用去驗證用戶體驗價值的話,定性(訪談、焦點小組)相對有點主觀,而定量(A/B實驗等)又偏向于微觀層面。 所以今天跟大家推薦一個衡量方法:Google的HEART模型,它的優點在于整個模型中包含著定性和定量,能夠收集到用戶的主觀感受,也可以獲得客觀的數據呈現。 HEART模型包含以下5個維度: 分別所要評估的內容是: 網上對這個模型的介紹文章還挺多的,我就不啰里八嗦的重復介紹了,感興趣的自己去查一波。 衡量用戶體驗價值的方法有很多,但我們要意識到,不同方法具有相應的優缺點,采取最適合自己的,從而通過結論指導著產品前進方向,驗證著體驗設計的價值,才是最重要的。

總結

總的來說,用戶體驗設計是以用戶為中心的設計手段,企業需要重視它的原因是:它不僅停留在表現層及框架層,而是深入到戰略層、范圍層、結構層;同時,用戶體驗設計也隨著互聯網紅利期過去及體驗經濟時代,而成為企業的核心競爭力。 最后,被認為相對主觀的用戶體驗設計價值的衡量標準,也陸續以客觀的、可量化的模型進行科學驗證,目的是為了證明體驗設計所帶來的價值,使企業有方向的去支配資源,同時實現最終的產品目標。 作者:大牙兄,公眾號:大牙的設計筆記


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/user-experience-design-thinking.html/feed 0
統計2000+海報,分析出提升BANNER點擊的6大因素 http://www.mubeei.tw/tisheng-banner-dianji-de-6-da-yinsu.html http://www.mubeei.tw/tisheng-banner-dianji-de-6-da-yinsu.html#respond Tue, 25 Jun 2019 04:23:19 +0000 http://www.mubeei.tw/?p=30825

好創意帶來生意增長,最近,阿里媽媽發布《美妝行業淘寶首焦創意洞察》,該報告聚焦在2200組海報投放效果進行分析,挖掘海報創意特征對點擊效果的潛在提升效應,如果一直沒什么創意思路,不知道如何提升點擊,建議看看這篇文章,做一張合格的能提升點擊的 BANNER 海報吧。? 在短視頻發展快速的當下,為什么圖片依舊重要? 在阿里媽媽高級行業研究專家蘇寅看來:“從展現上來看,圖片創意依舊是品牌方與用戶溝通的重要抓手。作為基礎媒介,圖片與視頻可以功能互補。” 但是很多設計師在面對運營提出的需求,最終作品經常在銷售與審美中間打架。 這次通過《報告》可以為好作品提供數據支持。 我們發現在資源位與定向固定的前提下,創意設計往往是影響點擊率的第一要素。 那一個好的創意設計如何煉成? 下面我們通過海報組成的6個元素,依次為你解析影響點擊的因素。

一、圖片調性

我們發現以有品質感的場景為背景的圖,并且產品清晰的圖片,會比純色、單色海報點擊更高。最高提升25%點擊。

二、顏色

美妝banner中主色調使用頻率最高的背景色Top 3、18%白色,11%紅色,11%灰色。 但是我們通過數據對比發現,上面這幾種顏色并不是點擊最高的。 而是清新有機的綠色背景的點擊提升119%。溫暖肌膚的棕色為背景的能提升65%。且遠高于其他顏色! 雖然這兩個色調不是美妝常用色,但可以在美妝banner中脫穎而出。

三、標志

Logo放的越多點擊率越低,一般放一個就合適。

四、商品擺放幾個合適?

不放產品反而點擊不錯,這招難道是無中生有。

無產品擺放

多產品擺放

多產品擺放

五、文案內容

海報中有節日熱點詞、比如618、女王節等,對提升點擊有明顯幫助。

六、模特放幾個合適?

明星不包含分析因素中,美妝模特多為嘴唇,手指..臉等身體部位。 在沒有產品的情況下,多個人物有明顯的點擊提升。

總結

1、高品質的場景圖,比純色背景更有利于提升點擊。 2、自然綠色和親膚棕色對提升點擊有幫助 3、logo一個就行,別擺太多 4、不擺放或擺放3個以上產品更有利于提升點擊。 5、文案可以選擇熱點節日詞、品牌詞、促銷詞匯 6、沒有產品情況下,擺放3個以上模特效果更好。 是不是和你想的不一樣?最終還是要用數據說話:-) 擴展閱讀:《這樣設計提升Banner 90%的點擊率!》 本文結論和數據來自阿里媽媽創意中心。《報告》這次主要聚焦于美妝行業,通過對2200組創意樣本的算法支持及數據分析。


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/tisheng-banner-dianji-de-6-da-yinsu.html/feed 0
illustrator大氣、科技感的Banner設計教程 http://www.mubeei.tw/daqi-kejigan-banner-sheji-jiaocheng.html http://www.mubeei.tw/daqi-kejigan-banner-sheji-jiaocheng.html#respond Mon, 24 Jun 2019 07:58:29 +0000 http://www.mubeei.tw/?p=30823

今天和大家分享一個實用的illustrator海報設計教程,主要是實現客戶經常說的大氣、科技感的效果,效果圖如下,是不是看起來很復雜的樣子?不用擔心,其實也就簡幾步就能實現,沒什么復雜的技法,會AI基礎的同學就能制作出來哦,下面我們一起來學習吧! 這里涉及到的第一個知識點就是畫圓點虛線,在 Ai里畫圓點虛線的方法有好幾個,這里給大家分享一個最簡單的。 第一步:用鋼筆工具隨意畫一條線,在描邊面板中把描邊的粗細數值設為5; 第二步:把描邊的端點改成圓角; 第三步:勾選虛線選項,然后把虛線數值改為0,間隙數值設為6,圓點虛線就做好了。 效果如下: 原理:線是由無數個點沿著一條路徑排列而成的,當把畫筆的端點設置成圓角時,就代表這條直線是由圓點組成的,只是因為每個圓點挨的非常近,所以看起來就像一條線。而勾選虛線選項就是為了使這些圓點分開,虛線的數值表示虛線的長度,我們只需要維持圓點本身的狀態,所以這里的數值要設置成0。畫筆的粗細值就是圓點的直徑,而間隙就是指相連兩個圓點的圓心之間的距離,當間隙的距離等于圓點的直徑時,這兩個圓點正好想切。所以間隙距離必須大于圓點的直徑才能成為真正的虛線。 第二個知識點就是混合工具,這個大家應該都有所了解,我就簡單的說一下。 第一步:在畫板里畫一個圓圈,然后在它的外圍畫兩個扭扭曲曲的線框,如下圖,(其實只要兩個對象就能就能做混合效果,不過對象越多變化會越豐富,當然也更難控制): 第二步:同時選中這三個圖形,然后在菜單欄的對象中選擇混合-建立,就得到了如下效果。 提示:我們還可以雙擊工具欄中的混合工具,在間距選項中點選“指定步數”選項來修改步數。 搞清楚了圓點虛線和混合工具后,前面所說的那張海報就水到渠成了,我們只需在把已經畫好的輪廓圖形的描邊參數改成如下就好了。首先我們來設置最里面的圓圈的參數,虛線數值為0,間隙為5。 然后再來設置外圍兩個線框的參數,中間線框的間隙參數設為7,最外線框的間隙參數設為9,這么做是為了虛線的間隙從里往外變得越來越大。 調整好參數后就得到了如下效果,如果對輪廓的形狀不滿意,還可以用直接選擇工具,拖動外輪廓上的錨點和手柄來調節形狀。 調整后大致效果如下,中間部分變化比較小,外圍部分變化比較豐富。 調整好后把圖形復制到Ps中填充顏色,具體顏色大家可以自由發揮。 最后再把圖形周圍用蒙板擦一下,使其融進背景里,搭配一點文字就完成了,最終效果和原圖會有所差別,但方法就是這樣。 第二個我要分享的技巧是如何做出用圖形組成的球體效果,如下圖。 很多人可能會以為這個需要3D軟件才能完成,其實通過Ai就能很快做出來,操作方法如下。 第一步:排列一組圓點。 第二步:從窗口菜單欄中打開符號面板,選中排好的圓點,然后在符號面板的底部點擊新建符號圖標,于是我們就把這組圓點設置成了符號,創建這個符號是為了后面貼圖用。 第三步:用圖形工具畫一個圓,填充一個顏色,然后刪除最左邊的錨點,這樣我們就得到了一個沒有封閉的半圓。 第四步:選中圖形,在效果菜單欄中找到3D效果,選擇繞轉,然后我們就打開了3D繞轉選項的面板。 第五步:在3D面板中保留默認參數,然后勾選左下角的預覽,我們就可以看到剛剛創建的那個半圓已經變成了一個球體。 第六步:點擊預覽旁邊的貼圖選項進入貼圖面板,然后在面板頂部的符號欄中選擇剛剛創建好的圓點符號。 第七步:點擊面板左下角的“縮放以合適”按鈕,再點擊右下角的“確定”,這時我們可以看到圓點已經附在了球體表面。 第八步:回到“3D繞轉選項”面板后,把透視參數改到80左右,這時球體上圓點大小的對比就變得更強烈了。 然后我們可以把鼠標移到左上角的立方體處,拖動立方體以調整預覽圖的角度,完成這波操作后就有了如下效果。 通過創建不同的貼圖符號,我們可以做出很多類似的效果。 第九步:把球體圖形擴展后,取消群組、釋放剪切蒙板,我們就可以把附在球體表面的圓點貼圖單獨拿出來了。 同樣,其他的圖形也可以拿出來,這種形式我們也能在海報設計中常常看到,而想要得到前面提到的效果,我們還需要填充顏色,以及重新添加一個圓底。 第十步:畫一個與圖形同樣大小的圓,填充好漸變色(用漸變網格工具效果更佳)。圖形也可以填充一個類似的顏色,然后疊印在剛剛畫的圓上就可以了。 不同的貼圖和顏色搭配可以得到不同的效果。

總結

設計技巧雖然不是設計最本質的東西,但它是可以使設計變得更好看、更新穎、更具視覺沖擊力的有效手段,并且它可以大大提高工作效率,所以也很值得我們學習和研究,希望這篇文章對你有用。 作者:蔥爺 ID:congyenanian


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/daqi-kejigan-banner-sheji-jiaocheng.html/feed 0
UI的標簽設計千變萬化,你真的了解它嗎? http://www.mubeei.tw/ui-tag-designs.html http://www.mubeei.tw/ui-tag-designs.html#respond Mon, 24 Jun 2019 00:00:55 +0000 http://www.mubeei.tw/?p=30821

我們在設計某一個頁面的時候,同時需要給頁面提取賣點增加標簽。設計標簽不難,但用好它就不容易了,很多設計同學可能會出現下面這幾種情況: 借鑒:別人加什么標簽,咱就加什么標簽; 順從:產品說啥就是啥,老板說啥就是啥,開發說啥就是啥; 腦殘粉:某文章某設計說過某產品適合某種標簽,這就是圣旨; 顏控:一切原因只因為好看; 霸道:別問為什么,我現在只能想到這類樣式。 一個小小的標簽就可以映射出設計領域里面的很多門道。想要做好標簽,首先要正確認識標簽。

標簽

標簽是信息集合的一種方式,他給目標確定關鍵詞,便于用戶查找與定位,而在 UI 中,作為事物抽象的定義,用于用戶標記和算法識別。 1.傳達信息:傳達產品基本信息、優惠信息、產品賣點,建立操作預知 在視覺層面上標簽常用于傳達產品基本信息、優惠信息、產品賣點等。對產品而言,它能優化信息層級,又能簡單明確的傳達產品特點;對用戶而言,可以第一時間獲取關鍵信息,降低用戶閱讀門檻。 此外標簽也用于建立用戶操作預知,例如音頻標簽、視頻標簽等,讓用戶在點擊前預知點擊后的效果。 2.?關鍵詞標簽:方便分類、優化搜索 標簽廣泛用于用戶區分產品內容,進行分類,進而確定關鍵詞,優化搜索。為用戶打上不同的標簽,用于區分不同用戶群體,分類精準定向推送產品,例如:考拉的搜索發現。 3.?營銷引流:提升點擊率,增加轉化率 標簽還可用于吸引用戶注意,建立好感,直擊對應痛點,提升用戶購買欲,提高點擊率與轉化率,最終促使用戶下單。例如電商類型的限時搶購、京東自營、美團專送等。 4.?交互減步長 標簽也可作為搜索和關鍵字的存在,方便用戶跳轉到下級頁面,進行流量分發,也方便用戶快速、直接的找到自己想要的相關產品,做到交互減步長。

場景

標簽樣式千千萬萬,各式標簽要怎樣運用到我們的產品中?下面一個案例,我們將一一為大家講解析。 美團外賣是我們經常使用的一款促銷型 APP,在美團外賣 Feed 流頁面,美團用不同樣式的標簽將文字層級清晰的分級,讓用戶能立刻得到自己想看到的信息,從而達到首頁的分流,促使下單。 問: 為什么美團外賣會有不同類型的標簽? 在標簽的樣式中這些層級如何劃分? 不同類型的標簽樣式都能很好的區分信息層級,降低用戶的閱讀門檻; 從視覺上,我們可以解答出來,色塊占比越大、飽和度明度越高的標簽層級越高,所以可以得知: 問: 當我們得到這些模塊后,憑什么來給這些信息評判等級? 我們是否可以隨便將提取的信息進行層級劃分呢?當然不是。 下面我們將從用戶層面、產品層面、視覺層面 3 個方面為大家講解:

01.需求拆解

產品的角度:產品需要用戶能快速篩選信息,促使用戶下單 用戶的角度:用戶需要商品與自身相匹配,能快速找到需要的信息

02.需求分析

當我們得到需求后,要如何去分析需求的重要程度?這里我們可以從用戶層面產品層面分別去了解需求對用戶與產品的重要程度,在配合著?KANO 模型對需求進行評分,根據最后分值對需求進行視覺的層級排序 ??從用戶層面去了解 大品牌(干凈健康、口碑可靠“3分”) 大品牌的入駐意味著平臺具備較強的可靠性,而且大品牌更注重口碑,食物一般會比較干凈、健康,用戶會放心的下單購買 優惠(優惠力度的強弱“3分”) 當我們確定平臺的可靠時,食蔬的干凈健康后,那么價格是否能接受,是否能最低的價格享受最好的食物也是吸引用戶下單的一點,如果一個大品牌的店鋪你可以用 60 元享受 8 斤小龍蝦,健康的食材、優惠的價格也是決定著用戶下單的重要因素。 評論(優質的評論能很好的吸引用戶嘗試“2分”) 當然不是所有的商戶都是比較知名的品牌,當用戶撇開品牌去了解一個新的店鋪,之前顧客的留言點評就起著很大一部分決定的因素,菜品是否新鮮干凈,口味是否美味,這都可以從之前顧客的評論中得出。 特色(保證用戶需求的前提下提供的驚喜服務“1分”) 特色意味著一些小的服務,比如:今日過生日,下單后老板多送一個小蛋糕一張小賀卡。之前抖音曾經火過一段時間的視頻:點一份外賣,老板會按照用戶的需求畫一個動漫小人物之類的。 如果在口味相差不多,價格差別不大的情況下,這些小的驚喜服務也是顧客喜愛的一點。 ??從產品層面去了解 大品牌(流量、提高用戶信任感“3分”) 大品牌入駐可以引入品牌的流量,也提升了用戶對平臺的信任感,提高用戶下單率。 評論(優惠力度的強弱“3分”) 優質的評論對用戶來講真是真實可靠的,對于產品而言,優質的評論可以提高用戶的購買率,提升店鋪的曝光度與店鋪對平臺的依賴度。良性的評論圈能讓平臺用最少的成本獲取最大的收入。 特色(提升用戶的重復購買“2分”) 對產品而言,店鋪的特色服務能很好的挽留用戶,提升用戶的重復購買率。 優惠(平臺商家獲利少“1分”) 對于平臺商家而言越大的優惠獲利越少,雖然用優惠來吸引用戶是比較高效的,但是也是最下下之選。 當我們從用戶層面產品層面詳細的分析了需求后,在 KANO 模型上為需求打上分值,這樣我們就能在提升用戶滿意度的同時,完成產品的需求。

03.視覺展示

得到標簽的成績區分后,我們需要在視覺層面上直接展示給用戶,讓用戶能直接的接受重要的信息。 當然,標簽樣式不僅僅是簡單的色塊、描邊的疊加,還有樣式的疊加。比如為了更應景,在旅游類 APP、購票類 APP中。我們是否可以將標簽樣式設計成實體票務的樣式,讓用戶有更有代入感,更能理解呢。

總?結

好的設計可以驅動著數據,一個小小的標簽也可以在無形中給用戶驚艷的感覺。本篇文章從認識標簽到需求分析,從信息分級到視覺設計進行了統一的講解。 【認識標簽】 標簽可以用于信息的傳達、建立操作預知,也可以幫用戶及產品進行分類,也可以進行營銷分流智能場景的運用。 【標簽視覺層級的劃分色塊占比越大,飽和度明度越高的標簽層級越高,越能吸引用戶的注意;反之純文字型標簽與灰色線框標簽層級較低,用于點綴于輔助信息的傳遞。 【標簽信息層級的劃分】 拿到需求后,不隨便的臨摹競品,有理有據的使用 KANO模型進行需求分析,得到用戶與產品想要的效果。 【視覺設計】 融入彩蛋型設計如:票務型圖形標簽設計、飛豬品牌元素標簽設計等等,讓設計更貼近品牌與生活。 生活是多元的,設計是也多元的,它不會朝著一個方向持續發展,它會發展成各種各樣的樣式。設計來源于生活,且豐富生活多彩的一面。 如何讓設計更為出彩,要看你站在什么角度去審視自己的設計。最后,希望本篇文章對你在標簽設計上或者生活上有更多的幫助。 作者:ethankdesign | 公眾號:RTK設計研究室


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.mubeei.tw/ui-tag-designs.html/feed 0
三肖中特图特码早公开