藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
按鈕在UI設計中是一種常用的UI控件,在界面中作為主要的行動點,引導用戶進行相應的操作,它在用戶和產品的交互中承擔著重要的作用。
按鈕設計看似簡單,但是如果想要更好的交互體驗,引導用戶進行相應的操作,提升產品的轉化率這仍是我們需要研究的問題。下面小編將從按鈕功能類型和設計要點兩個方面進行分析。
一、按鈕功能類型
按鈕的功能類型往往決定了一個按鈕的設計方式,是需要強調還是需要弱化;文案是需要強引導,還是直接闡述功能;按鈕上是放圖標還是不放圖標等。按鈕根據功能的不同,可以分為不同的類型,主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。
1.行為召喚按鈕
行為召喚(CTA)按鈕其目的是誘使用戶采取某些操作, 從而提高產品的轉行率。簡單來說就是通過設計誘導或激勵用戶點擊按鈕,例如立即購買、訂閱關注、利益誘導、文字誘導等。
1)誘導購買
當行為召喚的目的是誘導購買時,按鈕的設計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊,讓用戶進來第一眼就能知道該按鈕的用途。如下圖所示:
以美團外賣為例,該按鈕的顏色采用黑黃對比、形狀采用具有親和力的圓角,在樣式上加入投影同時加入送餐員的元素,配上小紅點,能夠清晰的給用戶傳遞出可點擊部分有去結算、送餐員。另外加入價格誘導,讓你可直觀看到優惠了多少錢,促使你進一步操作。
以淘寶詳情為例,該按鈕是一個組合按鈕,由加入購物車和馬上搶以及店鋪、客服、收藏等組成,作為行為召喚按鈕我們可以明確的看到,不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2)訂閱關注
當行為召喚的目的是訂閱關注時,其重要程度相比誘導購買低很多,但是在設計時我們仍然需要考慮一個問題,這個問題可直接決定該按鈕大小、樣式等,這個問題就是需要根據產品目的判斷是誘導用戶訂閱關注重要還是讓用戶閱讀內容重要。如下圖所示:
當內容重要時,按鈕的設計需要弱化處理,以優酷視頻的發現頁和星球頁為例,這兩個頁面很明顯是以內容為主的界面,在設計時直接弱化了按鈕形式,讓按鈕和整個界面相融合,但是按鈕設計的原則是讓其看上去像按鈕,因此當按鈕只是文字時可以加圖標進行引導比如優酷視頻發現頁,也可以加入弱底紋進行引導還能讓界面看上去整潔,比如優酷視頻星球頁面。
當訂閱關注重要時,按鈕的設計需要強化處理,以橘子娛樂和土豆視頻為例,橘子娛樂采用粗描邊漸變按鈕,同時加入圖標進行引導,具有較強的視覺引導作用,很容易喚起用戶的關注。土豆視頻采用黃色填充加圖標引導,在視覺上和產品內容形成強烈對比,明顯的以關注為主的界面。
3)利益誘導
當行為召喚的目的是利益誘導時,該按鈕設計根據重要程度較高,因此在設計時可以考慮顏色、形狀、加入圖標、誘導文字等設計方法。如下圖所示:
以大眾點評為例,其領獎按鈕明顯比賺積分的層級高,因此為了突出領獎按鈕采用了色塊設計的樣式,同時賺積分按鈕采用描邊設計進行弱化處理。
以騰訊doki為例,其打榜頁面沖榜的重要層級較高,因此在設計時不僅采用了色塊、加入動效圖標、同時還加入了誘導文字,讓按鈕更明顯同時誘導用戶點擊,其他去瀏覽按鈕則采用描邊樣式弱化處理。
4)文字誘導
文字誘導簡單來說就是通過文字,誘導用戶進行下一步操作,多用于空頁面、活動頁面中,因此在設計時采用簡單的色塊填充即可,如果該頁面為活動頁面也可增加漸變或投影樣式,讓按鈕更有空間感,進而突出按鈕。如下圖所示:
以得到為例,當你還沒有學習計劃時,它會對你進行提示“開始制定學習計劃”,同時其按鈕采用重要程度較高的色塊+投影的方式,誘導用戶點擊。
以大眾點評為例,當你還沒有攻略時,它會對你進行提示“我也要創建攻略”,同時其按鈕采用漸變填充的方式,誘導用戶點擊。
2.懸浮按鈕
懸按鈕浮是 Android 應用中最常見的一個控件。不過隨著Android和iOS規范的不斷融合,在iOS中也經常會看到各種各樣的懸浮按鈕。在設計上懸浮按鈕應該采用顯眼的顏色,以抓住用戶的注意力。同時它應該是積極正向的交互,比如創建、分享、探索等,同時并不是所有頁面都需要加懸浮按鈕。如下圖所示:
以UC瀏覽器為例,懸浮按鈕在訂閱頁面的右下角出現,將按鈕和界面結合很容易看出創建內容的意思,同時點擊按鈕還可呼出圖文、視頻等操作圖標。
3.標簽按鈕
標簽按鈕往往呈多個出現,多使用在二級導航或條件篩選下面;以及表單頁面作為切換條件選中。因此在設計樣式上有選中狀態和默認狀態,同時其重要程度較低,在設計時不能喧賓奪主,需要弱化處理。如下圖所示:
以支付寶為例,它主要用在投保的表單頁面,其主要目的就是一個切換條件,重要程度遠不及我要投保按鈕,因此在設計時默認用的描邊處理;選中采用淡淡的色塊。
以轉轉為例,它主要用在導航下方,其主要目的也是切換條件,用戶主要操作是看下方篩選出的內容,因此在設計時也進行弱化處理。
4.表格按鈕
表格按鈕也就是由一個白色網格加文字組成的按鈕,從視覺上看和頁面融為一體,特別不突出。因此多用在個人中心中不太重要信息或者不想讓用戶操作的退出登錄界面中。如下圖所示:
以愛奇藝為例,在我的界面中,關于我們和退出登錄都是用的表格按鈕,由于關于我們是不太重要信息,退出登錄又是不想讓用戶操作的內容,因此采用表格按鈕最為合適。
5.命令按鈕
命令按鈕也就是該按鈕具有明確的指令,多出現在彈框中,通常會有一個文字或2個文字出現的情況。其要求是文字語義要明確,盡量不要用確定、好的、要等詞匯,同時根據用戶右手操作習慣居多,因此將重要的按鈕放在右側。如下圖所示:
以京東金融為例,左圖是京東金融退出的二次確認頁面,右圖是我調整文字之后的頁面。我們說到文字需要表意明確,因此將確定換成退出后表意更加直白,降低用戶理解度。
6.開關按鈕
開關按鈕也是我們很常見的一個組件。表示兩種相互對立的狀態間的切換,多用于表示功能的開啟和關閉。當按鈕開啟后可能還會帶來其他的相應操作。開關按鈕最常見的就是手機設置中,但是也有很多APP將其用到界面中使用。如下圖所示:
以美團外賣和小豬短租為例,它們在提交訂單頁面時都采用了開關按鈕,同時在小豬短租中,當按鈕打開底部會將“您可再入住完成10天內補全信息”進行展開顯示,提示用戶去填寫。這種點擊展開的操作還可增加更多的功能相關內容。
二、按鈕設計要點
1.根據產品為按鈕選擇適合的形狀
在按鈕設計時,需要根據整個界面風格設計合適的按鈕,按鈕樣式主要有直角、小圓角、全圓角三種樣式。
直角的含義:嚴謹、力量、高端。適用于金融類、奢品類產品中,讓產品給人嚴謹安全、高端的感覺。例如寺庫。
半圓角的含義:活潑、年輕、安全。適用于兒童類、年輕化、娛樂類、購物類的產品中,提升親和力,拉近用戶的距離。例如土豆。
小圓角的含義:穩定、中性。適用于用戶跨度較大的常規類產品中,例如微信。
以寺庫、微信、土豆為例,寺庫是品類電商,因此在設計時需要提現高端,因此在按鈕設計時采用直角設計。而微信的用戶群體上到七八十歲,下到幾歲其年齡范圍廣,因此采用穩重的小圓角較為穩妥。土豆短視頻其用戶群體較為年輕活潑,因此采用全圓角較為適合。
2.使用合適的狀態
在部分界面設計中需要考慮按鈕的不同狀態的設計,從而提高用戶操作流暢度。移動端完整的系統按鈕可以分為正常狀態、按壓狀態、禁用狀態。
其中,正常狀態和加載狀態展示的是APP的主色;按壓狀態在正常態的基礎上疊加不透明度15%的黑色#000;禁用狀態是設置灰色或者將正常態設置不透明度45%,該狀態適用于提交界面中使用,比如登陸注冊、轉賬等。如下圖所示:
以京東金融為例,當未輸入轉賬金額時,按鈕禁用為灰色,當輸入金額時按鈕為正常狀態。不過隨著互聯網的發展,寬帶速度不斷的提高,按壓狀態慢慢被拋棄,他存在的意義不像以前網絡不發達的時候,點擊還需要時間反應。
3.提供恰當的反饋
當用戶點擊按鈕時,他們希望界面可以給些恰當的反饋。如果沒有任何反饋,用戶會以為系統沒有收到他們的操作,然后就會重復點擊。這種行為常常導致多個不必要的操作。如下圖所示:
以土豆短視頻為例,當點擊關注時為了避免用戶點擊沒有反應的情況,可在按鈕上添加加載狀態,當關注成功后圖標狀態改為禁用狀態,同時文字變為已關注。
總結
按鈕設計看似簡單,但是如果想要更好的交互體驗,引導用戶進行相應的操作,提升產品的轉化率這仍是我們需要研究的問題。本篇主要將從按鈕功能類型和設計要點兩個方面進行歸納總結。
按鈕功能類型:主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。在使用我們需要根據對應的功能和重要程度選擇適合的設計。
按鈕設計要點:主要有根據產品為按鈕選擇適合的形狀;使用適合的狀態;提供恰當的反饋這三大注意要點。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
大家平時在畫素描的時候經常會遇到顏色深不下去、顏色對比不強烈等問題。畫面的顏色總是顯得很灰,體現不出立體的效果。不管多使勁顏色就是重不下去,有時把紙都涂破了,依然沒有效果。這到底是為什么了?究竟如何才能把顏色重下去了?接下來我們就一探究竟吧~
什么樣的畫面是偏灰、偏臟的畫面呢?
畫面中這種暗部不暗,亮部不亮,顏色處于一個區別不大的狀態,畫面就會顯得灰;而亮面上色的時候筆觸太粗,灰面顏色磨得太多,整個亮部區域顏色就會顯得很臟。
這些問題之所以出現,是因為大家沒有將畫面的“黑、白、灰”表達清楚。
要在白紙上畫出立體的圖形,需要我們加強明暗之間的顏色對比;通過強烈的光影營造立體的視覺效果。而快速表現出大的黑白灰關系是我們塑造的關鍵:
首先,我們找到所畫物體自身顏色最深的地方。用軟一點的鉛筆(8B、12B)排上調子,依次過渡灰面,留出并輕輕刻畫亮部,加上投影和背景。讓畫面先有一個基本的黑白灰,確定出最黑的地方,灰面的位置以及高光的分布。
然后,在這個基礎上我們找到物體的明暗交接線。
先從明暗交界線開始加深顏色并往暗部邊緣逐漸的過渡,運筆排線的力度越來越輕,讓暗部形成一個有深淺顏色變化的面。靠近明暗交界線的地方顏色就重一點,靠近投影的地方顏色就淺一點,然后通過壓深投影的顏色,襯托暗部的反光,讓這個暗部顏色更加透氣。
再回到明暗交界線,往亮部方向用4B、2B將顏色逐漸過渡,畫出灰面來,但物體的灰面不宜畫得過多,一多畫面就膩了;灰面塑造的標準就是顏色一定要比暗部淺,灰面顏色如果加深那暗部的顏色也要同時加深,始終要保持這兩個面的顏色區別。
接下來,就是對比一下整個暗部區域和背景顏色的深淺程度。如果暗部的顏色比背景深就將暗部邊緣的顏色壓重一點點,如果背景的顏色更深,那么就像畫投影一樣,沿著物體的暗部邊緣疊色,加深背景的顏色;不管哪一種情況都要將暗部和背景的顏色區分開。
最后,我們有稍微硬一點的鉛筆(如2H、HB)排線將亮部表現一下,主要是將高光收攏,除了不銹鋼和玻璃其他物體都是越靠近高光用的鉛筆越硬(HB、2H、4H),亮部刻畫時排線一定要細膩,可以刻意排幾組特別精準的線條加強物體的質感,這樣高光和亮部會顯得更白,從而就會襯得暗部的顏色更黑更深。
完成的物體黑白灰的塑造之后,最后看一看整個物體各邊線與背景顏色的深淺對比,還是通過加強區部的顏色對比,完善畫面整體的明暗對比。
總而言之,暗部的黑并不是獨立存在,是因為周邊的顏色都比它淺,于是乎,它就深了下去,如果與周圍的顏色區分不開,那即使將紙張揉破顏色依舊難深下去。所以,暗部疊色就是一邊畫一邊比較,不停的調整,才能始終確保暗部能重下去。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
本篇文章,我將以項目的實踐為例子,簡述設計師在面對未知的商業環境下怎樣應用「精益創業」和「設計思維」將設計與商業結合,實踐設計轉譯和推進落地。我將這次設計實踐稱為「國際化全景設計框架」探索。CCO-集團客戶體驗事業群是一個為阿里平臺商家、阿里經濟體提供售后服務能力的部門,勵志于賦能阿里電商生態圈內的售后服務體驗,提升消費者對平臺的滿意度和 NPS指標。xSpace產品是一個幫助客服人員處理消費者咨詢、投訴、維權等場景的一站式售后服務工作臺?,F已經在阿里生態圈中多個 BU 中應用,成為平臺服務中不可缺少的 CRM產品。
2017年,阿里收購東南亞電商巨頭 lazada 成為阿里商業生態的重要組成部分。CCO 作為負責經濟體售后服務體驗的部門,需要向外輸出阿里服務的價值和能力。因此,我參與的 xSpace產品海外場景孵化是其中重要的一個能力輸出。
△ 產品功能和業務覆蓋范圍
國內產品出海,都會面對一些通用問題,例如:產品設計開發都在國內;業務和真實用戶在國外接觸機會少;文化背景、時間、空間上都或多或少存在差異。
我們熟知很多設計方法,例如 lean UX,design sprint,hook model,lean canvas 等,但是如何在國際化的挑戰中尋找最合適的方法,是我在國際化產品項目中遇到的困惑。
回想項目在推進的過程中出現過的一些困難,例如:
是否有一種全面的國際產品設計和開發模式,既可以轉化產品能力又可以科學的度量海外用戶的體驗?
為了解決所面對的困惑,我嘗試將以往經驗和項目的實踐相結合,梳理了 B類產品國際化體驗設計實踐模型。
本篇文章,我將以項目的實踐為例子,簡述設計師在面對未知的商業環境下怎樣應用「精益創業」和「設計思維」將設計與商業結合,實踐設計轉譯和推進落地。我將這次設計實踐稱為「國際化全景設計框架」探索。
△ 設計思維、精益創業和敏捷開發之間的關系
根據項目不同時期的側重點,我將把整個項目的實踐拆分為3個時期進行介紹,分別是探索期、實驗期和開發期?!冈O計框架」中包含的設計方法也將圍繞不同時期的側重點進行展開。
△ 國際化設計實踐項目分期
當我們對海外場景一無所知的時候需要應用「設計思維」對目標進行分析。在項目啟動初期,由于不清晰、不確定的需求導致產品設計存在很大的阻力。面對這樣的情況,項目團隊決定直接去到客戶現場了解業務現狀。設計師需要遵循「設計思維」,通過發現問題 – 定義問題 – 解決問題的思路,幫助項目快速明確目標。
收集用戶輸入,抽象產品場景:可以從「人」和「事」兩個方面入手。
△ 設計思維在設計前期的應用
從「用戶(人)」的維度發現問題,是為了理解業務人員組織架構;明確公司內部自上而下對產品期待;以及終端用戶的核心訴求。我們主要是通過訪談和觀察法進行數據收集,確保獲得一手的資料。
△ 基于角色的前期調研
通過調研我們發現:Lazada服務團隊與服務BOP 之間的管理關系并沒有很緊密,在服務指標整體的管理上面相較于淘系平臺要求較簡單。但是也同樣存在客服流動性大,不穩定等通用問題。而一線客服在日常使用產品的過程中,則面臨系統割裂操作效率不高等問題。
從「事情(業務)」的維度發現問題可以快速理清業務流程和業務邊界。
在準備出發前,我結合國內項目對電商服務流程的理解,簡單設計了業務調研的框架和范圍。通過訪談的形式進行歸納和補充,有目的有范圍的了解業務的共性和個性。
△ Lazada商業畫布,明確業務目標和范圍
通過「人」和「事」角度的資料收集,我們可以歸納出大部分的產品使用場景。對產品使用場景的抽象理解,可以讓設計師更深入了解業務,通過對用戶的移情和以往的經驗做第一輪體驗判斷。
第一輪體驗判斷:定義問題,明確產品落地思路和節奏。
通過對訪談和觀察內容的梳理發現,目前首要解決的問題是系統遷移、信息內容和渠道擴展融合的問題。經過評估和判斷,現有產品有50%的功能可以被復用,考慮到效能成本的因素,因此就有了系統整合場景適應的概決思路。
△ MVP功能范圍拆解思路
通過以上業務方面的調研分析,接下來將進行產品執行落地階段的實驗和分析。
有了解決問題的思路,就可以根據預先判斷的方向快速產出概念原型并進行實驗。與此同時,有目的性的針對市場競品進行分級調研,可以輔助加深對產品需求設計的理解。把眾多的競品分為核心競品、重要競品和行業競品,主要針對3個核心競品進行調研:這些調研可以幫助打磨出更合理的設計策略。
△ 競品分析思路和競品分級
從調研發現,通常意義上國外的 B端產品似乎看起來相對「簡單」,這可能要歸功于他們在產品商業化推進過程中使用的策略,使得 B類產品在獲客體驗全流程表現的比較成熟。產品獲客階段的體驗感知也是我們的 B類產品在 PK 商業化產品的過程中一個重要參考。
研究競品的設計策略,可以幫助項目在之后的實踐中找到最適合的策略應用在具體的設計方案中。
△ 設計策略、設計原則總結
在這個試錯的階段,整個項目團隊需要保有「精益創業」的思維:接觸并持續地收集用戶對產品的反饋和意見,用真實聲音去驗證產品方案和設計策略與市場的貼合度,并及時調整項目方向。多給自己試錯的機會,就像「精益創業」的作者所說的:失敗是學習的先決條件。
通過前期的調研和實驗,進入開發期的項目應該已經明確了其目標,在這個階段的主要任務是根據產品和業務拆解設計目標,分解設計輸出,度量產品體驗。
拆解設計目標
需要結合產品的生命周期進行設計目標的拆解。我們項目的目標就是成功遷移產品。并且產品目前現有1.0版本已經在公司內部運營了2年,基礎功能已經覆蓋。但為了結合 Lazada 的業務場景需要更深一步的功能定制。結合現狀,設計在不同的產品階段有以下如圖所示的策略分層。
△ 根據產品周期的不同階段進行設計目標的拆解
分解設計輸出
在 MVP 功能覆蓋階段,設計輸出主要包括對設計需求的探索和轉譯。在設計轉譯的拆解思路上,我主要關注通用功能和定制功能之間的融合和落地。抽象來看,從0到1的融合轉譯過程就像是一個由大到小再變大的沙漏。
總匯產品功能→收集國際化產品需求→需求分類→建立映射→提出解決方案→評估成本→設計落地
△ 設計思路抽象
其中有一些關鍵節點需要著重把握:
△ 交互demo
度量產品體驗
作為 B類國際化產品項目,最大的痛點就是距離。設計團隊與一線用戶存在時間、空間、文化上面多種多樣的差異。而用戶的反饋則是體驗優化的重要輸入,如何在項目前期沒有數據監控的情況下度量產品體驗,是國際化設計中所普遍存在的痛點。
因此,除了常規的小范圍可用性測試,我在項目實踐過程中還嘗試應用一種適應于國際化產品的體驗度量方式——SUS(system usability scale)。SUS量表的優點在于:
用戶UAT→SUS測試準備→量表發放→量表回收分析→體驗優化提案→設計落地
△ 國際化產品SUS量表回收分析
配合產品 UAT 計劃,安排一定數量的可用性量表的投放和回收,通過計算可以獲得準確性高達95%的 SUS分數。該分數可以和行業的 benchmark進 行比對,評估出現有產品的弱項分數。這種科學的輕量且快速獲得用戶反饋的方式可幫助體驗設計師找到優化提升的方向,進行專門的走查和分析。
總結一下在遠離客戶的國際化場景中,設計師如何擁有一個全局的視角,科學的推進設計進度和度量產品體驗:
在第一階段——探索期,應該針對項目的側重點選擇科學合理的設計方法,獲取一手的產品需求輸入,抽象出產品的使用場景作為接下來研發產品的「實驗素材」。
在第二個階段——試驗期,除了對項目競品的全鏈路競對研究之外,設計師和項目團隊都需要有不怕錯的試錯精神,應用「精益創業」的流程快速驗證方案、圈定項目發展策略和思路。
在第三個階段——研發期,設計師需要突破國際化項目普遍存在的時間、空間等等限制,選擇最優的設計方法指導設計產出和度量設計方案。
以上就是我在實踐 B類國際化項目中的一些經驗總結。歡迎大家多多交流,相信在 B類產品國際化的道路中,還有非常多可以探索的課題等著我們去思考。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
設計師們,經常聽到需求方說:「我想要那種很有高級感的設計」,看到T臺上的超模,你可能會忍不住說:「嘖嘖,這張臉真高級」……但是,每個人對「高級感」定義不同,它會受到個人審美、教育水平、成長環境、文化價值等因素影響。那么,這個被人們天天掛在嘴邊兒的「高級感」到底如何定義,標準又是什么呢?
今天就跟大家分享下,我最近的相關思考。
關于「高級感」,百度百科上并沒有這個詞條,在一定程度上可以說明,這個詞本身就是很難定義的。
我嘗試著換個思維方式,看看什么是低級?低級意味著:多欲求的、簡單的、盲目的。那么,反過來看「高級感」,大概可以解讀為:克制的、的、特立獨行的。
1. 克制的
說到克制,我想到了德國工業設計師 Dieter Rams,他的「設計十戒」中有提到「好的設計是盡可能的無設計」,體現出簡潔、克制的重要性。
比如:無印良品,在「性冷淡風」的背后充滿了對欲望的克制。
產品設計以更親近自然的棉、麻、羊毛的材質配上木本、黑、白、灰色。不管是從造型,還是從用色上都極度的克制,但是給人高品質,很舒服的感受。
反而下圖,高飽和度和純度的配色設計,給人有一種反自然的,人工造的顏色的感覺,顯得服裝比較廉價。
那么,品及時尚圈的設計,又是怎么考慮呢?
可以看出,他們服裝從簡單利索的剪裁,到高級灰(莫蘭迪色)的配色,正是我們所說的「克制」,給人一種奢華且高級的感受。
為什么克制的用色,給你高級的感受呢?因為,這樣會削弱色彩對人情緒的影響,反而有治愈的能量,有一種頹廢的性感。
下面這幅畫,是意大利20世紀著名的版畫家,油畫家喬治莫蘭迪的(莫蘭迪色也是根據他的名字而來)。在他的畫里,所有的色彩都滲入了灰色和白色調,失去了原本或艷麗或凝重的本色,柔和優雅,而又統一的混合在一起。用現在的話來說就是:克制、留白、極簡。
目前很多服裝設計、室內設計都在效仿這種配色方式,顯得更有品質。
比如,今年熱播的《延禧攻略》,一改以往流量電視劇那種高飽和度,艷麗的配色,猶如一股清流,讓人眼前一亮,感覺把整部劇都帶的高級了很多。
以上可以看出,克制的造型及用色、適當的留白、極簡的畫風,反而顯得更加自信,從而給人傳遞出高級的視覺感受。
2. 的
人們常說,細節決定成敗。其實,讓人們感到「高級」的事物,都有一個共性:對細節追求。
比如,前段時間看快樂大本營,里面對《延禧攻略》中演員服飾的刺繡細節進行講解,當時何炅用「很高級」夸贊。
我就在想,是什么觸發了他評價「高級」。
后來發現,是因為劇中人物服裝上的刺繡全是純手工的。針法多樣,包括復雜的手推繡、打籽繡、磐金繡、珠繡……而且,團隊都是曾經參加過故宮文物翻修的匠人們。
為了無條件的貼近歷史,這一件皇上的衣服花費了8個工人半年的時間進行制作。
因此,讓何炅潛意識里感到「很高級」的,正是因為僅僅為了一部電視劇,在演員服裝上耗費這么大的功夫,這種對細節的追求。
再拿科技產品舉例,比如:iPhone,由于「對稱設計」可能是人們能感知到的最原始的美,很多情況下手機受限于內部設計,很難在表面做到對稱。
但是 iPhone 為了遵循「對稱式」設計,投入非常多的人力去解決(上面),而對比三星Galaxy S6 的設計(下面),看起來就略顯尷尬。
它們對產品每一個方面都精雕細琢,盡管用戶不一定能注意到,這種工匠精神,讓人們覺得蘋果手機不僅僅是一款產品,更像是一件藝術品,同樣給人高級的感覺。
3. 特立獨行的
人類本能習慣于盲目追隨、容易妥協。因此,獨立思考、特立獨行且自信的人或事物,常給人很感級的感覺。
比如,在網紅臉盛行的今天,隨便逛個街,都充滿了濃濃的玻尿酸和歐式平行大雙眼皮的味道。雖然并不丑,但是總覺得不夠高級。比如,柳巖就評價過自己屬于「低級臉」。
為什么超模那樣高冷的臉蛋會給人一種高級感呢?
因為,她們有特色的五官長相,意味著不向大眾主流審美屈服和妥協,而且非常自信。同時,高級感也意味著,在 TA身上看不到欲望、諂媚和討好。
再比如,日本的服裝設計大師——山本耀司。在人們都追求時尚和潮流,偏愛女性婀娜的曲線和靚麗的色澤的時候,他卻以反時尚設計而著稱。
他大膽發展日本傳統服飾文化的精華,具有獨立思考,形成一種反時尚風格。這種與西方主流背道而馳的新著裝理念,不但在時裝界站穩了腳跟,還反過來影響了西方的設計師。
總的來說,高級感是克制的,它極簡、低調、且優雅;高級感是的,對細節的完美追求、具有匠心精神;高級感是特立獨行且自信的,不盲目追逐潮流、不討好、不妥協。
雖然我們認為「克制的」、「的」、「特立獨行的」給人以高級的感受。但是,真的是所有人都能接受嗎?
不可否認,有的人就是覺得花里胡哨的東西很高級,比如:在美甲上鑲一些比吊燈上還大的鉆;穿一雙松糕鞋,鞋底恨不得比自己小腿肚還高。
因此,我就在思考兩個問題:影響審美的因素;大眾對「高級感」的接受度。
1. 影響審美的因素
不管是個人審美、教育水平、成長環境,還是價值觀,我覺得決定審美的背后,是「經濟」這只無形的手。
不知道你有沒有發現一個規律,越落后貧窮的國家,卻喜歡艷麗的、繁雜的設計。
而相反,越發達的國家,反而更青睞簡約、淡色。
原因是經濟落后的國家,人們缺少的是「豐富」,想要的更多色彩,更多花樣。
而經濟發達的地方,人們已經擁有足夠多,因此,內心中追求更多的是:我需要什么?我是誰?什么對我不重要?
人們對過于爆炸多樣的商品會感到「焦慮」,「害怕」因為選擇的太多,反而想要抽離。
因此,像無印良品這類克制的、做減法的、回歸本質的物品,反而受到人們喜愛。
2. 大眾對「高級感」的接受度
這里的「大眾」就先指我們中國大眾吧,他們能接受「高級感」的克制,極簡嗎?
我們從消費時代進行分析,目前日本處于第四消費時代,它的特征就是上面所說的,不再盲目的追求品帶來的滿足感,而是追求除了物質以外什么才能讓人變得幸福。
而中國呢?
大多數人認為,中國正處于第二、第三、第四消費時代共存期。在偏遠的農村,處于第二消費時代,他們的觀念是「大的就是好的」,「繁瑣是好的」;三四線城市,處于第三消費時代,他們的觀念是「個性化、品牌化」追求與眾不同,喜歡名牌貨;一二線城市,處于第四消費時代,更加崇尚無品牌,休閑傾向,整個社會趨于共享。
但是,我認為,隨著中國經濟近幾年迅猛發展,互聯網的快速普及,大家接受信息的程度慢慢趨同,就算非一二線城市,大家的消費觀念及審美水平也在隨之改變。
比如:抖音里,很多四五線城市的小姐姐們,穿衣及化妝風格都很ins風;同時,越來越多不因為取悅男性,而是突顯獨立女性的打扮。
越來越多的北歐極簡裝修風的流行……
總的來說,大眾的審美水平和消費觀念會受經濟的影響,而中國大眾的消費觀念正在往第四消費時代慢慢轉變,對真正「高級感」的事物,接受度越來越高。
上面舉了很多傳統行業案例,其實互聯網產品設計中,也在往「高級感」方向走,踐行著「極簡」和「克制」的理念。
比如:年初的谷歌「ALL-White」風。眾所周知,谷歌的設計師是極簡主義界面的忠實粉絲。
下面是優化前后對比,移除大面積的色塊,采用大面積留白,體現現代、簡約的感覺。
移除多彩的圖標,采用極簡的線性表現方式。
再比如,百度的設計,一年前也在「高級感」的設計理念上進行深挖和落地。
從以下兩個維度可以看出:克制的配色;的細節。
1. 克制的配色
拿「簡單搜索」舉例,它是百度的一款搜索APP,以簡潔清爽的視覺體驗,簡單的操作交互,吸引了大量用戶,而且零廣告。
在界面的用色上,非??酥?,采用以「黑、白、灰」為主,目的是為了讓用戶聚焦內容本身,而不是為了設計而設計。
包括 icon 的處理,以純色的線性為主,更加現代、簡約。
2. 的細節
大家都知道,黃金分割是最普遍也是最能引起人美感的。我們所熟知的蒙娜麗莎的臉、雅典的帕特農神廟等都應用了該比例設計。
其實,在看似普通的百度搜索首頁,同樣遵循著這個比例,讓有規則的美,嚴謹的融入其中。
包括柵格系統在設計中運用,這種來源于數學的美學,將有助于用戶,更有效和愉悅的閱讀及獲取內容。
以上可以看出,不管是傳統行業還是互聯網行業,亦或者是未來的人工智能的設計,都在往「克制」、「」的方向發展,讓人人都能享用到優質、高級的設計。
總的來說,「高級感」意味著對設計保持克制的、對細節追求、擁有獨立思考的產物,而且,隨著經濟的發展,人們的審美和接受程度也發生著改變,追求真正高品質的設計。同時,不僅傳統行業在踐行「高級感」的設計,互聯網的產品設計也在朝著這個方向發展。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
領先企業已經認識到,設計不僅僅停留在產品的 “外在美”,而應聚焦在更具商業價值的“內在美”。那么,如何實現通過“內在美”創造價值呢?答案就在設計思維。在數字化變革時代,更好地理解和分析數字消費者成為每個企業的核心要務。同時,如何將分析結果轉化為創新的產品和服務——更是為決策者提出了新的挑戰?!霸O計思維”作為一套完整的“以用戶為中心”的方法論和工具包,為企業重塑“客戶價值”、實現服務創新,提供了切實的方法指引,而這一切的終極目標是成就企業價值。
簡單來說,設計思維來自“設計師思維”,是一套基于“以用戶為中心”的創新方法論。
在數字時代,消費者的使用動機和行為模式更復雜多樣,企業競爭環境也更加復雜多變。對于決策者而言,客戶體驗、場景、觸點、旅程優化等詞匯已經不再新鮮。
擺在企業戰略制定者們面前的問題是,如何以一種全局視角去理解客戶,并讓組織運作回歸“創造客戶價值”,不斷創新。埃森哲《2017年技術展望》通過針對全球企業領袖的一項調研發現,79%的受訪者認為,組織進化的目標就是——更好地研究消費者使用行為和動機,并提供行業領先的客戶體驗。
與此同時,面對產品服務創新面臨的內外部不確定性,企業決策者往往陷入兩難困境:即一方面,鼓勵組織內部大膽試錯、大膽創新;另一方面,又希望創新過程管理有序,并能量化創新結果。
于是諸多企業領導者重新思考創新模式,并在設計師們那里找到了創新靈感。
企業進一步把設計師的工作模式抽象提煉出來,逐步形成了設計思維——這套結構化地理解消費者習慣、行為、喜好和需求,并產生設計機會的方法論,希望從中找到在數字時代突圍的機會。
比起科學研究人員或者銷售人員,“設計師”面臨的問題、合作對象和產出方式有不同特點,甚至更加復雜。不論什么類型的產品,設計師的思考模式往往是,從不斷變化的用戶或者市場需要開始,兼顧生產水平和工藝限制,以可執行的產品方案結束。設計過程通常都會融入反復的內部討論、看似混亂的草圖、無情的推翻和修改和某個必要的“靈感爆發”時刻。
創新思維本身也是在不斷迭代,我們姑且將其定義為1.0、2.0和3.0版本(見圖一)。
對于傳統企業而言,創新更是當務之急。而設計思維的成功運用,無疑能夠為傳統企業插上創新的翅膀。
《哈佛商業評論》就曾以百事公司為例,分析這家傳統快消業巨頭,如何通過設立首席設計官,將設計思維融入公司文化,并在做任何重要決定時都要考慮設計的因素,完成從新產品、包裝、陳列到品牌體驗的成功創新。隨著諸多傳統企業將創新思維應用在各自的創新領域,“設計思維”已經在過去的十幾年,從產品規劃方法,發展成為了一套系統化的創新方法論。
在新的語境下,設計思維已經發展成為一系列“以用戶為中心”的工具和方法集合,這里既包含產品設計模式,也包含組織協作模式;不僅從內涵上,在外延上,這種思維方式也從產品優化,進一步拓展到服務重構、流程設計,乃至實現突破性的商業模式創新。
設計思維3.0作為系統化的創新方法體系(見圖二)可以看做以下三項模式及其工具方法的合集:
要實現“設計思維”:
第一步需要轉換思考角度,理解分析“用戶是誰”、“用戶想要什么”,發現有價值的設計機會在哪里;
第二步結合技術的可實現性,篩選可以被技術解決的機會,并拼搭出未來的產品藍圖;
第三步基于實現的需求,做出分步規劃,從框架到細節逐步交付。
從產品藍圖來看,前面一個階段屬于需求的匯集;后一個階段屬于需求的延展(見圖三)。
以下按照三個步驟,列舉設計思維倡導的核心方法:
成功的產品始于對用戶需求的發現和理解(見圖四)。
顛覆了酒店住宿行業的Airbnb在創立初期,新用戶和預定量增長停滯不前,創始人之一同時也是設計師背景的布賴恩·切斯科(Brian Chesky)通過深入對種子用戶的理解,發現這些嘗試租賃共享房屋的用戶最為關心房源狀態和特色。
基于這一認知,切斯科和創始團隊做出了可能是Airbnb初創期最重要的決定,將最后的預算用于租賃專業攝影設備,并按照用戶關注的維度去重新拍攝房源照片,從色彩、角度和細節等方面,去強化共享房屋和酒店的差異,最終這批照片上線后為Airbnb帶來了100%的預定量增長。而Airbnb更強化了圖片優先的整體策略,時刻關注用戶體驗,成為這家估值超過300億美元的共享經濟巨頭持續增長的基石之一。
設計思維強調把消費者當做立體的“人”來看,了解“人”的習慣經驗如何對其購買、使用產品產生影響,分析其在服務各階段的感受是什么,情緒如何變化。那么,如何了解如此復雜的“人”呢?
設計師們從心理學和人類學家那里借鑒了一些常用的方法,如采取實地觀察、跟蹤和訪談等方式,記錄用戶行為的“人種志”研究;又比如場景分析,提倡對產品的使用環境(自然與社會環境)進行記錄和分析。
面對數字時代消費者不斷變化的需求,面對數字化觸點大爆炸的現狀,在規劃設計的初始階段,企業迫切需要對用戶場景進行梳理,采取全局視角去發現待滿足的創新機會點(見圖五)。
從組織內部看,也需要更為有效的溝通和協作方式。設計思維倡導通過系統化的方式去尋找這些創新機會,其核心思想是:對全局信息的可視化表達,以及跨領域的相互激發。
設計思維鼓勵在團隊協作中使用創新手法,如頭腦風暴進行窮舉(Brainstorming)、可視化的方式表現、角色轉換(Body Storming)以體會用戶感受等,甚至在藍圖規劃過程中直接邀請客戶或者最終用戶參與,以共同設計的方式充分交流和激發,目的是打破團隊壁壘,共同以用戶視角進行問題定義和討論,形成統一認識。
埃森哲在幫助某國有銀行進行數字化體驗再造項目時,發現由傳統的業務部門“提出需求”到技術部門“執行需求”的工作模式不僅沒有提升效率,反而由于高昂的溝通成本,減少了各方對創新的意愿和投入。
在埃森哲的建議下,將傳統的單向需求匯報模式,改為周期性設計創新工作坊。通過系統化的梳理金融類消費者的使用習慣和需求,將未來藍圖的規劃與企業整體目標有機結合,找到了適合該企業的創新設計方向。而持續的跨部門合作,也提前統一了創新方向并確保結果落地。
有一種理解認為,設計思維中對于結果的迭代交付訴求是“提早犯錯(Fail Early)”,然而更完整的說法應該是“提早評估”。設計思維中使用大量工具從用戶角度描述需求,或者搭建原型,這一過程更多是描繪“產品的中間態”,即產品概念由抽象到具體,核心目的是更早完成評估和修正(見圖六)。
通過搭建原型并測試的方法,不僅限應用于手機或者網站,也包括線下服務。一個著名的案例喜達屋集團旗下雅樂軒(Aloft)酒店。
作為面向20-30歲年輕人群的品牌,雅樂軒酒店的設計團隊在規劃階段,就將真實的設計方案制作成3D模型放置在虛擬線上游戲中,以測試目標用戶的反應,整個測試過程持續9個月,并包括了多次基于用戶意見的修改。
最終,大量基于“虛擬模型”的測試結果,如酒店大堂色彩選擇、屋內布局、影音設備位置等,被有選擇地應用在實際酒店設計中。《商業周刊》評論喜達屋這種模型測試,不論從速度或者成本來講,都非常有參考價值。
領先的企業決策者們已經認識到,設計不僅僅停留在產品的 “外在美”,而應該聚焦在更具商業價值的“內在美”。那么,如何實現通過“內在美”創造價值呢?答案在于如何利用“設計思維”讓內部組織和員工重新回到 “客戶價值” 思維方式上去,并密切協作。這里有四條建議:
首先應在新產品設計研發團隊中,將設計思維方法常態化、步驟流程完整化??煽紤]通過設立標桿項目、打造標桿產品的形式,完整地應用設計思維方法,在若干輪反復應用之后找到適合本企業的流程方法。
同時,借鑒互聯網企業的方式,周期性組織一日黑客馬拉松(Hackathon) 類活動,在組織內部擴大影響。
MVP即Minimum Viable Product(最小可行產品),是與敏捷產品開發模式密切相關的產品交付模式,由埃里克·萊斯(Eric Ries)在《精益創業》中提出,核心原則是,首先聚焦在滿足用戶單一需求的功能(所謂“最小可行”),之后不斷迭代增加功能,最終形成完整的產品或系統。對待企業核心服務的數字化提升乃至變革時,MVP是一種行之有效的產品交付理念。
創新并不意味著一味鼓勵犯錯,也不意味著無法量化評估。
圍繞用戶進行產品和服務優化,是一個循序漸進的螺旋式上升過程,這要求對設計結果的評判機制能有效適應這種敏捷迭代。如,將銷售結果導向的KPI要求,拆解為若干可以測量的用戶行為的KPI。
同時,在定義階段,將這些用戶行為KPI用到產品設計的輸入中,聚焦在提升這些用戶KPI上,后續不斷優化提升。在方案設計中考慮,如何形成反饋機制,預設用戶行為的KPI和監測方法,在下一輪優化中不斷迭代。
“技術實驗室”是諸多領先企業在進行研發領域創新,特別是構建前沿領域技術創新能力時,常??紤]的戰略舉措。同樣,要進一步推進數字化領域的客戶導向創新,建立“創新設計中心”可以從戰略的高度推進“設計思維”在數字化轉型中的作用。
ERP領域的巨頭SAP公司也在持續增加其對設計團隊的投入,在2012年就開始著手組建新的設計中心;素以創新和多元化產品著稱的3M公司,在2016年將總部設計中心擴容了四倍面積,可容納150名設計師工作,并在其中進行協作創新、產品展示和客戶洽淡。埃森哲大中華區也于2016年底,在香港構建了“設計工作室”,作為分布全球的設計網絡的一環,在這個超過3700平米的空間中,集中不同專長的數字化設計能力,與客戶共同創新。
可以預見,“創新設計中心”將會越來越多地出現,成為從市場端洞察用戶需求、挖掘商業機會的強大雙擎之一。
設計思維3.0作為一種全局化的創新方法論,能帶給企業一種全新視角,即如何圍繞客戶價值,構建可持續的產品和服務?
在數字時代,企業需要兩手抓:一方面,能夠從用戶視角分析梳理需求斷層和服務機會;從另一個方面,能夠為組織的協作方式找到新的模式,以強化效率和有效性。如同設計結果需要漸進式上升,工作方法和協作形式都需要不斷進化迭代,才能最終尋找到適合發展階段的轉型切入點,支撐企業數字化時代實現全面創新。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
在 UI設計中,我們常常說用戶體驗至上,什么是用戶體驗?我們的產品為什么能夠留住人?為什么那么多人愛用?這都是值得思考的問題。前幾天我在體驗一款產品注冊輸入驗證碼的時候發現,鍵盤能夠自動獲取到手機的短信,這真的是解救我這種每次輸入驗證碼要記兩遍的人。后來通過了解才知道是 iPhone手機更新 iOS12以后,系統鍵盤增加的提醒功能。
于是我又去研究了經常使用的京東金融,首先我測試了忘記密碼頁面,輸入驗證碼時他采用的系統鍵盤樣式,同樣系統鍵盤獲取到了短信驗證碼,直接點擊驗證碼即可輸入,簡單快捷。
同時我又測試了支付界面的短信驗證,京東金融為了安全考慮,并沒有采用系統鍵盤而是自己開發的安全鍵盤,并沒有獲取短信驗證碼信息,但是作為用戶的我并沒有感到不好用,畢竟以安全為主。
我想這個例子就可以回答我上面問的幾個問題。什么是用戶體驗?對于一個成熟的產品來說,你的用戶愛用、經常用就可以說他用戶體驗做得比較好。
如何才能讓用戶愛用呢?首先需要保證基本功能滿足;其次交互流程合理、最后在前兩個都做好的情況下,我們還可以從交互的小細節來提升產品體驗,從而讓用戶愛用。以下是我整理的8大交互小細節:
反饋不單單是在大的功能頁面才用,小操作也需要提供及時反饋,讓用戶知道正在發生什么,從而有掌控感。這個反饋可以是聽覺、觸覺、視覺。
以愛奇藝安卓版V9.9.5視頻詳情頁為例,它就是加入了觸感反饋,當你點擊點贊或收藏時,手機會進行震動(目前iPhone版還未更新),當我發現這個小交互的時候就被吸引到了。當你點贊的時候,就像你剛戀愛時,你男朋友牽你手觸電的感覺,加入觸感之后讓整個交互更加情感化了。同時當你點贊或收藏成功之后,也會及時反饋當前所處的狀態,提示成功,從而增強用戶的把控感。
讓用戶操作更方便,這也是我們在做交互細節時需要考慮的,這樣可以盡可能的縮短用戶操作時間,同時也可以減輕用戶的認知負擔,促進用戶下單。
以天貓購物車為例,購物車單個列表可以左滑進行發現、移入收藏夾、刪除等功能,而我們長按列表,同樣可以展示這三個操作。
我們知道側滑操作是 iOS 才有的,而安卓版大多數編輯操作都是采用長按,天貓 iPhone版2種方式都有加入,可以照顧到更多人的習慣。
產品不單單只是為了用戶體驗,其最終目的也是為了盈利,因此通過一些小交互也可強調產品希望用戶注意的地方。
左圖:以大眾點評為例,大眾點評詳情頁不斷上滑時,頂部會將個人信息和關注按鈕進行置頂操作,這樣就可方便用戶在瀏覽過程中隨時進行關注操作。
右圖:以掌上生活為例,在精選欄目界面向下滑動過程中,底部會出現一個產品的氣泡提示,點擊氣泡會下滑至相關位置的產品。
激勵用戶進行下一步操作,在一定誘因趨勢下,讓用戶自愿做產品期望他們做的事情,從而激勵用戶進行下一步操作。
以天貓雙11活動為例,從天貓首頁界面加入搶666紅包為誘導,作為用戶看到這樣的內容還是很想點進去看看的,當然進入之后也不負眾望確實讓我搶了紅包,領取到了80塊的福利,同時下方還有各種任務列表,一步步引導用戶去操作,從而達到產品想讓用戶操作的目的。
引導用戶關注,通過外力引導可以引導用戶做產品想讓他們做的事情,雖然我們說好的產品會自己說話,但是對于某些新操作,是有必要提醒用戶的。
以愛奇藝為例,在首頁你看到有一個長按試試的手型引導,這個是新加的操作,在初期長按操作優先在安卓版才有,但是很多人都不知道這個功能,我也是無意中發現的。在 iPhone版上線后,他們在第一張視頻圖上加入引導,可以更明確的讓用戶知道有該功能,長按封面后可對視頻進行預覽、收藏、直接看正片等操作。
在產品中合理的加入品牌基因,可以讓用戶一眼看出這是你的產品,從而提升產品的識別度。下面我找了兩款交互小細節中運用品牌基因的案例。如下圖:
以轉轉為例,它在底部標簽欄舵峰發布按鈕處,剛進頁面加載時,會有一個裝有發條的小熊在那轉啊轉,在如今趨同的產品中,很容易就能夠知道是轉轉的吉祥物。
以美團外賣為例,下拉刷新時,顯示一個袋鼠快遞員送餐的小動畫,看到它我們很容易就能夠知道是美團外賣。
不經意時,在一些小細節處制造驚喜,從功能上來說并沒有什么幫助,但是這個驚喜提供了超出了用戶預期的體驗,就會讓用戶對產品產生好感。
以騰訊視頻為例,在 doki明星詳情中,為明星打榜后可以繼續沖榜,點擊沖榜就有很多小愛心從天而降,為用戶營造浪漫溫馨的氛圍,提高用戶的幸福感。
當某個功能比較重要時,可能會在多個地方出現,這時候就需要做好狀態的數據跟隨了,如下圖:
以騰訊視頻為例,騰訊doki詳情頁面在文章底部有一個大的點贊按鈕,提示用戶看完內容后進行點贊操作,但是如果用戶并沒有滑動到底部想點贊怎么辦,所以騰訊在詳情頁的底部固定有評論和點贊,在交互上就需要做到,點擊其中一個,另外一個效果要進行跟隨。
作為設計師,我們在設計時除了考慮實現基本功能外,同時還可以考慮如何設計才能夠抓住用戶,讓用戶為你的產品買單。以上八個交互小細節其實仔細看,你會發現總結起來就是反饋、提醒、引導、激勵這些交互方式,在做交互設計時需要我們落實到細節,加強產品與用戶之間的互動,從而提升產品體驗的交互細節。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
想必很多前輩都會告訴大家,提高設計水平,最重要的一點就是多看多練多想。這句話,沒有任何毛病。
剛入門的同學肯定都會一直這樣做。特別是在“多看”方面,很熱衷于去收集各種各樣不同的站點,譬如自己碰到最多的問題就是:“米田,你有什么好的設計網站推薦給我們?”這樣的問題,我每周都會被問到數十次之多。
但是當東西真的變得很多的時候,往往會產生很嚴重的問題。不知道從哪里開始找起。特別是關于圖片方面的問題,這點更為嚴重。因為圖片能清楚描述的可能性很小,譬如一張一年前看過的海報,讓你再次清楚描述它是很難的。
所以這里就會引出一個話題,如何讓我們辛辛苦苦收集的圖片。能更好的使用,這是每個設計師必須要面對的問題。
要了解這個問題,最重要的一點是,知道什么東西是適合的。
圖片整理術,合適是什么?
舉個簡單的例子吧。圖中的這位人物叫盧冠廷,填詞人?;蛟S很多人對這個名字比較陌生,沒關系。你肯定聽過他唱的歌。
是以下這首一生所愛。大話西游里的主題曲,相信華人都聽過他唱的這首歌曲。
那么經典的一首歌,創作時間需要多久呢?
答案是一個晚上。你的眼睛沒看錯,真的就是一個晚上創作出來的。這是我在一次線下分享會的時候。問過盧冠廷先生這個問題,他的回答就是這樣。
那么他是怎么做到的呢?相信每一個人都特別好奇。
和作曲一樣。好的設計創意也不一定需要長時間去思考。很多時候,創意來源于洗澡的時候。相反你花越多時間去思考,卻越想不出來。
這就是做靈感創意的魅力所在。
回到一生所愛這首歌曲的創作過程,盧冠廷先生是怎么做到在一晚時間,創作出經典的歌詞呢?
答案就是。答案就是,答案就是,畫重點了。
將他聽過關于愛情最好的十首音,一首一首反復聽。
抽取其中的精華,變成這首歌的主要內容。為什么要選取十首最好的?因為哪怕你創造出來的作品是在這些歌曲里最差的那一首,那也是從最好的結果內得到的最差答案。比單純自己憑空想象,效果要好很多。
那么對于設計同樣如此。我們不是需要填詞,但是要做設計,參考是必不可少的內容。
好的參考流程,找到合適的關鍵字很重要。你就要采用觀看,丟棄和應用這三步將看到的東西,消化吸收。
持續建造你的靈感水庫
為了讓我們持續擁有最好的靈感,這時候,就需要建造靈感水庫。
一般建造水庫來說。最重要的就是這四點
● 第一、找到坐標(建造地)。
● 第二、投入魚苗(商品)。
● 第三,保持它的時效性,常常要去維修這個水庫(定期上班)。
● 第四、每條魚苗都標記好(記賬)。
當然,這是比較形象的比喻,其實就是要建立屬于自己的圖庫。坐標系所用的工具。投入的魚苗是圖片。時效指的是定期去刪減圖片。標記為每張圖片打上標簽。
坐標
最理想的。圖庫工具應該有這樣一個功能,就能找到類似的圖片。
這不是很復雜的技術,不過卻很有用。有這個功能的工具,能夠一下子推薦相似風格的作品給我們參考,這大大提高了工作效率。
因為這個是圖片類的。整理工具。
三常用的工具如下圖。
● 花瓣
● Eagle
其中最理想的圖庫工具是Pinterest。它的相關度,聯想功能是最強大。簡單來說,你能用最短的時間找到。最多相似的圖。
對比花瓣。就明白其中的差異。
同樣是一張類似的圖。Pinterest找到的圖片是比較接近的風格,而花瓣找到的圖片風格就比較迥異了。
你或許會說。你這兩個工具我都不一定用到,我常常用的只是百度。那直接通過百度搜到的圖片,能有類似的效果嗎?
但饒可以,所有的搜索引擎都有一個功能叫做“以圖搜圖”。
以谷歌瀏覽器為例吧,就在瀏覽器的紅色箭頭部分上傳你需要尋找的圖片,它就會在顯示結果里自動推薦相似的圖片。
得到的結果類似這樣。
一般谷歌瀏覽器,點擊圖片右鍵的時候。都能發現有一種叫做在Google搜索相關圖片,這也是能達到相同的效果。
嗯,或許你不一定能訪問谷歌搜索,不過以下推薦的這些站點同樣能實現相同的效果。
有興趣可以去看看。
投入
好了,你要儲備自己私人圖庫的工具后,接著就是要將我們看到的圖片一張張放進去。找到坐標,修建水庫后,你需要定期定量的投入魚苗,不然這個水庫也只是空置的水庫,是沒有任何作用的。
舉個簡單的例子,如何保持庭院的整潔?肯定是需要時時打掃。這是日式庭院里面很重要的組成部分。定期的清掃落葉,保持整個庭院是處于相對空靈的狀態。
時效
同樣我們的水庫。也是需要進行這樣的一個修繕工作。一般我自己會將其分為性和臨時性兩種項目大的分類。
● 性:會收藏一些最常用的,而且以后肯定能用到的一些圖片素材。
● 臨時性:會根據每個項目收集有針對性的素材進行放置,可能項目結束之后就會進行封擋或直接刪除處理。
網絡端整理:
通過線上工具,比如chrome花瓣插件通過一個“采集到花瓣”的功能,就能將網絡上的圖片直接轉載到相應的工具里。
本地端:
可能有些項目不太想被人知道的話,本地整理很不錯的方法。譬如這里用到的工具是Eagle。它的分類功能很強大,可以通過顏色、大小、類型進行篩選。
標記
為什么要修建自己的水庫,即整理圖庫呢?
最終目標跟前面那兩課講的很類似,就是要在未來的時候,能通過模糊搜索找到快速相對應的圖片。如果你找不到,那其實整理圖庫意義不大了。
這就好比一個很龐大的圖書館里面沒有任何分類系統的話,你肯定是找不到你需要的東西。
案例:一小時10個設計參考
講了比較這么多內容,我覺得應該舉一個案例,會更容易理解。
這種方法對快速想到多種關鍵字很有用,因為圖片往往需要通過關鍵字才能找到。這種方法叫做一小時10個設計參考。當然找到十個參考時間可以更短,最快只需要十分鐘就可以了。
比如我們要做一款產品。希望薄荷糖去吸引上班族購買,最終設計的成果是一條廣告片或者平面海報。
首先如果按我們普通的思考模型。大概是這樣的,你會思考出一堆薄荷糖的作用或者營銷方案。這種方法不好么?當然不是,只是效率有點低。
現在介紹的辦法就是希望通過技巧,能快速想到十個甚至100個不同的創意方向(關鍵字)。這有什么用呢?就對于最后的在臨時項目里面尋找相對應的參考圖片,就會有非常大的幫助。
簡單來說,先在左邊的三角形內寫下與主題相關的資訊??梢岳斫鉃椋谙闾沁@個產品有關系的感受,都可以放在這個三角形里呈現。
隨后在右邊的三角形內寫出目標客戶群喜歡的東西。就是年輕的白領,他們最喜歡的是什么東西?可能有以下的這些關鍵詞。
最終我們要做的就是將左側的三角形的關鍵字與右側三角形的關鍵字進行隨機的拼合。
就是這么一個簡單的過程,就能形成很多看上去特別酷炫的關鍵詞。
● 清涼的音樂
● 變態的重金屬
● 頭發豎起來的溫柔
● 甜甜的色瞇瞇
● 透心涼的帥氣
我們循著這些酷炫的關鍵字去尋找相對應的素材參考,就完成了我們最基礎的靈感構思階段,得到以上這些圖片內容。
很多朋友都在問一個問題。老覺得自己構思設計的時候感覺沒有靈感,不知道怎么提高。很重要的原因是看的東西不夠,或者看的東西太過單一。
解決辦法很簡單,當你每天去看100-200張設計參考圖片的時候,再來回答這個問題,相信不用我告訴你答案,你自己也有自己的判斷了。
這百張圖并不是來源于單一的網站,這就需要你根據自身習慣。篩選過程,與每個人的購物習慣一樣,沒有一個完全的標準的答案。試試這節課交給大家的創意思考法。做延伸思考時很有幫助。
最后,當看到足夠多的時候。就不會太依賴圖庫,進而能夠將不同的元素進行拆解,形成屬于自己的原創東西。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
社交電商在2018年可謂風起云涌,拼多多、云集、有贊都在18年陸續宣布融資,并且融資金額都過億。然而社交電商本身就是個偽命題,雖然人口紅利大不如前,而且社交說白了就是一直被人所反感的微商,刷屏、商品質量差,傳銷即視感。但是有需求就有市場,想一想為什么你討厭拼多多,是假貨、是山寨、還是其他什么,究其原因是飽漢不知餓漢饑。而飽漢只是很少一部分人群而已,我們自然不是他的目標用戶,隨你拉黑也無所謂,所以社交電商的崛起是必然,并且有他獨特的優勢:
目前社交電商的形式主要分為兩種,一種是拼團,如拼多多,這種模式通常發起者是不收益的,只是所有拼團者可以享受更低的價格購買商品,算是一種利人利己,裂變質量更好的一種行為。另一種是微商,這種模式的裂變范圍更廣,但是裂變質量較差。微商被冠以惡名刷屏大家都明白,而經我們研究發現,其實發圈的推薦購物是效率的分銷行為。還有這樣的熟人賣貨邏輯是否可行?
社交是最好做的,也是最難做的。購物從本質上來說都是發現有需求才購物,但逐漸的變成了逛/別人推薦想起來自己有需求,再購物的變化。前者我們可以通過廣告、營銷、產品的優化來讓用戶轉化,而后者正是現階段我們需要考慮的事情,如何讓用戶買單那些可能有需求的東西,滿足用戶其他更深層次的需求。
2017年艾瑞咨詢的移動社交用戶在應用內購物驅動因素分析,我們能發現社交關系鏈的價值還是非常值得挖掘的呢。
俗話說的好,詳情頁乃兵家必爭之地,得詳情頁者得天下。首先我們來看看詳情頁的首屏??芍^是百花齊放了,業務、用戶、場景決定了功能與信息架構。電商詳情之所以復雜就是因為它需要承載很多復雜的場景,所以很多時候并不是所有的信息都是有用而你又無法簡化。這顯然不僅僅是普通的電商所呈現出來的商詳,而是擁有「社交背景的商詳頁?!?
那么下面我們分別從功能結構、以及細節來剖析這四款電商產品的商詳。
1. 功能結構
從信息結構上看頁面信息層級還是比較清晰的,也確實很像3,4線城市大賣場的感覺,各種活動優惠的標簽也是很排斥奧卡姆的剃刀了。但是各種活動標簽依然讓人有些眼花繚亂,視覺上頁面缺少一些品牌特征。
其實我之前有做過物流的產品,當時也很糾結好用和好看的平衡點到底在哪里,后來我發現了如果為了要用而要舍棄好看,請不要猶豫,一定要選擇好用。而你一旦絞盡腦汁想辦法折中,對不起,那會變的既不好看又不好用。所以拼多多的視覺、圖片風格我還是很能理解的。
然后首屏的上半部分依然是幫助用戶建立認知的信息介紹區域,同樣也是大圖置頂的方式,但是細心的小伙伴在對比的時候能發現拼多多其實把全場包郵、假一賠十等特色信息放在了第一梯隊的板塊,很明顯,它想告訴大家我們的服務是一流的,不會有假貨,因為全是山寨。
2. 細節
比較特殊的地方是,在左下角有一個更多的按鈕,收納了歷史瀏覽、回到首頁和幫助3個功能,通常「更多」的按鈕會放置在右上角,這里的設計和大部分用戶的認知可能不太一致。還有一個比較有意思的是,價格最右側顯示的是已拼而不是已售,所以從細節能看出來拼多多是有多么強調拼團這個屬性了。
然后我們熟悉的購物車功能沒有,因為拼多多也是限時拼團電商,要拼團先支付,所以沒有購物車的場景。而大家看到的單獨購買這個錨定效應也是運用的很直接了,應該沒有人會用更高的價格還死命的加購物車吧?
錨定效應(Anchoring effect)是指當人們需要對某個事件做定量估測時,會將某些特定數值作為起始值,起始值像錨一樣制約著估測值。在做決策的時候,會不自覺地給予最初獲得的信息過多的重視。
1. 功能結構
云集首先是一家會員制電商,其次才以社交的手段來進行分銷的電商。大部分以微商形式存在的電商都會面臨店主同時可以買或者賣的場景。然而很有趣的是,這樣的 s2b2c的模式,商詳究竟要如何做呢?其實你能發現,優秀的電商產品總有自己的核心關鍵詞,比如拼多多是拼團,云集是批發價。所以當我們要滿足買的場景時告訴用戶自購可以享受批發價,而賣的場景則可以賺利潤。雖然買的場景多,但是為了業務考慮,我們依然要把賣的場景做足。
在商品詳情中,和其他產品不同的是多了這幾個功能:
以上的功能都是刺激以及幫助這些小b去推薦及銷售商品。從而整個商詳頁都是為了形成一種賣的氛圍同時兼顧著買的功能。
其實我們都知道,社交電商(微商)都是有組織有紀律的,只有散戶才會自己挑商品找素材去賣貨,而擁有社群的店主只需要一個商品的二維碼即可。
2. 細節
用過云集的買家都知道,云集和環球捕手一樣是沒有和其他電商一樣的評價功能的,會有人問為什么那么重要的評價功能不放呢,別人如何建立信任呢?其實我們有在收集評論但并沒有公開,而且我們側重的是推薦購買,別人推薦你之后其實評論的意義就不大了。所以既然我們在收集評論那在供應商的選擇上也會一直更新。
另一個原因就是評論這個功能在去中心化的小b店主為中心的產品中并不合適,可以想一想,社交電商和傳統電商不同,傳統電商會有商家入駐,商家和小b店主的區別在于商家除了需要銷售商品時,還需要維持店鋪的信譽和好評率,所以評論對于商家來說特別重要。但是以平臺為背景的店主只需要分享商品賣貨就行,評論的好壞并不是特別重要。
所以說到這里大家就會覺得社交電商真的是一個偽命題,你到底是為了別人好還是純粹想賺錢。所以大家發現在這樣的場景下,評論好那么都OK,如果出現大批量的差評,這個差評給的是商品,并不是某一個小b店主,在這里商品和服務就不像傳統電商那樣捆綁在一起而是區分開了。
1. 功能結構
信息整體強調了價格和限時特賣,弱化了標題和介紹。再早些時候所有 app 都還把標題放在價格的上面,并以大字體風格為驕傲?,F在反而都把價格放在了標題上面,而環捕把價格元素做的更加明顯。
2. 細節
標題和介紹字號變小我認為可以理解,在同樣以推薦消費的背景下,我已經知道是什么商品了,不管是從別人推薦而來還是自己從列表點進來都已經對該物品有詳細的了解,商品標題和介紹并不是特別重要。不過既然如此,介紹放一行也應該足夠了,既要弱化為什么又要放多行。排名和最近銷量筆數的視覺呈現有待改進,一個直角一個圓角不太和諧,最近銷量不可點擊卻做成按鈕的形狀。
1. 功能結構
大家可能對洋蔥跨境電商比較陌生。它同樣也是一個線上的分銷平臺。它的模式和其他兩個稍有區別,用戶如果想賣貨可以選擇兩種方式,一種是成為代理商,代理商可以招募店主,同時可以獲得下面店主銷售利潤的30%。而店主不可以招募店主。而另一種就是直接成為店主,可以獲得銷售額利潤的70%。
說完模式,我們來看看它商詳的信息展示。首先我們會發現在商品大圖上方展示的是相關的8件好貨,那么我們能想到的是:
所以能一次性買足夠的商品自然是比較劃算,所以在這里更明顯的位置放置了相關的商品供買家和賣家挑選。
你會發現洋蔥在詳情中加入了評價功能,但這里的評價并不是所有的用戶的評價都能夠被顯示出來,而是經過官方審核以及店主上傳的評價才能夠被顯示的。
2. 細節
洋蔥將利益點和賣點放在了圖片中沉底,這也能夠讓商品與文案的關聯性更強,缺點是容易被忽略。
產品介紹上方會出現一個頭像,但是新手用戶會很疑惑這個頭像到底是誰?官方還是店主不得而知。而該產品的介紹文案過多也會影響首屏的展示效率。
洋蔥將返回首頁、以及底部標簽導航的功能集合在了一個 fab上,令人不太理解的是懸浮按鈕中和底部均有購物車功能,然而二級頁面也沒有存在這個 fab,所以懸浮按鈕中的購物車功能有點雞肋。
所有的「社交電商」在應用內放置互動聊天的功能都特別雞肋。店主與買家的社交紐帶依然是微信,而平臺對于買家來說只有在逛和買的時候才會使用,即使做了IM也無法在應用中植入社交場景,更不用說讓用戶養成習慣了。所以做社交要有背景。
底部只有加入購物車,沒有立即購買按鈕。一個是希望提高客單價,同時幫助用戶節省物流費。另一個是 b2c電商的產品都由平臺物流統一發貨,他和 c2c 的淘寶不同的是淘寶購物都是根據不同的商家進行物流運輸,所以不同的業務模式形成的功能也是不同的。
廣告營銷的電商模式未必能滿足喜歡個性化需求的用戶,我們購物或許會逐漸的變成你覺得我適合買什么而不是我看看你有什么。徐志斌老師在《社交紅利》中提出社交紅利能夠從人與人之間的關系,互動中產出更多的價值,那么基于電商背景是否可以將電商價值最大化。
而我們今天討論的社交電商商詳,它能夠幫助小b用戶與c端用戶更的鏈接,不同業務模式下的商詳所呈現出來的功能、框架、視覺表現都是有很大區別的,而我們要做的是讓買賣雙方的關系鏈更結實。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn