92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

設計定義

鶴鶴

人類一切創造性活動造物活動都可以稱為設計,這是從廣義角度去理解設計的定義。從狹義角度理解設計的定義,設計就是構想和解決問題的過程。應以人為本,通過系統化的方法滿足消費者的市場需求,進而產生功能價值審美價值。


除了廣義與狹義的設計定義,處在不同時期不同的人站在的角度和立場均不同,產生的觀點是各抒己見,各不相同。在國內考研只用采用其中一種定義就可以了,但知識是要去學習和理解的,這里我研讀了近100本書籍,把所有關于設計的定義都整理出來供大家學習與參考。

 


設計的定義


彼得·勞倫斯(美國設計學會創始人):設計是一種手段,通過這種手段可以提高生活質量,并能有效的滿足人類的需求


王受之教授:設計是把計劃、規劃、設想、解決問題的方式,通過視覺化的形式傳達出來的過程


《大不列顛百科詞典》(1786年 / 工業革命前):設計指的是立體、色彩、結構、輪廓、線條、形狀、比例、動態和審美方面的協調

 

《大不列顛百科詞典》(1976年 / 工業革命后):設計常指擬定計劃的過程,又特指記在心中或者制作成草圖的具體計劃

6:19 STUDIO - slava balbek / Nata Kurylenko

 


《簡明不列顛百科全書》(1985年 / 中美編譯):Design包含兩個層面,第一個層面指“心理上的計劃”,即計劃的思考與擬定計劃的過程;第二個層面指“藝術計劃”,即把計劃中的想法制成草圖的具體計劃。

 

《韋伯斯特大辭典》(名詞方面):針對某一目的在腦中形成的規劃;根據對象預先所作出的模型;文學、戲劇作品的輪廓;音樂作品的框架;視覺藝術作品的線條、細節、外觀等方面的相互關系

 

《韋伯斯特大辭典》(動詞方面):頭腦中的想象與計劃;策劃;創造功能;為了達到目的而進行的創造、規劃和計算;用商標、符號表達;對物象的描繪;零部件的形狀與配置

 

《牛津英文詞典》(1588年):設計是由人所設想一種計劃,或是為了實現某物而做的綱要

6:19 STUDIO - slava balbek / Nata Kurylenko


《授予博士碩士學位和培養研究生的學科專業簡介》(1999年):設計是一門多學科交叉的、實用性的藝術科學,其內涵是按照文化藝術與科學技術相結合的規律,創造人類生活的物質產品和精神產品的一門科學

 

柳冠中教授《工業設計學概論》:設計應該被認為是一種方法論,應提高‘一切人為事物’的角度來認識

 

李硯祖教授:設計是人類改變原有事物,使其變化、增益、更新、發展的創造性活動,設計是構想和解決問題的過程,它涉及人類一切有目的的價值創造活動

 

尹定邦教授:設計其實就是人類把自己的意志加在自然界之上,用以創造人類文明的一種廣泛的活動,設計是一種文明

6:19 STUDIO - slava balbek / Nata Kurylenko

  


我國《高級漢語大詞典》:按照任務的目的和要求,預先設定好工作方案和計劃,繪制出為解決這個問題而設計的圖案

 

我國綜合字典《辭海》:設計指“按照任務的目的和要求,預先定出工作方案和計劃,繪出圖樣,為解決這個問題而專門設計的圖案”

 

赫伯特·西蒙《人工科學》書中的一段話:凡是以現存情形改變成向往情形,為目標而構思行動方案的人都是在搞設計

6:19 STUDIO - slava balbek / Nata Kurylenko  



阿切爾:設計是圍繞目標的問題求解的活動

 

路甬祥:設計是在一定的約束條件下,最合理的滿足社會的需求


佩齊:設計是從客觀現實向未來可能富有想象力的跨越

6:19 STUDIO - slava balbek / Nata Kurylenko

 


???/strong>:設計是獲得足夠把握前,對未來產品盡可能多地模仿

 

喬尼斯:設計是表達一種精粹信念的活動

 

里斯維克:設計是從無到有的創造,創造新的、有用的事物

 

 


考研知識


國內的知識大多數采用國內教育工作者對設計的定義,例如我們在網上查關于設計的定義,一般都會出現相同的搜索結果,也就是《現代漢語詞典》對設計的定義,即“在正式做某件工作之前,根據一定目的的要求,預先制定方法、圖樣等。

6:19 STUDIO - slava balbek / Nata Kurylenko

 

另外考研的知識點還有設計的核心內容知識,包括以下三個階段;


第一階段 計劃,構思的形成

第二階段 將計劃、構思、設想、解決問題的方式利用視覺化的傳達方式表現出來,如圖紙、制作效果圖、模型等

第三階段 將設計的方案實施完成    

 

 

 

附加知識


以上指的設計的定義是不包含工程設計的,工程設計主要解決人造物(機械、設備、交通工具、建筑等等)中的物與物之間的關系,包括產品的內部功能、結構、傳動原理、組裝條件等。


工程設計主要是研究和實施建筑、城市、景觀設計與工業產品(建筑屬于工業)、造型設計、功能性設計、結構設計、可靠性設計、生產工藝設計、生產系統集成設計等的工程技術領域,工程設計更注重產品的實施與落地。

6:19 STUDIO - slava balbek / Nata Kurylenko

工業設計就是對工業產品的使用方式、人機關系、外觀造型等做設計和定義的過程。他將產品的功能通過有型的方式創造性的體現,使得工業產品和人的適當的、高效的,甚至有情感的交流得以實現。是一種產品與人溝通的語言,是工業產品和人之間的重要紐帶,是用戶體驗的決定性組成部分。


文章中提到的設計是解決物與物關系的同時,更側重于解決物與人的關系問題,考慮產品對人的生理、心理的作用。因此設計是包含藝術審美同時又有科學技術的人文科學、社會科學相結合的藝術。

文章來源:站酷   作者:羅耀_系列

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

B端Dashboard設計指南系列

鶴鶴

Dashboard的含義

前言

Dashboard在B端設計的工作中是一個繞不開的話題,在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。


什么是Dashboard?

Dashboard的中文直譯是儀表盤,最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序,用作稱為“widget”的小型應用程序之運行基礎。



B端常見Dashboard

2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達,對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是:為用戶提供全局概覽,讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據,功能和控件。



Dashboard設計案例

以下是Dashboard常見4點設計不是很好的案例,現在帶大家一個個看下怎么才是更為合理。


案例一:右邊Dashboard上的信息做了層級的區分,相對左邊更加直觀。


案例二:左邊Dashboard顏色偏熒光色,色彩語言相對右邊不適合長期工作使用。


案例三:設計方案時沒有采用格柵格化解決適配對不齊等等問題


案例四:dashboard模塊之間間距沒有呼吸感。



B端Dashboard的功能分類

設計師需要了解的功能分類

B端設計中,設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出:“業務整體狀況如何?有哪些關鍵指標?各指標的運行情況分別如何?哪些指標出現異常?需要用戶做些什么?”。由此可知,B端Dashboard產品中大多數都以看為主,輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時,可以用戰略概覽場景提供快速入口。



1.監控操作:

使用戶可以一目了然地檢查其狀態,提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。


2.分析處理:

通過數據圖表,配合控件進行不同維度的數據分析。以數據為中心,并顯示盡可能多的相關數據視圖。


數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度,更好分析決策。


綜合性Dashboard,既有提供數據全局概覽可視化,同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求


3.戰略概覽:

在復雜的業務中,可以呈現業務分散的重點信息,用戶可以通過提供入口快速跳轉至相關模塊。



設計前分析

了解Dashboard的用戶

B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后,我們再來了解下用戶場景。例如:用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能:充值。并且需要給到相應充值數據概覽:賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮,可以做到幫助設計師更清晰設計dashboard布局以及設計自查。

因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。



信息處理

當弄清楚需要呈現信息內容后,需要進一步對信息做處理。從用戶的角度,舉個例子在FMS財務系統記賬中,財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求,準確且高效。具體可以從以下四個維度來做進一步處理:覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個,確定核心指標的聯系及優先級。

合理的信息結構能夠幫助用戶高效閱讀,理解內容。如何將信息碎片有邏輯地組合在一起,合理呈現和布局,選擇使用什么結構視內容而定。


舉個例子:

對于管理者的角色來說使用Dashboard的訴求是:及時把控業務情況

信息處理內容:

1.掌握重要業務數據:經營數據,訂單數據,客戶數據;

2.了解員工工作進度;

3.處理急需解決的工作任務。

對于執行者的角色來說使用Dashboard的訴求是:高效完成工作任務

信息處理內容:

1.急需解決的工作任務:待發貨訂單,待退款,待跟進客戶

2.了解自己的工作進度

3.經常使用的功能:發布商品,添加客戶,開單

4.查看重要通知公告:公司發布的公告


了解Dashboard的表現設計類型

Dashboard表現結構常見兩種類型:卡片型、流程型。


卡片型

最常見就是卡片型。即將有相關聯的內容進行分組呈現,讓Dashboard內容歸類而不雜亂無章。


流程型

內容相互之間具有一定的邏輯關系,如地理位置關系、數字包含關系、對象父子關系等,這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。



Dashboard的設計

Dashboard的表現構成

國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。


1.全局導航

在B端Dashboard中,全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。


1.1平臺LOGO

一般這里都會放LOGO,對于一些壁壘標準化B端服務,這里通常是給好標準規則,后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務,那么就可以直接定制設計。


1.2功能入口導航

就是菜單導航,在B端Dashboard一般都是在側邊。建議最多不要超過9個,遵循7±2原則。盡量將同類型歸類,好好利用下二級分類。另外入口不要太深,用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。


在國內B端產品中,最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統

優點:

拓展性,一級導航的數目可以展示更多;

層級清晰,一二三級導航都可以流暢展示;

操作效率高,用戶在操作和瀏覽中可以快速定位和切換當前位置。

缺點:

視覺動線左右折回,比頂部導航更易疲勞,

內容區的排版空間更小,需要考慮適配問題。


在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式?;旌夏J骄褪菍⒐δ苋肟诜譃轫敳颗c側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。

優點:

層級拓展性強,可達四、五級導航。

缺點:

操作難度上升、視覺動線更復雜。



還有一種模式:頂部模式,這種模式在國外產品中較多,在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式,在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航:saleforces、hubspot、zoho。

優點:

沉浸感比側邊以及混合都要強,幾乎不會對于用戶的閱讀行為有干擾,因為Web也有頂部瀏覽器菜單。

缺點:

一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式



1.3快捷功能導航

一般包含:消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角







2.數據概覽

在B端Dashboard中,數據概覽通常都是選取最關注的數據指標來展示,而不是全部數據;選取最關注的時間段,而非全部時間段。

構成:數據名稱+數字

這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點,甚至可以采用特殊的數字字體,例如DIN系列,來加強對比。



3.待辦事項

待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間,避免遺漏任務。

構成:待辦事項名稱+數字+可點擊跳轉的鏈接

待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點,數據必須是要能夠點擊的,因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來,平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下,可以采用tap切換的樣式全部展示出來。



4.常用功能

用戶高頻操作快捷入口,點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣,需要仔細反復斟酌是否是用戶需要的高頻功能。



5.任務進展

用戶當前最關心的任務,常用進度條或者時間軸的形式表示。



6.平臺推送

平臺用來觸達企業的信息,一般有產品更新動態,學習培訓,客服,廣告推送,活動消息(這個一般比較常出現在平臺類的b端產品中)



7.卡片式數據圖表

卡片式數據圖表可以拆分成圖表+輔助兩種組成部分


7.1圖表

B端設計師需要準確通過圖表來表達出用戶需要的維度信息。

7.1.1折線圖

隨時間(連續內容)而變化的連續數據,適合表現趨勢。Y 軸刻度值選擇要合理,以數據波動要最大化的顯示


7.1.2面積圖

面積圖和折線圖比較類似,針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個,有2個數據類型時,注意調整面積區域的透明度以及色系保持統一



7.1.3柱狀圖

通常用來統計累積疊加數據,數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值,單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素,不夠嚴謹,太活潑。最多使用兩種顏色,一種默認,一種hover或tap,保持界面統一性



7.1.4扇形圖

有共同的上一級層級作為統計總合,數據之間平級且有占比。數據必須是正整數,至少兩個以上數據,且用不同顏色表示




7.1.5環形圖

與扇形圖很相似,但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗,控制好留白呼吸感




以上是常用的圖形圖表,絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習

EChart:

https://echarts.apache.org/examples/zh/index.html

AntV:

https://antv.gitee.io/zh](https://antv.gitee.io/zh




7.2輔助元素

卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成:標題、軸、提示信息、標簽、氣泡信息、功能(篩選、導出、保存)。當然在實際設計中,會根據場景去修飾刪減一些元素,以此來減少冗余信息,幫助用戶快速達成目標,在最少的時間內獲取更多的信息。



7.2.1標題

標題是區分卡片信息,迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復,簡潔概括。



7.2.2軸

軸上最重要的內容就是單位,將每個數據在同一軸上都是維持同種基準。便于進行數據測量。



7.2.2.1軸的細節

現在知道了軸由哪幾部分構成,那么接著了解細節



軸線

軸線細節一般只考慮是否顯示,在有網格線的情況下,可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏,突出視覺重點,減少不必要的線條。


軸刻度

軸刻度是軸線上的間距不宜過密,確保信息可讀性以及呼吸感,根據 7±2 法則,在可見的卡片內盡量保持這個規則,可以利用抽樣顯示的手段來優化軸標簽重疊的問題,這種一般是在連續性內容上可以使用。若軸上單位信息確實過多,雖然是連續性內容例如展示30天單位,由于本身卡片信息不是過于最重要層級,設計在相對狹小空間尺寸中,那么建議考慮在軸線上安排滾動條,并將重看單位放置前位。設計特別注意點,將滾動條設計作為輔助元素不宜搶視覺。


網格線

網格線是用來輔助圖表數據直觀對比的,增加數據更快速的閱讀性。舉個例子:數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。




7.2.3提示信息

以對照的方式來理解可視化對象的項目歸類信息,總結圖形形狀和文本組成內容。



7.2.4標簽

在圖表中,標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。



7.2.5氣泡信息

當標簽默認不顯示,氣泡信息一般是鼠標tap或者hover時,顯示該位置的數據。在簡潔的頁面中,也能讓用戶直觀看到信息對應數據結果



7.2.6功能

這個模塊涉及的內容偏多,在表單頁面更常出現,以后有機會可以單獨說。一般常用功能如篩選、導出、保存。可以讓用戶控制和友好的體驗



確定B端產品的設計風格

首先tob的產品dashboard說到底還是給使用用戶所使用,也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息,還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感,而是突出一種安全,高效,具有客戶親和力的商業產品特性。那么關鍵詞:服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。



色彩

常說色彩是一種情緒版,在Dashboard設計中,色彩也是映射關鍵詞的非常重要一個環節



字體

B端產品一般都是以數據為主要信息源,針對一些關鍵信息指標時,可以采用特殊的數字字體。由于本身數字字體包內存不大,所以也方便調用。例如DIN系列等等



設計稿尺寸

本篇內容都是針對pc端內容,具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計,但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同,C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶,哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。



設計原則

上面的內容更多是闡述每個部分的內容,實際工作中設計Dashboard時不一定按照那個順序進行,因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景,確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后,再開始考慮Dashboard設計執行。


同時在設計執行上也要特別注意幾個點:

1.突出核心指標(7個左右)

2.信息層級區分

3.減少用戶選擇,盡可能默認給到用戶需要的數據維度

4.界面簡潔嚴謹

5.避免過多顏色與不統一

6.數據維度正確圖表選擇



設計的注意事項以及建議

1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建,以便與研發團隊一起為業務助力。更好更快的發展。

2.在tob的dashboard設計中,設計師要特別注意數據表現的落地效果

3.當dashboard只在設計層面改版,并且改版內容過大時,推薦保留舊版入口,提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計,以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章:《B端必看的引導設計(一)》

4.允許用戶定制和共享dashboard,雖然不適用于所有的B端產品,如果類似于團隊協作中多種角色共用一套的dashboard平臺,可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求,并且能夠增加dashboard的使用率

5.dashboard關鍵信息數據盡量設計在一屏以內,作為數據可視化,內容快速瀏覽獲知全局,并且完成任務是比較重要的。

6. 突出統計數據的變化并對異常情況作出反應

7.數字設置不一定要設置為右對齊,但是單位是金額,那么要將金額設置為右對齊,為了使用用戶識別方便,快速比較。

8.設計完Dashboard一定要自查一遍,是否真的符合工作人員的使用場景。有沒有理解不準確的地方。



最后

為什么b端設計師要懂得Dashboard,在很多b端業務場景中,有個特點,設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知,就有很大的可能性會造成信息雜亂,并且在Dashboard的界面中充斥著一些無關緊要的指標,這就是失去了Dashboard存在的意義。另一方面在b端產品中,Dashboard往往是以首頁的形式出現的,是非常重要的。

文章來源:站酷   作者:一九互七

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

目標導向設計介紹

濤濤

前言

設計驅動已經成為 vivo品牌重要的產品和服務理念。作為設計師,這意味著我們在承接日常設計需求外,還要主動發現并解決產品中存在的問題。設計提案,就是針對某個問題或機會點,系統分析產品現狀并給出解決方案,以實現設計驅動的重要途徑。

除了設計提案外,設計方法復盤、行業分析報告、流程規范建設等也可作為產出對象,受限于篇幅,本文所介紹的方法主要針對設計提案的選題。

合理的選題讓設計提案事半功倍

過去的兩年里,UED 團隊的同學們共輸出 40+篇設計提案,我本人也寫過幾篇,踩過一些坑,也積累了一些經驗??傮w來說,一份優秀的設計提案當然離不開嚴謹的分析過程、合理的模型選取和可落地性強的解決方案,但更前置的往往是設計提案的選題。

選題體現了我們是否定位了產品中存在的重要問題或設計機會點,決定了選用什么模型分析問題、產出什么解決方案。

大廠都在用的目標導向設計,快來學會!

△ 圖1 設計提案的執行過程

選題不當可能會導致:寫了一半才發現設計側根本無法解決該問題(比如解決問題主要依賴于內容引進),或者產出了方案但因問題優先級低而無法落地。因此本文主要基于 UED 團隊的實踐經驗,對目標導向的選題常用方法進行介紹,以確保我們的提案在“解決正確的問題”。

什么是目標導向的提案選題方法

設計提案的目的是解決問題,但難點在于:要解決的問題并不是每次都顯而易見,且不是每個問題都適合用提案的方式去解決,產品有什么體驗問題、哪些需要用提案來解決,很多時候需要我們主動去發現和定義。

目標導向的選題方法,就是指從不同的目標出發,通過分析或拆解目標,來定位問題或機會點的選題方法(除此之外,我們還可以通過用戶體驗地圖分析、行業趨勢分析等來發現問題,這些本文暫不涉及)。

“設計是圍繞目標的求解活動① “L. Bruce Archer

按照雙鉆模型,確保”做正確的事”需要經歷發現到收斂的過程,將其用于選題便是選題收集、選題評估兩個階段。在選題收集階段,我們從體驗設計所針對的不同目標出發,通過對目標的分析和拆解找到待解決問題,初步確定多個選題方向。在選題評估階段,我們需要對前一階段得到的若干選題進行價值和提升空間評估,最終定義出合理的選題方向。

大廠都在用的目標導向設計,快來學會!

△ 圖2 目標導向的提案選題方法

1. 選題收集階段

體驗設計是用設計的思維和方法達到某種目標,互聯網產品的體驗設計重點關心的目標主要有商業目標、用戶滿意度、戰略規劃。因此,以目標為導向來收集選題,就是指通過分析影響以上 3 個目標達成的關鍵因素,來收集多個備選選題。

通過拆解商業目標收集選題

通過對留存率、日活數等核心數據指標的拆解來定位關鍵影響因素、確定提案方向,能夠讓提案結果更易量化、產出方案更易落地。

Step 1 了解產品當前階段的主要商業目標

一般來說,產品側每個季度或每年都制定 OKR 或 KPI(如將 vivo 商城復購率從 x%提升至 y%、將瀏覽器的日活從 x 萬提升至 y 萬)。設計師需要明確產品的核心數據指標是什么,尤其關注其中與用戶體驗相關度高的指標。以信息流產品來說,如果其內容主要來自于合作商,那么我們更應該關注閱讀時長和留存等指標,而非資訊內容豐富度指標。

Step 2 對商業目標按多個維度逐層拆解

明確目標后,需要對其進行拆解,才能將結果目標轉化為設計可發力的過程目標。目標的拆解需要確保每次拆解都要符合 MECE(同一維度、不重不漏)原則,常用的拆解維度如下所示。

大廠都在用的目標導向設計,快來學會!

△ 圖3 商業目標的常用拆解維度

以 vivo 商城為例,假設其 2021 年的目標是:成交轉化率提升 47.6%,達到 0.26%(數據已經過脫敏處理)。我們可以對影響目標達成的要素按照行為路徑進行如下拆解(本案例也可按公式法進行拆解):

大廠都在用的目標導向設計,快來學會!

△ 圖4 成交轉化率拆解案例

Step 3 定位影響目標達成的關鍵因素

結構化拆解目標后,即可結合產品迭代歷史和現狀,對影響目標達成的關鍵要素進行定位,進而初步確定提案方向。接上文案例,由于下單→支付環節(即結算頁)的體驗優化剛進行不久,且通過購物車下單的用戶占比較少,因此可將提案方向定位至商品詳頁下單轉化率提升,初步確定選題“商品詳頁下單轉化率提升設計提案”。

通過產品戰略規劃分析收集選題

如果說商業目標是產品預期達到的結果,那么戰略規劃就是達到結果所計劃采取的路徑。從戰略規劃出發,構建新功能、解決新問題,協助產品達成戰略規劃,是提案可嘗試的重要方向。

方法 1 通過構建新功能幫助產品達成規劃

不同于商業目標,戰略規劃往往已經給出了接下來要重點發力方向、或給出了功能范圍。但一些情況下,規劃并不會具體到該方向上要做哪些功能以及做成什么樣。因此,設計師可以基于戰略規劃,以提案的形式對設計機會點和方案進行詳細分析,以協助產品達成規劃。

以 vivo 的一款視頻產品為例,為了提升時長,產品側計劃 Q1 季度提升視頻內容消費深度,但尚未給出從功能層面具體要做哪些改進。因此我們將提升用戶消費深度為提案目標,深入分析了深度消費的現狀和場景,提出了若干設計優化建議。

方法 2 通過解決新問題幫助產品達成規劃

由于產品功能模塊之間存在耦合關系,規劃中的新增業務可能使得已有功能體驗跟不上業務要求(比如信息流產品發力視頻方向,可能會對下載視頻的體驗帶來新要求)。通過分析新增業務涉及的場景和使用鏈路,發現鏈路中可能出現的新問題,是從戰略規劃出發確定選題的方法之一。

以 vivo 帳號業務為例,有個性化頭像昵稱的帳號一直以來占比都較少,由于之前社交場景較少,這種現狀對產品體驗影響不大。但隨著公司在直播、視頻等內容產品投入的增加,社交場景逐漸變多,頭像和昵稱也逐漸成為用戶社交的阻礙因素(比如使得主播與觀眾無法正常打招呼)。因此我們對現狀造成的問題進行了系統摸排,確定了將“提升帳號用戶信息完整度”作為提案方向。

通過用戶滿意度分析收集選題

除幫助產品達成商業目標和戰略規劃外,提升用戶滿意度也是體驗設計的重要目標?;诋a品用戶滿意度現狀和目標分析,我們有望快速定位產品中的低滿意度模塊,確定提案方向和范圍。

方法 1 通過滿意度調研數據定位問題

選題前期可廣泛閱讀相關調研資料和用戶反饋,對產品的滿意度情況有較為全面的認識。用戶滿意度可能來自于以下渠道:

  • 用研團隊提供的用戶調研報告
  • 可用性測試所發現的問題或優化建議
  • 論壇或內部員工的體驗問題反饋

由于不同渠道(甚至同一份報告)得到的滿意度數據可能較為分散,我們需要將低滿因素按功能模塊歸類,以便更好地定位問題。以 vivo 商城為例,通過閱讀商品詳頁用戶滿意度報告,并對低滿意度反饋進行歸類,我們發現低滿因素主要集中于以下兩個方面:

大廠都在用的目標導向設計,快來學會!

△ 圖5 商品詳情頁評價數據歸類

明確了低滿模塊及問題歸因,便可從問題出發得出提案主題。通過對 vivo 商城商詳頁問題的歸因,可確定如下提案主題:“商品詳情頁信息展示優化設計提案”或“評論發表率提升設計提案”。

方法 2 通過用戶情緒曲線分析定位問題

即使沒有滿意度調研數據,或有整體滿意度數據但沒有具體到功能,我們仍然可以通過繪制用戶體驗地圖、分析用戶情緒曲線,來定位滿意度低的模塊、確定選題方向。

繪制用戶體驗地圖的方法和傳統過程的區別不大:首先明確產品中用戶的主要任務或目標,列舉出用戶的主要行為路徑;然后基于用戶的目標,考慮用戶在每個環節想要的是什么,分析當前行為路徑中可能存在的用戶痛點或機會點。需要注意的是,由于只是收集提案選題,對場景和問題的分析不必過于深入,只需發現哪個任務或模塊體驗問題較多即可。

比如通過對 vivo 視頻用戶觀影行為的興趣曲線分析,我們發現看劇方面的體驗問題不大,但找?。ㄓ绕涫强磩∏暗恼覄。┐嬖诘耐袋c較多,因此可將找劇行為優化作為提案方向。

大廠都在用的目標導向設計,快來學會!

△ 圖6 追劇行為用戶體驗地圖(已簡化,僅供參考)

方法 3 通過產品功能競品分析定位問題

如果說情緒曲線是通過分析用戶執行任務的流程來發現問題,那么競品分析則是通過分析產品所滿足的用戶需求來發現問題。雖然功能多并不能代表體驗好,但基礎功能的缺失也可能帶來體驗問題。因此從功能范圍的維度進行競品分析,定位基礎體驗較差、或設計機會點較多的模塊,也是收集提案選題的方法之一。

為了讓我們在做競品分析時更加聚焦,對于復雜度較高的產品,我們有必要先按照功能模塊拆分,復雜度越高拆分粒度越細,反之則越粗。以 vivo 瀏覽器為例,若只拆分為搜索、信息流模塊則粒度太粗,可將某個模塊繼續拆分,以便進行競品對比時更加聚焦。

大廠都在用的目標導向設計,快來學會!

△ 圖7 瀏覽器信息流功能模塊拆分示例

拆分功能模塊后,接下來就是選擇競品了。需要強調的是,針對某個模塊做競品分析,競品應優先選取該功能模塊做的相對成熟的、有特點的競品,而不是只選擇主屬性相同的產品。比如要分析瀏覽器信息流評論功能與競品的差距,選取的競品可不局限于瀏覽器類產品,網易云音樂、今日頭條等 APP 都可作為對比對象。

選取競品后,可從結構層、框架層等方面對本品和競品間的體驗進行對比,以便發現存在明顯體驗短板的功能模塊。為了方便定位問題,可通過模塊子功能對照表對完整性進行可視化對比。當然也可以從操作反饋、美觀度等維度對比。

大廠都在用的目標導向設計,快來學會!

△ 圖8 信息流評論與主流競品功能對比

找出功能缺失嚴重、或使用體驗明顯低于競品的模塊后,可考慮將優化該模塊的體驗作為選題。比如通過將瀏覽器信息流評論模塊與競品對比后發現,其整體體驗均遠低于競品,因此可考慮將“信息流評論優化設計”作為提案選題方向。

小結

以上是 3 個以目標為導向發現問題、收集提案方向的方法,可根據產品現狀選擇部分或全部使用。發現問題階段一般來說需要至少得到 3 個以上待選提案主題,以便進一步評估確定。

2. 選題評估階段

得到多個備選主題后,接下來我們需要對其進行綜合評估,并最終篩選確定一個(如果是多人參與,也可以確定多個)當前階段重點著手解決的問題。

規范化選題描述

僅僅一行選題題目并不能幫助我們清晰地了解其價值和背景,為了方便評估和對比,我們需要將選題的描述規范化。由于設計提案選題和研究論文選題過程類似,因此可以借用《研究是一門藝術》②中給出的論文選題三段式模板:“我打算寫_,因為我想_,這樣就能_”來清楚定義選題的題目、要解決的問題、以及期望達成的目標。比如,我們打算以提升商城評價發表率為提案方向,可將其規范化描述如下:

大廠都在用的目標導向設計,快來學會!

△ 圖9 提案選題描述模板

對選題的價值和預期結果進行評估

通過模板我們描述了提案要解決什么問題、以及解決該問題給業務帶來的價值。接下來需要對備選選題按業務價值和提升空間兩個維度進行評估,目的是排除“問題存在但價值較小”或“價值大但設計側難以解決”的選題。

當備選選題難以決策時,我們也可以繪制一個簡單的二維坐標對其進行量化評估。比如,假設選題 1 是優化購物車使用體驗,選題 2 是提升商品搜索效率,如果前期預研發現設計側提升空間差異不大,但優化搜索帶來的價值相對較高,那我們就可初步確定選題 2 為提案方向。

大廠都在用的目標導向設計,快來學會!

△ 圖10 提案選題評估維度

與設計 leader 或產品經理溝通確認

受限于經驗和視野,設計師個人對選題價值的評估和設計 leader、產品經理間可能有所不同。因此正式敲定選題前,最好與設計 leader 及產品經理進行同步,達成一致后方可正式開始提案的撰寫。

小結

該階段的目的是對前期發散得到的選題方向進行評估篩選,以便將個人精力聚焦在提升空間大、價值大的選題上。為此我們首先需要按模板對選題方向進行整理,再對選題按設計側提升空間、業務價值大小兩個維度進行評估,最后與相關方溝通確認,最終敲定選題方向。


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

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


辭典精譯 | UI組件要點「狙擊」:文本欄及表單設計奧秘解析

鶴鶴

文本欄&表單設計 


表單已經存在了很長一段時間,自誕生以來極大地簡化了起草申訴和各種法律訴狀的任務。隨著信息與處理技術的進步,收集數據的手段也在不斷發展,而印刷表單已存在多年,我們可以從其設計中學到一些技巧。



文本欄解析

用戶可以在文本欄內輸入信息,它們通常以表單和對話框的形式出現。文本字段組件的設計應為交互提供清晰的功能支持,使字段在布局中易識別、易填充和可訪問。



以下是組成文本欄的關鍵要素:

容器:可交互的輸入區域;

輸入框:在文本欄中輸入文字;

提示:告訴用戶給出的表單字段是什么信息;

占位符:是所需信息的描述或示例,用戶輸入正確信息內容后被替換;

幫助程序或驗證文本(可選):單獨出現或以驗證消息的形式出現;

頭部圖標(可選):描述文本字段的輸入類型;

尾部圖標(可選):輸入文本的附加控件,例如清除,隱藏/顯示等。


01 文字欄類型

它們大多數都是相對基礎的文本字段類型,被修改成了處理特定類型的信息,例如信用卡號。以下是我創建的UI中最常用的一些輸入類型示例:



02 對收集數據使用適當的輸入類型

為收集的數據提供幫助規避錯誤,讓用戶可以正確的輸入信息,從而使過程簡單高效。



03 文本欄必須根據狀態和交互更改外觀

文本欄的狀態可以通過視覺提示來實現,輸入信息時的狀態有以下幾種:未激活、懸停、禁用、激活,驗證、錯誤。所有狀態應清楚地被區分開,并在整個表單和應用中保持一致,簡潔明了,不要誤導用戶。



04 選擇最佳的文本欄樣式

通常標簽定位有三種:頂部、左側和右側對齊。最適合的樣式將取決于表單的大小、主要目標、組件庫和要為其設計的平臺,但它們都有各自優點和缺點。



谷歌的“材料設計”指南中,普遍使用的下劃線輸入并不是最佳選擇。有趣的是,在一項研究結果中發現用戶更喜歡帶圓角的輸入框。


05 左對齊標簽

當用戶不熟悉所請求的數據時,這是一個不錯的選擇。

優點:易于標簽伸縮,充分利用垂直空間;

缺點:標簽與對應的文本欄,距離過元,增加用戶閱讀的時間成本。



06 右對齊標簽

與左對齊標簽相比,完成時間快了將近兩倍。

優點:標簽和輸入欄靠近,限制了眼睛移動的次數,從而縮短了完成時間;

缺點:難以快速瀏覽表單并理解所需的所有信息。



07 頂部對齊標簽

在移動設備上效果很好,因為它們不需要太多的水平空間。

優點:用戶可以快讀瀏覽輸入標簽和輸入文本;

缺點:需要更多垂直空間。



08 文本欄長度應與輸入內容呼應

表單中的所有文本欄,若設置相同長度確實會顯得非常美觀,但實際在操作上,卻很難完成。



09 占位符不能替代標簽

占位符文本消失會給用戶制造緊張感,而去掉標簽,用戶則無法在提交表單前檢查他們提供的信息。如果在設計時需要極簡的表單,可以使用“材料設計”的浮動標簽法。表單內的占位符文本還會使用戶感到困惑,最好在字段外使用提示文本。



10 幫助用戶填寫表單

使用自動完成功能,填寫時會幫助填寫及查詢。一般在輸入時可以看到,對查詢內容按Enter或右箭頭鍵就完成了填寫;

使用Auto-Suggest搜索關關鍵字和短語時,下拉列表會顯示多個建議;


預填充字段會經常使用智能默認值,比如通過IP或地理位置,就能檢測獲取到用戶所在的國家和城市,或是根據常見的場景,自己定義默認情況下的內容。需要注意的是,電子商務是一個例外,請勿預先設置與購買相關的任何偏好,比如尺寸或顏色;



還有一種應用情境,自動完成功能可以幫助用戶做出正確決定或避免錯誤,比如用戶轉帳時看到賬戶余額等,請一定要提供該信息。


11 使用實時在線驗證

指的是用戶輸入信息后,可以實時檢查輸入內容的有效性,而不是等用戶提交表單時一次性檢查。正確應用,降低信息出錯率:

在輸入內容的文字欄下方顯示驗證消息;

不要突然蹦出嚴重警告,填寫的消息錯誤時,應告訴用戶如何解決,而非責怪。



12 減少字段數量

消除視覺及認知負擔,使界面看起來更加簡潔。

不要將全名和日期之類的文本分成多個字段;

不要多次詢問相同的信息。



13 隱藏不相關的字段

逐步公開,提供必要提示即可,幫助用戶管理復雜信息。



14 使用條件邏輯

根據用戶回答,條件邏輯允許在表單中自動顯示、隱藏字段和跳過頁面。這種方法不僅可以減少字段數,而且可以使填寫過程更像對話,也更具個性化。



15 把相關領域分組

簡化表單的最有效方法,其中之一則是為相關字段進行分組。格式塔心理學里有許多種分組原則,使項目有關聯性:接近性、相似性,連續性、閉合性和連通性。在界面中,如果將數十個非結構化字段分組為幾個可管理的集合,將顯著提高表單的可用性。



16 避免使用多列布局

一欄布局能為用戶創建一個清晰的完成路徑;使用多列表單布局,會導致用戶跳過實際需要輸入的字段,將數據填寫到其他位置,這會迫使用戶停止甚至放棄填寫。



17 將復雜的表單分為幾個簡單的步驟

有時,即使刪除了所有不必要的內容后,某些表單還是很龐大。將大型任務分解為一系列的小任務反倒容易得多,也能激勵用戶堅持到最后。

顯示步驟,直觀地告訴用戶實際進度,這能提高用戶滿意度并激勵他們繼續前進;

不要細化表單,太多的步驟非常啰嗦,只會惹惱用戶;

對關鍵信息進行總結以減輕用戶焦慮,在最后設置復查步驟,幫助用戶檢查。



18 最小化導航

如果表單足夠大,可以分成多個步驟,那么就應該有一個單獨的、重點明確的界面來專門處理它。在導航中用其他鏈接會破壞正常流程,導致邏輯混亂,而且在小型彈出窗口中也不建議使用多步驟表單。



19 顯示合適的鍵盤類型

Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在方便不同類型的輸入。為了簡化數據輸入,在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型,同時也要注意鍵盤出現的位置。將文本字段放在上方區域,避免滾動展示。



20 停止荒謬的密碼創建設計

允許密碼取消隱藏來代替多次密碼輸入,這對于生成密碼的應用程序也更有效;

隨時顯示密碼要求,并顯示用戶滿足了哪些條件,方便查看進度;

使用強度表鼓勵用戶創建更強更安全的密碼。



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

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


用QQ動漫的設計系統案例,幫你掌握組件化思維

鶴鶴

隨著項目的不斷發展,設計團隊在不斷壯大,設計師之間的協作也越來越多,相應的溝通和協作成本在不斷增加。如何才能更高效的合作,并把設計質量和一致性做的更好,是我們需要去解決的問題。

本文將以 QQ 動漫設計系統為例,分享一些過程中的思考和經驗,拋磚引玉,希望對大家有所幫助。

問題之源:本地組件庫

在項目初期,團隊設計師的協作方式是通過一個本地的 sketch 規范文件,以復制粘貼的方式來復用一些元素和控件。在設計師協作人數不多,UI 控件改動頻繁的情況下,這套流程可以比較快速的完成需求。

但隨著項目逐漸成熟,協作設計師人數變多、UI 控件逐漸趨于穩定且需要復用的地方逐漸變多時,之前流程的不足就逐漸凸顯出來。

用QQ動漫的設計系統案例,幫你掌握組件化思維

1. 更新通知缺乏自動化

文件更新難以做到及時有效的通知到所有設計師,且需要人工在群里發通知,告知大家更新了文件。有些設計師暫時可能沒有相應的設計需求,可能會忽略更新后的文件,造成設計的不同步。或者等到需要的時候才去群里找更新的規范文件,版本容易搞錯且費時費力。

2. 全局組件更新困難

由于組件樣式是通過復制或修改的方式應用到界面設計中,當規范文件更新時,無法智能的自動更新修改相應的組件,需要設計師人工核對哪些地方有修改。這樣很難保證大家的設計版本都能得到統一的更新,當大家使用的組件版本不一致時,輸出的界面就會出現雜亂無章的情況。

3. 代碼復用率低

開發沒法全局調用代碼樣式,有些樣式可能需要反復復制使用,耗時費力,并因此產生的代碼臃腫,還會直接影響產品性能。

解決之道:云端組件庫

鑒于設計師目前多使用 sketch+xshow 的工作流程,而 xshow 正好也具備云端管理的能力,故決定以 xshow 作為橋梁,建立一個基于 sketch+xshow 的云端設計組件庫,以非常低的遷移和學習成本完成流程優化。

優化后的流程是把 sketch 本地組件庫通過 xshow 上傳至云端服務器,設計師通過 xshow 云端功能添加到 sketch 中,并在設計文件中嵌入這些云端組件。

用QQ動漫的設計系統案例,幫你掌握組件化思維

這樣做能很好的解決上面說的問題:

1. 更新通知自動化

更新文件不用再靠人工在群里發通知,設計師也不需要去找文件,而是在 sketch 中會自動進行提醒。一旦有更新,會在右上角顯示提醒消息,設計師只需要點擊提醒,下載最新組件文件即可完成更新。

用QQ動漫的設計系統案例,幫你掌握組件化思維

2. 全局組件一鍵更新

當更新組件庫文件后,界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異,方便設計師判斷是否更新。這種更新最厲害的地方在于,更新是全局的,也就是一旦你確認了更新后的內容,所有界面都會自動按規范進行更新而無需設計師再逐個篩查。這樣做既能保證設計稿的一致性,也能大幅提高設計效率。

用QQ動漫的設計系統案例,幫你掌握組件化思維

3. 開發效率和質量大幅提升

開發通過代碼把一些常用的樣式進行封裝,在一些高度復用的場景中直接調用。一方面可以通過調用的形式減少重復樣式代碼的復制,精簡代碼,降低軟件包體積,另一方面也可以減少不必要的工作量還能方便后期維護。

實踐之行:云端組件庫搭建

想要高效解決問題,正確的方法很關鍵,這里我們用到的方法就是原子設計理論。2013 年前端工程師 Brad Forst 將此理論思想運用在界面設計中,形成一套設計系統,包含 5 個層次:原子、分子、組織、模板、頁面,這套理論為組件庫的搭建提供了思路和方法。

在實際搭建過程中,因為組件庫的搭建工作量往往比較大,需要先明確流程和分工,主要包括以下幾個關鍵步驟:

用QQ動漫的設計系統案例,幫你掌握組件化思維

1. 明確工具流程

因為是搭建云端組件庫,所以首先需要有一個云端工具進行管理。針對以 sketch 為基礎的云端組件庫來說,常用的工具流程包括 sketch cloud,各類云同步盤,第三方云數據庫自主部署等等。我們選擇的 sketch+xshow 工作流也是基于 xshow 具備云端管理功能,與其他流程本質上是一樣的,大家根據項目實際情況合理選擇就好。

用QQ動漫的設計系統案例,幫你掌握組件化思維

2. 全面匯總并分類

按原子理論由小到大來對常規控件進行匯總并分類。對于 QQ 動漫項目來說,常見的控件類別包括:顏色、字體、圖標、按鈕、導航、狀態欄、彈窗、列表、標簽等等。每個項目所需要整理的組件不盡相同,原則就是對要復用的元素進行整理。

用QQ動漫的設計系統案例,幫你掌握組件化思維

3. 制作樣式模板

為了便于維護和提升合作效率,將組件庫拆分為幾個不同的獨立文件,每一個文件由組件庫搭建小組成員獨立負責,減少混亂。

如果是有多位設計師參與時,因為組件庫的元素存在相互調用的情況,會遇到到底誰先做的問題。解決流程分 2 步:

  1. 由一位設計師把組件庫的原子級組件(主要包括顏色,字體,圖標)先做好,并建立分類組件標準模板,其他設計師在這些模板基礎上進行完善,保證組件庫在邏輯層級統一。
  2. 如果過程中遇到,自己組件中需要調用對方組件,比如某個圖標沒有在圖標組件文件中,但自己的列表中又需要,可以先用其他組件中的圖標代替,等圖標組件庫更新后,再同步更新這里的組件即可。

QQ 動漫組件庫一共分了 5 個不同文件,分別是:基礎、操作、導航、反饋和內容。

用QQ動漫的設計系統案例,幫你掌握組件化思維

4. 搭建本地組件庫

1?? 確定命名邏輯

提升設計效率,是組件庫存在的重要目標之一,而合理的組件命名起到了至關重要的作用。組件的名稱要保證通用性,太獨立的命名可能不夠兼容其他場景,也會讓使用的同學產生誤解。

對于組件命名,要多與使用的設計師一起探討,因為每個人的習慣都不同,方不方便因人而異,所以需要做一些平衡。

比如在做圖標命名邏輯的時候,糾結于要先按尺寸分(圖標/序號類別/尺寸/圖標名),還是按功能分(圖標 / 序號類別/尺寸/圖標名/狀態),不斷調整多次,這時候就需要找大家一起探討,怎么才是最方便的。

用QQ動漫的設計系統案例,幫你掌握組件化思維

命名的方法是盡可能按共用屬性由多到少的順序來整理。比如,圖標共用的尺寸屬性多,就把尺寸歸到上層;如果圖標功能分類比較集中,那就把功能名稱歸到上層。根據實際項目和設計師使用情況的不同,會有不同的命名形式,命名確保效率就好。

在梳理組件庫結構命名時,先用思維導圖描繪一份結構化地圖,方便前期討論及調整。明確層級關系后,用在多人合作時進行參照,從而統一組件庫層級。在做這份結構化地圖時,需要列好全部分類、層級、具體名稱及示例。

用QQ動漫的設計系統案例,幫你掌握組件化思維

2?? 顏色

顏色庫的設計,需要將產品中可復用的顏色匯總并分組,比如品牌顏色,按鈕顏色,圖標顏色,裝飾顏色等等,這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規范是:序號_功能/淺色 or 深色/序號 _ 屬性 / 序號 _ 狀態。例如,04 _ 按鈕色/淺色/01 _ 常規按鈕/04 _不可點

用QQ動漫的設計系統案例,幫你掌握組件化思維

3?? 字體

字體樣式需要做全字重、顏色和左中右三種對齊方式,因為按目前 sketch 的組件邏輯,還不能修改嵌套字體的屬性。這些屬性可以對應到組件的命名上,字體組件的命名規范是:大小/序號對齊方式/屬性/用途,例如 42px/1 居左/常規/主文本。

用QQ動漫的設計系統案例,幫你掌握組件化思維

邊做邊檢查。由于文字組件需要的命名特別多,很容易出錯,所以建議是最好每做一組,就檢查一遍。檢查的時候打開組件樣式,如果在組件預覽中發現重復或者結構不對的地方,及時調整。

多行文本行高要注意。文字的行高要尤其注意,一定要在前期檢查好尤其是多行文本的行高。如果行高前期設置不對的話,非常影響后面文本的擴展性,在用到多行文本時會遇到麻煩。想回頭修改的話,因為是最底層的原子需要逐個調整,所以代價是巨大的。

所以一定要開始設置字體組件之前就確定好行高,比如 QQ 動漫組件庫中的文字行高統一用文字大小的 1.5 倍,并取偶數作為文本的行高。當然,這里的行高也不是完全規定死,有時候也需要視情況而定。

文本的粗細。文字的粗細也是要在一開始的時候就要設置周全,最好是給所有字號的文字都設置好不同粗細的組件,盡管可能開始用不到,但會提升文字的擴展性,不然后面添加就會比較麻煩。

4?? 圖標

圖標組件最關鍵的地方在于使用邏輯和圖標規范。比如,我現在做的圖標邏輯是:圖標/類別/使用場景/具體名稱/尺寸/不同狀態,主要是按使用的頻次來整理的。也可以有其他邏輯方式,以方便使用為準。

用QQ動漫的設計系統案例,幫你掌握組件化思維

圖標規范也會影響組件庫的整理和日常使用,在做圖標組件時,需要定義好圖標的最大范圍和最小范圍,嵌套起來使用才不會出錯。圖標的規范要嚴謹,同一個尺寸下的圖標視覺面積要保持一致。不然在大小這個層級就會出現,雖然是相同尺寸的圖標切圖范圍,但圖標的體量看起來卻并不一致。

用QQ動漫的設計系統案例,幫你掌握組件化思維

將純色或漸變圖標中的顏色剝離,并使用顏色組件進行嵌套,這樣做既方便替換又能減少圖標組件庫的復雜度。

用QQ動漫的設計系統案例,幫你掌握組件化思維

對于圖標的多種狀態,建議做在同一個層級中方便選擇。

用QQ動漫的設計系統案例,幫你掌握組件化思維

對于圖標來說,直接對畫板設置切片即可,不需要再加切片框。如果你的組件庫之前用了很多切片來導出圖標,可以用 Automate 插件直接清理或設置全局的切片,非常方便。

用QQ動漫的設計系統案例,幫你掌握組件化思維

5?? 控件

有了顏色、字體、圖標這些基礎元素后再來制作組件就會相對簡單很多,只需要通過拼裝把通用性強的組件做出來即可。這里可能需要注意設置好布局方式,讓內容盒子隨著內容的變化而變化。新版 sketch 的布局設置相對于老版本的確實會方便很多,理解起來很容易,所以這就不多討論了。

用QQ動漫的設計系統案例,幫你掌握組件化思維

6?? 代碼組件化

在開發側進行前端 UI 組件庫的封裝,實現從設計到開發的樣式統一,提升效率和質量。

用QQ動漫的設計系統案例,幫你掌握組件化思維

在優先級上,代碼組件化跟 UI 組件化可以同步進行,開發先寫好框架,然后隨著 UI 組件化的逐步確定,代碼也進行相應補充。

5. 構建云端組件庫

本地組件庫構建完成后,即可通過 xshow 上傳至云端,再由 xshow 直接添加到本地 sketch 中,完成整個使用流程的搭建。

6. 權限與維護

為了更好的維護云端組件庫,避免更新混亂,需要成立組件庫小組,只允許組件庫小組成員有編輯權限。日常需求中,如有新增組件,需提交給組件庫小組成員審核,通過后方可上傳至云端組件庫。

在制作組件文件的過程中,需遵循先自測后上傳的原則,避免在上傳后發現一些諸如命名錯誤、遺漏、嵌套混亂等問題,造成麻煩。

7. 編寫規范文檔

文檔的作用是給相關同事查閱,形成標準化使用流程。一些在組件庫中難體現的設計說明、未形成組件元素的使用規則或一些常見問題都可以寫在文檔里。

用QQ動漫的設計系統案例,幫你掌握組件化思維

8. 問題與技巧

1??善用插件,提高效率

我其實是一個非常喜歡“偷懶”的人,但凡需要重復,批量的工作,我都覺得應該有更聰明的辦法。這里我推薦幾個我在做組件庫中經常用到的小插件。

2??不斷測試

組件庫的設計過程中,一定要邊做邊測試,尤其是在前期確立邏輯的時候,要不斷檢測是否真的好用。

3??內容更新權限與維護需要專人專辦

舉例:假設我負責字體,那么后續所有的字體更新相關都只找我來修改。若其他人在組件庫內找不到相應的組件搭建頁面而又特別高頻使用,需要向組件庫小組提出申請,并由對應組件庫管理員進行更新,不可以私自修改組件庫內容并上傳。

總結

組件化思維不僅僅應用在 UI 領域,甚至在各行各業都需要建立組件化,比如對于一些時效性非常強的新聞產品,就需要針對突發事件內容模板化,以期能第一時間發布;如果想追熱點,組件化能夠使得產品具備隨時跟進熱點的能力,提升市場競爭力等等。

組件化是一種思維模式,也是如今設計師必不可少的能力。通過組件庫提升效率能夠讓設計和開發有更多的時間去打磨產品細節,從而打造出對用戶更加友好的產品,賦能設計的價值。


文章來源:優設網      作者:騰訊ISUX



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

為什么你剛在淘寶搜完商品,抖音就推薦了?

濤濤

一個你肯定親身經歷過的場景:白天你在淘寶上面搜了筆記本電腦,然后晚上在刷抖音的時候,就刷到了該筆記本電腦的相關廣告。

你或許會驚訝:WHAT?難道我的手機是被監控了么?當然不是的,因為監控是違法的。這只是一種技術手段,其專業名詞叫做:重定向廣告!今天我們就來探究一下其中的奧秘。

重定向廣告的形態

想要研究其神,我們得先了解其形。

其實上面,我們已經見過重定向廣告的廬山真面目了。我們先提一個概念,你品,你細品:重定向廣告又被稱作訪客找回廣告、再營銷廣告、回頭客廣告等。

品完了,我們繼續往下看。重定向廣告的形態分為兩種:

1. 搜過內容 A,廣告繼續推送 A,目標一個字:買!

這是重定向廣告的第一層次。

就是我們上面所說的:你在淘寶搜了筆記本,然后晚上刷抖音的時候,就繼續給你推送該筆記本的廣告。既然你搜索筆記本了,那肯定就是對筆記本有需求的??赡墚敃r是由于某種原因,比如筆記價格或者樣式什么的,你在猶豫。然后當這個內容再次出現在你面前的時候,你很容易一激動就下了單,一激動就付了錢~

但值得注意的是,廣告一定要克制,最佳的用戶體驗是:用戶感覺不到其存在,對用戶起到的只是一個引導的作用!據 GoogleAdwords 提供的數據,在 30 天內為同一個用戶展示 7~10 次廣告的轉化效果最好,做到這個程度的廣告收益可以達到三倍以上。

2. 搜過內容 a,廣告推送相關 b,目標三個字:買買買!

這是重定向廣告的第二層次。

我手賤,在網上搜了棺材板,之后就收到了骨灰盒的相關廣告推送。之所以是第二層次,就是因為,這里需要算法工程師設計一個算法模型,根據用戶自身的行為數據,以及相關的大數據,推測出來這個相關的 b,到底是什么。

最著名的就是沃爾瑪啤酒與尿不濕的經典營銷理論:

“男性顧客在購買嬰兒尿片時,常常會順便搭配幾瓶啤酒來犒勞自己,于是嘗試推出了將啤酒和尿布擺在一起的促銷手段。沒想到這個舉措居然使尿布和啤酒的銷量都大幅增加了。”其實這個算法的核心原理,也很簡單,我們可以再舉一個互聯網的段子,你一聽就明白咋回事了。

女:“老公,我想買一個包包,才一萬塊錢~”

男:“好的,沒問題!不過我覺得,買個一萬塊的包包不太夠,你還得再買一身三萬塊的衣服,不然凸顯不出來這個包包的氣質,再讓別人以為是山寨的就麻煩了;這樣的話,我們還得買輛車,怎么著也得寶馬奧迪吧,不然你這整個人的氣質就襯托不出來了;嗯,我們還得換個大房子,就整個別墅吧,帶游泳池的那種,不然跟包包、衣服、車子不匹配;這樣算的話,我得先去掙 500W,你先等等,我掙夠了錢,咱們就去買!”

女:“……”

這個段子,體現的是通過經驗主義找到 b,而現在是一個數據主義的時代,一定要有數據的客觀依據,才能客觀準確地找到 b。但殊途同歸,其核心原理是一樣一樣的~

重定向廣告的原理

這幾天經過查閱大量的資料,以及跟小伙伴們進行溝通探討,終于對重定向廣告的原理,有了初步認知。這里先感謝給我提供支持的各位老鐵。

首先呢,一個完美的重定向廣告,理論上應該分為三個步驟:

為什么你剛在淘寶搜完商品,抖音就推薦了?

我們還是拿筆記本電腦的場景來舉例子吧~

Step 1:判定

首先我們要達成一樣共識:我們沒有必要給所有搜索過筆記本的用戶都發廣告。就比如有些用戶只是誤觸點擊了一下筆記本的內容,然后立馬就又關掉了,那么就沒有必要給這類用戶發廣告,因為就算是發了,大概率也是沒有下文的,純粹浪費廣告費。所以說,重定向廣告要做的第一件事,就是判定這個用戶的意向程度,找到那些精準的用戶,再給他們發廣告,以尋求最高的 ROI(投入產出比)。

意向度的判定,就需要依靠埋點技術了:根據埋點,可以追蹤到用戶的行為記錄,然后再設計一個意向度判定的邏輯,就 ok 了。

常見的判定依據如下:

在網頁上停留超過 X 分鐘;
在網頁上訪問超過 X 個頁面;
已訪問結賬頁面,但未進行交易;
與網頁內容互動過,但未消費;
曾多次訪問過網站,但未進行消費;

Step 2:識別

第一步找到了那些對筆記本感興趣的用戶,然后我們的目的,是給他們發廣告,引導其消費對吧。那么第二步,也是最關鍵的一步,我們得知道,這些感興趣的用戶,到底是“誰”吧!這里需要依靠的是 IP 追蹤技術:只要用戶去淘寶搜索筆記本了,那么他必然會留下一個 IP 地址。我們通過 IP 追蹤技術,首先可以追蹤其使用場景~

To B 場景:

有一定的概率,可以追蹤到這個 IP 地址,是某個企業使用的。為什么說是一定概率呢?因為不可能有一家商業公司,擁有所有的 IP 數據,你們懂得…追蹤到企業之后呢,可以進一步追蹤該企業在網絡上面留下的公開聯系方式,比如公司法人姓名、電話、郵箱等等。這方面可以跟第三方公司合作,例如企查查,付費調取他們的 API 接口進行查詢。

這種具體的聯系方式都有了,那么發廣告自然也就不是問題~

To C 場景:

我們先要明確一點,對于個人來說,無論如何都是追蹤不到其姓名、電話、郵箱這些信息的,因為違反隱私保護法。

但我們可以通過 IP 追蹤技術,追蹤到這個 IP 地址,是屬于某個城市,更精準一些的話,可以追蹤到是某個街道,甚至是某個小區。這樣的話,也是有助于我們做進一步的廣告策略的。

比如我們可以追蹤到,搜索這些筆記本電腦的人,大部分都來自于某幾個城市的某些街道,那我們是不是可以重點向這幾個區域做廣告投放了?

但這些似乎還不足以支撐我們精準地發重定向廣告到個人,達到最大的 RIO。想要精準地找到某個人,還需要借助兩樣東西:

cookie

簡單來說,就是我們在使用瀏覽器時,存儲在我們本地客戶端的文本文件,就是下面這些玩意…

為什么你剛在淘寶搜完商品,抖音就推薦了?

那么 cookie 可以存儲一些什么呢?

首先,用戶的行為記錄是可以存的,就和我們上面埋點所記錄的那些類似;然后還可以記錄一些特征數據,例如使用的 Web 瀏覽器、操作系統、屏幕分辨率、時區、語言、插件、字體等。

有了這兩樣東西,大概率就可以證明,張三是張三了。

imei 值

如果用戶是使用手機來進行搜索的,那么這個時候就需要請出另外一個大咖“imei 值”了。imei 值又是個啥東西呢?簡單來說,就是手機的身份證!有了身份證,那么找到這個手機,并給他發廣告。但值得注意的是,imei 值可沒有那么好獲取。如果用戶只是用手機搜索了瀏覽器,比如你們的官網商城,那么這個時候是獲取不到 imei 值的。必須是用戶在你們的 APP 上面進行操作,并且呢,在使用 APP 的時候,同意了一大堆權限,這個時候才能讀取到用戶的硬件信息,進而獲取到 imei 值。

Step 3:召回

最后一步,那就是如何發廣告召回啦。這一步就簡單啦,找到那些廣告平臺,例如百度、頭條、騰訊、廣告聯盟等等,跟他們談價錢就完事了。談好了價格,那么在這些平臺上面的廣告位,就能夠變成筆記本電腦的廣告啦。(例如在抖音上面劃拉幾條,就看到筆記本電腦的廣告了)

這里也提醒一下,并不是所有的廣告平臺,都有重定向廣告業務的,想要發重定向廣告,可以搜索“DSP 廣告”幾個關鍵字試試。

Step final:自動化

最后呢,還有一點點小問題,怎樣能夠使整個過程自動化呢?其實也很簡單,這就需要廣告平臺,在我們的 Web 端的官網商城,或者 APP 上面部署一套 SDK 代碼,意義呢,就是讀取前面我們所說的,判定信息以及識別信息。再直白一點的話,那就是雙方約定一個數據接口,實現這些數據互通,這樣就能夠實現自動發廣告啦。

重定向廣告的意義

重定向廣告存在的意義是什么呢?其實上面我們已經提到過了:很簡單,這種廣告的 ROI(投入產出比)最高!

每個公司的數字營銷人員都有著基本的崗位職責:他們必須評估和優化他們的努力(廣告投放費用),以實現增加銷售的目標,他們必須證明他們的投入能夠帶來積極的回報。于是數字營銷人員總在尋求最新的技術來幫助他們達成目標。在經過曲折的廣告投放嘗試后,最終,重定向廣告出現了。讓我們一起來看一個故事:

重定向廣告故事

我在賣 ebay 一種針對新生嬰兒的純天然洗發水,我需要投放廣告來倒流到我的 ebay 商品頁。

yahoo:

最早我的投放策略是把我的廣告放到 yahoo 的首頁上去。然后我發現一天下來,yahoo 花掉了我巨額的廣告預算卻只給我帶來了非常少量的點擊——1000個人看了只有1個人點擊了我的廣告。沒錯,大部分上yahoo首頁的人都不會對一款嬰兒洗發水感興趣的。

Ad-Network:

接下來我要考慮優化我的投放策略,于是我想到了 Ad-Network:他們幫我把廣告投放給了那些和他們有合作的母嬰類網站上去,效果好多了,很顯然上母嬰網站的人們會對我的產品感興趣,1000 個人有 10 個人點擊了我的廣告。

精準定向(targeting):

但是能不能做到更好呢?接下來一家做精準定向(targeting)廣告的服務商找到了我,告訴我們他們能夠直接把廣告推送給那些剛剛生了北鼻的媽媽們,于是我選了這家 vendor 而他們給我的答卷是 1000 個新媽咪有 100 個對我的天然嬰兒洗發水感興趣(她們點擊了,還有很多最后選擇了購買)。

重定向(retargeting vendor):

好吧,作為一個挑剔的廣告主我覺得這還不夠,我說,能不能把我所有的媒介預算都花在刀刃上。這時候一家 retargeting vendor 出現了,他們說,交給我們吧,你所有的廣告都只會出現在那些剛剛試圖找過你的新生嬰兒純天然洗發水的用戶——我們不管他是一個人還是一條狗,但cookie顯示那位用戶確實在找類似的產品。那么對我來說,最后一個方案確實非常有吸引力。

我們可以看到重定向廣告能夠更精準,可以實現對目標消費者進行一對一的營銷效果。而傳統的展示廣告只能是粗放型大面積的曝光(如對所有網站訪問者隨機展示廣告)。由于不能對準確的目標消費者進行廣告傳播,可以說在早期的展示廣告中,大量廣告展示都是無價值的,也就是被浪費掉了。

定向廣告

重定向廣告從性質上來說是效果廣告,是要對交易額負責的;那么與之對應的,還有一種廣告叫做定向廣告,其性質是品牌廣告,這類廣告的指標是新用戶數。

重定向廣告,在營銷的環節的里面,是屬于“召回”。

也就是說,這些用戶,必須是通過某些途徑訪問了我們的官網商城或者是 APP。但這個過程只能是被動等待啊,如果訪問我們官網商城或者 APP 的人少得可憐該怎么辦呢?

那么這就涉及到營銷的另外一個環節了,那就是“拓新”。拓新環節通常發的都是定向廣告,這種廣告只是為了拓展品牌的知名度,而對于最終的交易,并不做要求。這種也很常見,就比如我們在看《王牌對王牌》的節目中,天天聽他們介紹“vivo x60”的手機,也沒有任何購買鏈接,但這個手機的品牌,卻被大眾所熟知了。

獲客

不管是重定向廣告,還是定向廣告,在整個營銷的過程中,都是獲客環節的重要手段。前段時間我們研究過 B 端企業營銷困局的破解之道——精準營銷。

在這里,我們再來做一下延伸思考,想要解決企業獲客成本高的問題該怎么辦呢?

下面這張圖供參考:

為什么你剛在淘寶搜完商品,抖音就推薦了?

稍微解釋一下:

張三搜索了我們的產品內容,并且留下了聯系方式等信息,那么這種用戶肯定是最精準的用戶啦,讓銷售團隊直接跟進;

既然張三是精準用戶,那么我們能不能找到一群跟張三差不多的人,進行“拓新”的操作呢?于是可以搜集到的張三的特征,給到這些第三方廣告平臺,找到跟張三有著類似特征的李四們,給他們發品牌廣告,進行拓新。

注:我們前面也提了,to c 場景,直接找到聯系方式,是違反隱私保護法的。但巧就巧在,我們雖然不能直接獲取聯系方式,但卻可以間接地利用這些數據,也就是給他們發廣告~

結語

商業創造利潤的秘密,其實很簡單,一言以概之,就是讓我們的產品,有更多的“訪客”,并且將這些“訪客”變成“顧客”,將購買意愿和購買能力變成購買現實。

但紙上得來終覺淺,精準營銷何其難。這條道路,已經走了很久,但也只是邁出了一小步,接下來,依舊有很長的道路要走~

文章來源:優設   作者:曉莊同學產品筆記

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


文字動效原來這么簡單???

鶴鶴


AE文字動效預設使用方法 


          在AE的窗口中打開“效果和預設”面板,所有和文字有關的效果都在動畫預設中的Text文件夾內,共十七種動效類型

在AE的窗口中打開“效果和預設”面板,所有和文字有關的效果都在動畫預設中的Text文件夾內,共十七種動效類型。

          將動效預設拖動到對象上,即可應用動效。

17種動效預設預覽


          十七種類型分別為:3D文字動效、入場動效、離場動效、模糊動效、曲線動效、表達式動效、填充與描邊動效、圖形動效、亮度與透明度動效、機械化動效、多樣化動效、多行文案動效、擬態化動效、路徑動效、旋轉動效、縮放動效以及字間距動效。

預設搭配組合


          有些效果可以相互疊加組合,理論上我們能做出成百上千種不同的效果。 


文章來源:UI設計  作者:設計師深海

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


文具屆的“奧斯卡”開獎,2021日本文具大賞出爐啦!

鶴鶴

日本屋文具大賞,又被譽為“文具界的奧斯卡”。從2013年開始,文具大賞今年已經有9屆了,每年都在二、三月公布,想在開學季購置文具的小伙伴,千萬別錯過!



據說,今年的大賞由11位評委參與,他們對參選文具的設計、功能和想法等方面進行打分,共選出40個文具,分別有特等獎、設計獎、功能獎、創意獎。


下面,數藝君帶著大家一起來看看吧!(注意捂好錢包)


特等獎

吳竹吸墨空筆


今年獲得全場大獎的是吳竹吸墨空筆。這是一支不帶墨水的空筆,被稱作“彩墨神器”!



整套由四個部分組成:空的筆桿,吸墨水的內芯、筆栓、小貼紙(可以把你制作的墨水涂上去,貼在筆桿上用于區分)。



上墨水的操作非常簡單,海綿內芯拆出來,插進墨水里,吸到80%左右再裝回筆殼,搞定!


對,除了墨以外,其他所有的東西都有,你可以用內芯吸附上任何喜歡的顏料、墨水,然后你就有了一支自定義的筆。


功能獎

回轉印章機


回轉印章機也是一個很神奇的產品,可以幫助那些不擅長繪畫的朋友印出可愛的圖案。



有很多個圖案可以選,選完就直接印在紙上,跟手寫的簡直一模一樣,是喜歡做手賬的手殘黨的福音!


印章使用的顏料是油性的,可以拿一支水性筆給圖案上色,不用擔心顏色混在一起。來看看上色的效果吧,反正不會做手賬的數藝君也心動得不行了!


最關鍵是,可愛俏皮的圖案特別多,據說有上百種文字、圖案,應用場景廣,可以左滑下方圖片看看哦~


創意獎

便攜便利貼


這款便攜便利貼從外觀上就擔得起創意獎這個頭銜了!數藝君第一反應還以為是一支筆,沒想到竟然是便利貼!



這款便利貼的創意在于,把一本一本的便利貼變成了卷軸。而且,在硬殼卷軸的保護下,便利貼還不容易破損。


一管里面有兩個卷軸哈,就是說可以裝兩種便利貼,如圖,一種紅的一種白的。


使用起來也很方便,把便利貼卷軸從保護殼里抽出來,拉出一截,撕下來,就可以貼上做筆記了。



還有一個貼心的設計點就是,這個便利貼中間70%的部分是有粘性的,兩邊邊緣沒有粘性。這樣就可以拿著兩邊沒有粘性的地方,對準了位置再貼。



種類也很多,共有12種便利貼,有6種搭配供選擇,看這個效果,還挺實用的~

設計獎

雙層透明筆盒


雖然說透明筆盒已經不是第一次出現,但這款筆盒的特色在于外層是透明,里邊放置了一個布袋,更便于收納了。



相信很多小伙伴,都曾被透明筆袋“一目了然”的功能吸引到,但大部分透明筆袋很難做到分層歸類。而這款透明筆盒就將以上兩點都兼顧到位了。

便簽獎

可剝離熒光貼


這款便利貼從外觀上特別是涂改帶,但功能上完美解決了熒光筆標記筆記時,畫錯的尷尬問題。



半透明的熒光貼紙,可以撕下來貼在書上的重點知識處,覺得不合適,或者復習完畢后,還可以不留痕跡地撕下來,圖書又恢復了嶄新的狀態。



不想在圖書上寫字,也可以寫在這個半透明的便利貼上~再也不用擔心在書上寫錯別字啦!



辦公文具獎

TEAM-DEMI 文具套裝


這套文具包裝沿襲了極簡風,純色的小盒子中,包括剪刀、膠帶、訂書機、美工刀、膠水、直尺、卷尺以及SIM卡取卡針。


配合磁吸設計,包裝盒可以作為收納盒,收納文具時做到完美嵌入,這種設計真讓人難以拒絕,自用和送人都很有檔次。



橡皮獎

多邊形橡皮


本次大賞中,造型最“古怪”的產品莫過于這款多邊形橡皮了。它以折紙藝術為靈感,配合3D技術,造就了多邊形橡皮。



橡皮共有45個尖角,使用完一個角之后,會產生新的一角。一塊橡皮都花了這么新奇的技術,不愧能獲得這一單項獎。



在官方發布的視頻中,這塊橡皮可以擦除單詞中的字母。因此,從功能上來說,這款橡皮更適合那些鉛筆繪畫等精細作業的人使用。


文章來源:UI設計  作者:數藝設

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

交互設計師如何為業務提供價值?

濤濤

交互設計是什么?

交互設計就是通過設計出完整的界面和用戶操作流程,保證其符合用戶的認知模型,避免用戶在使用過程中任務失敗。

交互設計師是承接上游(產品經理)和下游(視覺設計師)的角色。

交互設計師的基礎價值來源于兩方面:

  • 團隊工作流程中的價值;
  • 提升產品的用戶體驗。

交互設計師的核心價值是將產品業務通過更好的設計,將其更大價值化并落地。

本文大綱如下:

  • 交互設計師如何熟悉業務
  • 交互設計師如何推動設計
  • 如何通過業務優化設計

如何熟悉業務?

將自己作為各種角色的用戶,去使用體驗,感受整個產品的流程。從而找到可優化的地方。

針對于 B 端產品,產品中會涉及到超級管理員、管理員、普通員工至少三種大類角色,其中普通員工里面可能會細分多類角色。交互設計師要在各個角色中,使用體驗產品,梳理清晰的產品業務邏輯。使用使用中,弄清各個角色的權限管理和流程邏輯。

針對于 C 端產品。對產品的分層用戶主流程和分支流程進行體驗走查,找到使用中不好的地方并加以優化。并對行業競品進行重度使用體驗,了解整個行業產品的特點。

如何推動設計?

我以前寫過好多設計師的專業技能方面的文章,我之前一直認為設計師最重要的素質是專業技能。

但是設計師最重要的素質并不是專業技能,因為專業技能可以慢慢培養,任何人都可以學會。

設計師最重要的能力是推動能力。因為推動能力和責任感、性格及天賦有關,而這恰恰會成為設計師進階的障礙。

想要推動業務之前,先要將自己的職責做好,負責的工作做好,讓大家信任,這個時候才能贏得大家的信任,讓大家更加相信你。

1. 為什么推動能力最重要?

在實際工作中設計師最基礎的能力是解決問題的能力,團隊需要能解決工作問題的設計師,這樣才不會團隊造成負擔或者拖團隊后腿。

設計師在工作中會遇到形形色色不同性格的對接人。那么肯定會遇到對接難度大的 PM、視覺設計師、交互設計師或者開發,這時候就需要有較強的推動能力,不然很容易使得工作進度受阻,導致設計方案無法快速落地。

擁有較強的推動能力對個人而言有以下好處:

  • 強化個人價值。設計可以推動產品優化,這一過程中,個人價值會得到比較大提升。同時設計師可以深度擴展設計專業知識。例如在推動中總結一些設計方法,對于個人經驗提升幫助巨大。
  • 獲得成就感。當產品數據或者用戶口碑獲得提升,設計師可以從工作中獲得正向反饋,獲得成就感,工作才會更加有激情。
  • 提升設計師的地位,設計師不在只是被動的接受需求、修改設計。設計師主動推動產品的體驗上的優化或者需求上的決策,在這一過程中更是對產品負責。
  • 推動團隊設計流程或者設計理念改變,這樣可以影響更多的設計師,對于個人產生的價值,對團隊產生的利益有很大的提升。

2. 怎么做推動?

推動分兩方面,一方面是產品上的推動,另一方面是團隊里的推動。

針對產品上的推動,設計師需要做一些前期工作和設計方案,然后和團隊領導溝通,獲得他們的支持,最后和產品經理溝通,讓產品經理看到,我們做這個設計方案可以帶來哪些價值。

得到了產品的支持后再進行推動設計,推動的事情可以做例如首頁改版,設計規范優化,核心流程上提升數據指標,可用性測試等等。

針對團隊中的推動,先發現團隊缺少哪些東西?針對團隊缺失的東西,做一些推動的事情。在此之前需要做大量的準備工作,并得到團隊領導的肯定和支持。

例如團隊沒有做組件化,那么你可以牽頭做組件庫和設計規范。團隊缺少數據分析思維,那么你可以現在團隊培訓數據分析知識,然后做一系列的數據設計模板,將數據融入到設計師的工作流程中。

團隊協同不太順利,那么你可以和領導商量,做一些團隊協同上的工作,例如團隊新軟件的引入,團隊項目協同文檔規則制定等。

3. 如何順利推動?

如果剛進一家公司,那么先要熟悉團隊運行模式,每個設計師負責的產品業務和他們的處事風格。

當熟悉產品業務和團隊,那么接下來先將自己負責的產品需求做好,后續就可以進行一系列前期推進準備工作。做推動之前,需要先和領導確認,得到領導的肯定后再慢慢在團隊推動。

當在團隊取得一定的進展,則后續可以嘗試產品上的推動。在推動的過程中,要記住不斷地迭代優化自己的推動方案,讓自己的推動過程中做得萬無一失。

如何通過業務優化設計

先熟悉業務運行邏輯,掌握業務后,分析業務流程。

1. 找到業務核心并優化

找到產品中核心是什么?例如資訊類產品,產品的核心是用戶通過推薦列表,到達新聞詳情頁閱讀的過程。在這個主流程的過程中,交互設計師可以做的事情就是如何提升推薦列表的點擊效率、展示效率和詳情頁正文展示效果。通過優化結構樣式,提升設計價值。

例如電商產品,核心就是如何讓用戶快速找到想要的商品,并順利的完成購買。在這一過程中,交互設計師可以做的事情,如何提升用戶快速找到商品這一場景和購買支付的流暢度。


文章來源:優設  作者:Echo的設計筆記

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


產品好不好看,真的重要嗎?

濤濤

在我過往的一份工作中,曾就“是否需要在優化app的視覺感知上投入更多時間”的話題跟我們的CEO進行過有趣的爭論?!八趺词艿昧诉@么過時的設計?!有上百萬的用戶天天在用我們的產品,優化App的視覺設計是一件多么容易的事啊!”

但我們的CEO并沒有動搖,他堅信公司正在優先考慮那些真正驅動商業發展的事項,尤其是聚焦于那些高速增長點上。

對他來說,我的設計技能無足輕重,這讓我感到非常沮喪。我非常熱愛用戶體驗和視覺設計,而且我不想在只能發揮我雕蟲小技的公司里浪費生命。

盡管如此,我還是能夠理解他的觀點。我沒有辦法證明他是錯的,公司一直在發展,雖然用戶的抱怨很多,但沒有一個用戶說“我覺得這個頁面太丑了”。

 

價值大于美感

Value > Aesthetics

CEO的有些觀點是對的。如果產品能夠為用戶提供足夠的價值,就不需要在界面美感上糾結。亞馬遜和Reddit這兩個公司就是很好的例子。

此外,如果產品設計的非常漂亮,卻不能提供足夠的價值,也注定會失敗。如果功能不完善或缺少某些關鍵功能,沒有人會使用只剩下美感的產品,哪怕其驚艷程度不亞于Dribbble上最熱的照片。

但他說得也不全對。好看的產品是有價值的,即使每一個微小決策都可以進行A/B測試,但好看的價值卻依然很難識別出來,但這并不影響其對組織的重大影響力。

 

美感代表形象

Aesthetics say who you are

facebook最近的改版

美感之于產品設計,就好比現實生活中的外表之于個人。

日常工作中,我們穿戴整齊、打理發型、噴灑香水,以期給同事留下深刻的印象,讓他們在與我們相處的時候感到舒服。

這樣做并不會改變我們給予他人的價值。但是,這樣做的確能夠改變他人對你意見的接納程度以及后續對你的印象。

這樣做也不會改變你說話的內容,但會改變人們對你在說話前后,以及說話過程中的感覺。

 

美感讓你的產品與眾不同

Aesthetics help you against your competition

想要打造出與亞馬遜匹敵的產品很難,但是我們可以另尋出路。很多在相同領域競爭的公司,都是用幾乎相同的價格給用戶提供幾乎無差別的價值。

想想那些已經突出重圍的成功公司,如Slack、Medium和Mailchimp。沒有一家開拓了新市場。團隊協作、博客和電子郵件營銷軟件早在他們之前就已經存在。

但它們還是設法成為了人們在該市場尋求解決方案時,第一個想到的名字。它們也都創造出了獨一無二的、充滿個性的視覺語言。

 

美感提升轉化率

Aesthetics increase numbers

雖然,價值和信息傳遞通常是影響公司成長的最關鍵因素,但是在恰當的時機使用恰當的視覺效果,依然可以說服更多用戶購買你的產品。

例如,定價頁面就是一個能決定用戶是否會購買你產品的觸點。一個設計整潔的定價頁面能提供內容明確和可讀性高的信息,同時顯著提升轉化效果。

從各種app中找到的擁有優秀視覺展現的購買頁面

在我曾經工作的產品團隊中,人們最常討論的事情是開發任務的優先級。很多團隊成員(通常是那些有雄心壯志的人)想推廣那些他們認為可以幫助公司壯大的想法,但并不清楚哪條路才是對的。

有時候讓你的產品更好看是個不錯的主意,但在推廣這種想法的時候,你需要問問自己“為什么現在這件事情對我們來說如此重要?” 。經驗缺乏的設計師常常會給出類似這樣回答:

“因為它使我們的產品更加好看??!”

這種說辭沒有任何說服力。試著去關注公司的目標,思考如何用偉大的設計引領公司變得更加偉大,這樣你才會成功。

唯有美觀無法構建一款產品,但是打造一個毫無美感可言的產品往往會讓情況變得更加糟糕。


翻譯:優越   審校:Celin  |   UXRen翻譯組 #364譯文
作者:Ariel Verber
原文標題:《The importance of aesthetics in Product Design》

文章來源:UXRen  

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



日歷

鏈接

個人資料

藍藍設計的小編 http://www.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
日韩一区在线视频| 色综合久久天天综线观看| 国产99久久精品一区二区永久免费| 一区二区三区精品99久久| 日韩中文字幕网站| 日韩美女视频中文字幕| 国产精品激情自拍| 日韩国产激情在线| 亚洲人在线观看| 国产精品高潮呻吟久久av无限| 国产欧洲精品视频| 国产精品视频一区二区高潮| 欧美日韩在线观看视频小说| 日本精品久久久| 日本久久中文字幕| 日韩精品视频三区| 日韩av免费一区| 91av网站在线播放| 成人网在线免费看| 91高清视频免费| 欧美黑人极品猛少妇色xxxxx| 欧美日韩亚洲一区二| 久久99久国产精品黄毛片入口| 日韩国产在线看| 亚洲天堂久久av| 国产精品美女www爽爽爽视频| 中文字幕亚洲色图| 国产区亚洲区欧美区| 欧美国产日韩免费| 午夜精品久久久久久久久久久久久| 亚洲视频在线观看| 97视频人免费观看| 日韩中文字幕在线免费观看| 亚洲国产欧美一区二区三区久久| 久久久久久高潮国产精品视| 青草青草久热精品视频在线网站| 国产精品av在线播放| 精品久久久视频| 亚洲精品资源美女情侣酒店| 亚洲成人动漫在线播放| 91国偷自产一区二区三区的观看方式| 国产成人精品久久久| 在线日韩av观看| 91极品视频在线| 国产在线视频欧美| 亚洲一区二区三区乱码aⅴ蜜桃女| 亚洲综合在线小说| 久久69精品久久久久久国产越南| 国产亚洲成av人片在线观看桃| 欧美精品在线网站| 精品国内产的精品视频在线观看| 久久精品国产96久久久香蕉| 高潮白浆女日韩av免费看| 九九九久久久久久| 久久精品国产久精国产思思| 欧美在线视频免费| 日韩中文字幕国产| 日本一区二区在线播放| 成人性生交大片免费观看嘿嘿视频| 亚洲精品一区二区三区婷婷月| 国产精品va在线| 国产欧美精品一区二区三区介绍| 久久成人精品一区二区三区| 中文欧美在线视频| 久久久人成影片一区二区三区| 成人免费激情视频| 久久6精品影院| 日本久久中文字幕| 精品久久久久久电影| 日韩精品高清在线观看| 欧美极品少妇全裸体| 亚洲色图美腿丝袜| 91夜夜揉人人捏人人添红杏| 少妇高潮 亚洲精品| 亚洲国产日韩欧美在线99| 国内精品久久久久伊人av| 日韩高清有码在线| 国产精品自产拍在线观看| 久色乳综合思思在线视频| 日韩视频欧美视频| 亚洲最新中文字幕| 欧美性生交xxxxx久久久| 亚洲成人精品视频| 国内精品中文字幕| 国产精品∨欧美精品v日韩精品| 亚洲欧美综合精品久久成人| 91九色单男在线观看| 日韩欧美国产激情| 欧美老女人bb| 欧美日韩国产丝袜另类| 久久人人97超碰精品888| 久久精品国产99国产精品澳门| 亚洲天堂影视av| 亚洲综合最新在线| 日韩一中文字幕| 色系列之999| 高清亚洲成在人网站天堂| 日韩女优人人人人射在线视频| 日韩福利在线播放| 国产97在线亚洲| 秋霞av国产精品一区| 粉嫩老牛aⅴ一区二区三区| 精品久久久久久国产| 91sa在线看| 日韩av在线网站| 欧美成人手机在线| 久久精品免费播放| 日韩一区二区久久久| 国内免费精品永久在线视频| 国产z一区二区三区| 国产精品啪视频| 成人有码在线播放| 亚洲欧美国产制服动漫| 亚洲国产精品视频在线观看| 一区二区三区四区在线观看视频| 国产在线观看91精品一区| 国产精品偷伦免费视频观看的| 欧美日韩国产综合新一区| 国产精品视频免费观看www| 色妞久久福利网| 亚洲男人的天堂在线| 国产免费一区二区三区在线观看| 国产精品免费在线免费| 国产精品一区二区三区久久久| 亚洲精品国产精品久久清纯直播| 美女国内精品自产拍在线播放| 日韩视频在线一区| 欧美激情综合色| 欧美日韩中文字幕| 国产精品免费一区二区三区都可以| www.久久撸.com| 狠狠操狠狠色综合网| 亚洲视频专区在线| 亚洲天堂av网| 久久亚洲国产成人| 欧美激情一区二区三区在线视频观看| 国产欧美一区二区白浆黑人| 成人免费午夜电影| 国产精品视频免费在线| 91色精品视频在线| 国产噜噜噜噜久久久久久久久| 97成人精品区在线播放| 国产精品一区二区性色av| 欧美第一淫aaasss性| 欧美精品videosex极品1| 最新69国产成人精品视频免费| 欧美激情按摩在线| 91久久精品国产91久久| 91精品国产免费久久久久久| 久久精品国产综合| 久久久精品亚洲| 色妞一区二区三区| 久久免费视频网站| 日本中文字幕成人| 成人免费大片黄在线播放| www亚洲精品| 91在线看www| 日韩亚洲国产中文字幕| 久精品免费视频| 国产精品欧美一区二区| 91精品国产免费久久久久久| 日韩欧美国产免费播放| 久久精品成人一区二区三区| 国语自产精品视频在线看抢先版图片|