首頁

版式設(shè)計

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


版式設(shè)計中編排類型繁多,這里介紹常用的10種編排類型。運用好這10種編排類型,快速完成設(shè)計任務(wù)同時,可達到最佳的傳播效果



藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 

按鈕設(shè)計,看這篇文章就夠了!

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

按鈕在UI設(shè)計中是一種常用的UI控件,在界面中作為主要的行動點,引導(dǎo)用戶進行相應(yīng)的操作,它在用戶和產(chǎn)品的交互中承擔著重要的作用。


按鈕設(shè)計看似簡單,但是如果想要更好的交互體驗,引導(dǎo)用戶進行相應(yīng)的操作,提升產(chǎn)品的轉(zhuǎn)化率這仍是我們需要研究的問題。下面小編將從按鈕功能類型和設(shè)計要點兩個方面進行分析。


一、按鈕功能類型


按鈕的功能類型往往決定了一個按鈕的設(shè)計方式,是需要強調(diào)還是需要弱化;文案是需要強引導(dǎo),還是直接闡述功能;按鈕上是放圖標還是不放圖標等。按鈕根據(jù)功能的不同,可以分為不同的類型,主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關(guān)按鈕這六大類型。


1.行為召喚按鈕


行為召喚(CTA)按鈕其目的是誘使用戶采取某些操作, 從而提高產(chǎn)品的轉(zhuǎn)行率。簡單來說就是通過設(shè)計誘導(dǎo)或激勵用戶點擊按鈕,例如立即購買、訂閱關(guān)注、利益誘導(dǎo)、文字誘導(dǎo)等。


1)誘導(dǎo)購買


當行為召喚的目的是誘導(dǎo)購買時,按鈕的設(shè)計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊,讓用戶進來第一眼就能知道該按鈕的用途。如下圖所示:

Image title



以美團外賣為例,該按鈕的顏色采用黑黃對比、形狀采用具有親和力的圓角,在樣式上加入投影同時加入送餐員的元素,配上小紅點,能夠清晰的給用戶傳遞出可點擊部分有去結(jié)算、送餐員。另外加入價格誘導(dǎo),讓你可直觀看到優(yōu)惠了多少錢,促使你進一步操作。


以淘寶詳情為例,該按鈕是一個組合按鈕,由加入購物車和馬上搶以及店鋪、客服、收藏等組成,作為行為召喚按鈕我們可以明確的看到,不管從顏色、形狀、樣式都能夠讓我們快速注意到。


2)訂閱關(guān)注


當行為召喚的目的是訂閱關(guān)注時,其重要程度相比誘導(dǎo)購買低很多,但是在設(shè)計時我們?nèi)匀恍枰紤]一個問題,這個問題可直接決定該按鈕大小、樣式等,這個問題就是需要根據(jù)產(chǎn)品目的判斷是誘導(dǎo)用戶訂閱關(guān)注重要還是讓用戶閱讀內(nèi)容重要。如下圖所示:

Image title



當內(nèi)容重要時,按鈕的設(shè)計需要弱化處理,以優(yōu)酷視頻的發(fā)現(xiàn)頁和星球頁為例,這兩個頁面很明顯是以內(nèi)容為主的界面,在設(shè)計時直接弱化了按鈕形式,讓按鈕和整個界面相融合,但是按鈕設(shè)計的原則是讓其看上去像按鈕,因此當按鈕只是文字時可以加圖標進行引導(dǎo)比如優(yōu)酷視頻發(fā)現(xiàn)頁,也可以加入弱底紋進行引導(dǎo)還能讓界面看上去整潔,比如優(yōu)酷視頻星球頁面。

Image title


當訂閱關(guān)注重要時,按鈕的設(shè)計需要強化處理,以橘子娛樂和土豆視頻為例,橘子娛樂采用粗描邊漸變按鈕,同時加入圖標進行引導(dǎo),具有較強的視覺引導(dǎo)作用,很容易喚起用戶的關(guān)注。土豆視頻采用黃色填充加圖標引導(dǎo),在視覺上和產(chǎn)品內(nèi)容形成強烈對比,明顯的以關(guān)注為主的界面。


3)利益誘導(dǎo)


當行為召喚的目的是利益誘導(dǎo)時,該按鈕設(shè)計根據(jù)重要程度較高,因此在設(shè)計時可以考慮顏色、形狀、加入圖標、誘導(dǎo)文字等設(shè)計方法。如下圖所示:

Image title



以大眾點評為例,其領(lǐng)獎按鈕明顯比賺積分的層級高,因此為了突出領(lǐng)獎按鈕采用了色塊設(shè)計的樣式,同時賺積分按鈕采用描邊設(shè)計進行弱化處理。


以騰訊doki為例,其打榜頁面沖榜的重要層級較高,因此在設(shè)計時不僅采用了色塊、加入動效圖標、同時還加入了誘導(dǎo)文字,讓按鈕更明顯同時誘導(dǎo)用戶點擊,其他去瀏覽按鈕則采用描邊樣式弱化處理。


4)文字誘導(dǎo)


文字誘導(dǎo)簡單來說就是通過文字,誘導(dǎo)用戶進行下一步操作,多用于空頁面、活動頁面中,因此在設(shè)計時采用簡單的色塊填充即可,如果該頁面為活動頁面也可增加漸變或投影樣式,讓按鈕更有空間感,進而突出按鈕。如下圖所示:

Image title



以得到為例,當你還沒有學習計劃時,它會對你進行提示“開始制定學習計劃”,同時其按鈕采用重要程度較高的色塊+投影的方式,誘導(dǎo)用戶點擊。


以大眾點評為例,當你還沒有攻略時,它會對你進行提示“我也要創(chuàng)建攻略”,同時其按鈕采用漸變填充的方式,誘導(dǎo)用戶點擊。


2.懸浮按鈕


懸按鈕浮是 Android 應(yīng)用中最常見的一個控件。不過隨著Android和iOS規(guī)范的不斷融合,在iOS中也經(jīng)常會看到各種各樣的懸浮按鈕。在設(shè)計上懸浮按鈕應(yīng)該采用顯眼的顏色,以抓住用戶的注意力。同時它應(yīng)該是積極正向的交互,比如創(chuàng)建、分享、探索等,同時并不是所有頁面都需要加懸浮按鈕。如下圖所示:

Image title


以UC瀏覽器為例,懸浮按鈕在訂閱頁面的右下角出現(xiàn),將按鈕和界面結(jié)合很容易看出創(chuàng)建內(nèi)容的意思,同時點擊按鈕還可呼出圖文、視頻等操作圖標。


3.標簽按鈕


標簽按鈕往往呈多個出現(xiàn),多使用在二級導(dǎo)航或條件篩選下面;以及表單頁面作為切換條件選中。因此在設(shè)計樣式上有選中狀態(tài)和默認狀態(tài),同時其重要程度較低,在設(shè)計時不能喧賓奪主,需要弱化處理。如下圖所示:

Image title

以支付寶為例,它主要用在投保的表單頁面,其主要目的就是一個切換條件,重要程度遠不及我要投保按鈕,因此在設(shè)計時默認用的描邊處理;選中采用淡淡的色塊。


以轉(zhuǎn)轉(zhuǎn)為例,它主要用在導(dǎo)航下方,其主要目的也是切換條件,用戶主要操作是看下方篩選出的內(nèi)容,因此在設(shè)計時也進行弱化處理。


4.表格按鈕


表格按鈕也就是由一個白色網(wǎng)格加文字組成的按鈕,從視覺上看和頁面融為一體,特別不突出。因此多用在個人中心中不太重要信息或者不想讓用戶操作的退出登錄界面中。如下圖所示:

Image title

以愛奇藝為例,在我的界面中,關(guān)于我們和退出登錄都是用的表格按鈕,由于關(guān)于我們是不太重要信息,退出登錄又是不想讓用戶操作的內(nèi)容,因此采用表格按鈕最為合適。


5.命令按鈕


命令按鈕也就是該按鈕具有明確的指令,多出現(xiàn)在彈框中,通常會有一個文字或2個文字出現(xiàn)的情況。其要求是文字語義要明確,盡量不要用確定、好的、要等詞匯,同時根據(jù)用戶右手操作習慣居多,因此將重要的按鈕放在右側(cè)。如下圖所示:

Image title



以京東金融為例,左圖是京東金融退出的二次確認頁面,右圖是我調(diào)整文字之后的頁面。我們說到文字需要表意明確,因此將確定換成退出后表意更加直白,降低用戶理解度。


6.開關(guān)按鈕


開關(guān)按鈕也是我們很常見的一個組件。表示兩種相互對立的狀態(tài)間的切換,多用于表示功能的開啟和關(guān)閉。當按鈕開啟后可能還會帶來其他的相應(yīng)操作。開關(guān)按鈕最常見的就是手機設(shè)置中,但是也有很多APP將其用到界面中使用。如下圖所示:

Image title



以美團外賣和小豬短租為例,它們在提交訂單頁面時都采用了開關(guān)按鈕,同時在小豬短租中,當按鈕打開底部會將“您可再入住完成10天內(nèi)補全信息”進行展開顯示,提示用戶去填寫。這種點擊展開的操作還可增加更多的功能相關(guān)內(nèi)容。



二、按鈕設(shè)計要點


1.根據(jù)產(chǎn)品為按鈕選擇適合的形狀


在按鈕設(shè)計時,需要根據(jù)整個界面風格設(shè)計合適的按鈕,按鈕樣式主要有直角、小圓角、全圓角三種樣式。

Image title

直角的含義:嚴謹、力量、高端。適用于金融類、奢品類產(chǎn)品中,讓產(chǎn)品給人嚴謹安全、高端的感覺。例如寺庫。


半圓角的含義:活潑、年輕、安全。適用于兒童類、年輕化、娛樂類、購物類的產(chǎn)品中,提升親和力,拉近用戶的距離。例如土豆。


小圓角的含義:穩(wěn)定、中性。適用于用戶跨度較大的常規(guī)類產(chǎn)品中,例如微信。


Image title

以寺庫、微信、土豆為例,寺庫是品類電商,因此在設(shè)計時需要提現(xiàn)高端,因此在按鈕設(shè)計時采用直角設(shè)計。而微信的用戶群體上到七八十歲,下到幾歲其年齡范圍廣,因此采用穩(wěn)重的小圓角較為穩(wěn)妥。土豆短視頻其用戶群體較為年輕活潑,因此采用全圓角較為適合。


2.使用合適的狀態(tài)


在部分界面設(shè)計中需要考慮按鈕的不同狀態(tài)的設(shè)計,從而提高用戶操作流暢度。移動端完整的系統(tǒng)按鈕可以分為正常狀態(tài)、按壓狀態(tài)、禁用狀態(tài)。

Image title

其中,正常狀態(tài)和加載狀態(tài)展示的是APP的主色;按壓狀態(tài)在正常態(tài)的基礎(chǔ)上疊加不透明度15%的黑色#000;禁用狀態(tài)是設(shè)置灰色或者將正常態(tài)設(shè)置不透明度45%,該狀態(tài)適用于提交界面中使用,比如登陸注冊、轉(zhuǎn)賬等。如下圖所示:

Image title

以京東金融為例,當未輸入轉(zhuǎn)賬金額時,按鈕禁用為灰色,當輸入金額時按鈕為正常狀態(tài)。不過隨著互聯(lián)網(wǎng)的發(fā)展,寬帶速度不斷的提高,按壓狀態(tài)慢慢被拋棄,他存在的意義不像以前網(wǎng)絡(luò)不發(fā)達的時候,點擊還需要時間反應(yīng)。


3.提供恰當?shù)姆答?/span>


當用戶點擊按鈕時,他們希望界面可以給些恰當?shù)姆答?。如果沒有任何反饋,用戶會以為系統(tǒng)沒有收到他們的操作,然后就會重復(fù)點擊。這種行為常常導(dǎo)致多個不必要的操作。如下圖所示:

Image title



以土豆短視頻為例,當點擊關(guān)注時為了避免用戶點擊沒有反應(yīng)的情況,可在按鈕上添加加載狀態(tài),當關(guān)注成功后圖標狀態(tài)改為禁用狀態(tài),同時文字變?yōu)橐殃P(guān)注。



總結(jié)


按鈕設(shè)計看似簡單,但是如果想要更好的交互體驗,引導(dǎo)用戶進行相應(yīng)的操作,提升產(chǎn)品的轉(zhuǎn)化率這仍是我們需要研究的問題。本篇主要將從按鈕功能類型和設(shè)計要點兩個方面進行歸納總結(jié)。


按鈕功能類型:主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關(guān)按鈕這六大類型。在使用我們需要根據(jù)對應(yīng)的功能和重要程度選擇適合的設(shè)計。


按鈕設(shè)計要點:主要有根據(jù)產(chǎn)品為按鈕選擇適合的形狀;使用適合的狀態(tài);提供恰當?shù)姆答佭@三大注意要點。

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

 

掌握這5個關(guān)鍵點,零基礎(chǔ)也能建立信息架構(gòu)

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

什么是信息架構(gòu)?怎么理解用戶體驗五要素?本文用大量的案例和插圖幫你輕松掌握這個基礎(chǔ)知識。

今天想要跟大家聊一聊關(guān)于 UX 和 IA 的話題。其實在寫今天這次分享的題目的時候我修改了很多次,為什么會修改很多次?這要從我在 medium 看的一篇文章說起,這篇文章的標題是《6 Tips How to Apply Information Architecture in UX Design》,翻譯過來的意思是在用戶體驗設(shè)計中如何建立信息架構(gòu)的6點建議。

當時讀完文章,雖然覺得文章里講的一些散碎的概念迷迷糊糊可以理解,但這些概念就像蓋房子的磚塊一樣,我完全不知道這些磚塊該怎樣才能蓋成一棟大樓,或者我就站在樓下而因為自己視野有限完全不知道這棟大樓到底長什么樣子,所以因為這個原因我一直苦惱于該如何去清晰的表達想要分享的內(nèi)容,思來想去決定這次分享不能僅僅是我對某篇文章的翻譯,想要弄清楚這篇文章到底在講什么,先要弄明白文章里的知識,當我們了解清楚了這些信息之后再來理解這篇文章就會輕松容易得多,下面就將我總結(jié)出來的內(nèi)容分享給大家。

一、UX & IA

UX 即 user experience,譯為用戶體驗。

IA 即 information architecture,譯為信息架構(gòu)。

他們的關(guān)系可以簡單理解為良好的信息架構(gòu)是用戶體驗的基礎(chǔ)。

我們平時聽到了太多關(guān)于用戶體驗的東西,大家都以為用戶體驗就跟交互設(shè)計差不多。我之前確實也是這么理解的,但是最近發(fā)現(xiàn)我的這個想法是有些過于片面了。

我們可以把用戶體驗的工作分解成五個組成要素,分別為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。

它們都是自下而上起作用的,每一個層面都是根據(jù)它下面的那個層面來決定的,所以表現(xiàn)層由框架層來決定,框架層則建立在結(jié)構(gòu)層的基礎(chǔ)上,結(jié)構(gòu)層的設(shè)計基于范圍層,范圍層是根據(jù)戰(zhàn)略層來制定的。每一個層面的決定都會影響到它之上層面的可用選項,信息架構(gòu)只是用戶體驗結(jié)構(gòu)層的一部分而已。

二、什么是IA

IA 即 information architecture,解釋出來就是合理的組織信息的展現(xiàn)形式。

主要任務(wù)是為信息與用戶認知之間搭建一座暢通的橋梁,是信息直觀表達的載體,通俗點說就是信息架構(gòu)不僅僅是設(shè)計信息的組織結(jié)構(gòu),還需要研究信息的表達和傳遞。

這么說也許還有些抽象,舉個簡單易懂的例子:

我們來看這個商場的平面解析圖,通過這個圖我們可以很清楚的了解商場的結(jié)構(gòu),從而快速定位自己的位置還能順利找到自己想要購買的產(chǎn)品。信息架構(gòu)對于一款產(chǎn)品來說就相當于商場的平面解析圖,就像現(xiàn)在我們看到的這幅圖一樣,商場的每一層都有相對應(yīng)的分類區(qū)塊來指導(dǎo)消費者。試想如果一個商場沒有對商品進行有序的分類,那么我們在逛商場的時候就很難順利挑選出自己所需要的商品,面對各種無序且數(shù)量繁多的商品我們一定會崩潰,這樣的情況對于男士來說絕對是場災(zāi)難,但對于女性來說也許會是一個充滿未知探索的挑選過程吧。

但不管怎么說在這里設(shè)計師需要做的就是規(guī)劃好這些樓層信息層級,主要做的工作就是:分類、層級梳理等。簡單的說就是規(guī)劃好每一層有什么商品,同一層商品怎么分布等等信息。

所以在互聯(lián)網(wǎng)產(chǎn)品設(shè)計中:設(shè)計師梳理信息架構(gòu),其實和剛才說的梳理商場樓層架構(gòu)的概念是差不多的。

三、IA的作用

一個好的信息架構(gòu)一定是會滿足兩個維度的需求,即用戶需求和產(chǎn)品目標。

從用戶的角度出發(fā)它可以讓用戶在一定的信息規(guī)劃下更容易找到自己想要的「東西」。

從產(chǎn)品目標角度來看它能通過「信息架構(gòu)設(shè)計」去教育、說服、通知用戶。

所以用最簡單的兩個字來說其實信息架構(gòu)就是在做分類。

再回到剛才那個例子想一想,把商場里的商品分類其實對于我們產(chǎn)品而言就是在給我們產(chǎn)品中的信息分類,以方便用戶能更好的使用我們的產(chǎn)品,而不會想要把產(chǎn)品卸載,從而使產(chǎn)品達到易用好用想用的目的。就跟我們逛商場一樣,當我們能夠根據(jù)指示順利買到自己所需的商品的時候我們就不會因為找不到我們想買的商品而失望的離開商場。

那么問題來了,我們該如何進行信息架構(gòu)分類呢?也就是信息架構(gòu)的分類方法是什么呢?

四、IA分類方法

這里給大家介紹2種方法,從「產(chǎn)品目標」出發(fā)我們可以采用「從上到下」的分類方法;從「內(nèi)容和功能需求分析」出發(fā)就可以用「從下到上」的方法進行分類。下面來跟大家分享一下這兩種方法的具體做法。

剛才說了從上到下是以產(chǎn)品目標即戰(zhàn)略層出發(fā)的分類方法,所以最開始就是先從最廣泛的、可能滿足決策目標的內(nèi)容與功能開始進行分類,然后再按邏輯細分出次級分類,這樣的「主要分類」和「次級分類」就構(gòu)成了「一個個空槽」,將想要的內(nèi)容和功能按順序一一填入即可。

我們以微信為例:首先根據(jù)產(chǎn)品目標將「主要分類」即一級架構(gòu)分為「最近會話(微信)」、「通訊錄」、「發(fā)現(xiàn)」和「我」;然后再進行「次級分類」分類,比如「發(fā)現(xiàn)」下再分「朋友圈」、「掃一掃」、「搖一搖」等等;最后將相應(yīng)的功能(如朋友圈feeds、發(fā)朋友圈、朋友圈消息等)填入到相應(yīng)的「朋友圈」分類中。

這樣就像是先有了大概的框架我們再根據(jù)這些框架往上面加東西的感覺是一樣的。

接下來我們再來說一說從下到上的方法:

剛才說了從下到上是由范圍層驅(qū)動從產(chǎn)品的功能和內(nèi)容層面出發(fā)的,所以我們就要先把已有的所有內(nèi)容,放在層級分類中,然后再將他們分別歸屬到較高一級的類別。這種分類方法其實就是在做「歸類」。

其實從下到上的信息架構(gòu)方法也包括了主要分類和次級分類,但它是根據(jù)對內(nèi)容和功能需求的分析而來的。先從已有的資料開始,我們把這些資料統(tǒng)統(tǒng)放到級別的分類中,然后再將它們分別歸屬到較高一級的類別,從而逐漸構(gòu)建出能反應(yīng)我們的產(chǎn)品目標和用戶需求的結(jié)構(gòu)。

具體工作中我們可以將所有的功能點用一張張卡片寫下來,然后讓目標用戶參與到信息分類中,并反饋相關(guān)分類標準作為我們產(chǎn)品設(shè)計師去梳理信息架構(gòu)的參考。實踐過程中,更需要設(shè)計師或者產(chǎn)品經(jīng)理本身有一定的信息篩選、梳理、分類的能力,進一步通過用戶測試去檢驗分類的信息傳達有效性。

其實就好像我們?nèi)粘I钪惺占{衣服,我們會根據(jù)不同標準去收納,比如我們可以根據(jù)季節(jié)分類,也可以根據(jù)顏色分類,或者是根據(jù)款式分類,每個人都會有不同的分類習慣,所以這里歸結(jié)到工作中才會讓目標用戶參與到信息分類中,畢竟我們的產(chǎn)品是服務(wù)于用戶,所以還原用戶使用習慣和使用心理也是我們同樣要注意到的,這樣可以給我們提供一些有效的分類信息幫助我們更好的做出清楚的信息架構(gòu)。

當然這兩種方法都有一定的局限,從上到下的架構(gòu)方法有時可能導(dǎo)致內(nèi)容的重要細節(jié)被忽略,而從下到上的方法則可能導(dǎo)致架構(gòu)過于的反應(yīng)了現(xiàn)有的內(nèi)容,因此不能靈活地容納未來內(nèi)容的變動或增加,所以在實際運用中是需要我們將這兩種方式結(jié)合起來靈活運用。

這兩種方法雖然有不同的視角但其實最終目的都是讓我們的產(chǎn)品易用好用最終達到想用的目的,所以讓這兩種方法對接、交匯、融合之后得出的結(jié)果才應(yīng)該是我們理想中的產(chǎn)品信息架構(gòu)。

五、影響IA的因素

剛才提到用戶體驗的5個層級是自下而上對其上面一層起作用的,信息架構(gòu)位于用戶體驗要素第3層結(jié)構(gòu)層,剛才說了結(jié)構(gòu)層的設(shè)計基于范圍層之上,所以這里遇到的影響因素我們還要返回到范圍層面去尋找,范圍層又包含兩個維度,功能和內(nèi)容,在從范圍層到結(jié)構(gòu)層這個過程中我們會遇到很多影響因素,所以把這些影響因素總結(jié)起來我們還是要從用戶層面(內(nèi)容)和產(chǎn)品層面(功能)兩個維度來理解。

從用戶的角度出發(fā),理解能力、操作習慣、目標內(nèi)容使用頻率等等這些都會成為影響因素。

從產(chǎn)品角度來看,產(chǎn)品的核心價值、主線功能、特色功能等才是影響信息梳理的因素。

這兩個層面當然也不是完全割裂的,在做信息架構(gòu)的時候可以先從一個層面出發(fā)得出一個結(jié)論之后再用另外一個層面去驗證得到的答案,然后再不斷優(yōu)化在驗證過程中遇到的問題。

不同人會有不同的分類結(jié)果,因為根據(jù)不同情況我們所需要關(guān)注的側(cè)重點會有不同,我們根據(jù)不同的影響因素會得出不同的答案。每個人都會得出不一樣的分類結(jié)果,沒有哪個結(jié)果是完全正確或者說是完全相同的,就像數(shù)學中的排列組合一樣,內(nèi)容越多我們得到的結(jié)果就會越豐富,但是這些結(jié)果當然不是全都合理的,所以就需要設(shè)計師根據(jù)自己的經(jīng)驗結(jié)合產(chǎn)品層和用戶層的需求找到合理的解決方案。我們都知道在產(chǎn)品設(shè)計中想要設(shè)計出來一款完美不需要迭代優(yōu)化的產(chǎn)品幾乎是不可能的,所以我們能做的只能是結(jié)合各方面的影響因素和自己的經(jīng)驗理解一直優(yōu)化產(chǎn)品讓它接近于完美的狀態(tài)。

現(xiàn)在我們來思考一個問題:為什么微信朋友圈這么高密度使用的功能要放到二級菜單呢?

微信的創(chuàng)始人張小龍是這樣解釋的:

  • 微信是個社交軟件,核心功能是社交,是溝通,是好友,所以一級菜單只能跟這個相關(guān)。(產(chǎn)品功能層面)
  • 當朋友圈為二級tab 時,掃一掃,搖一搖,附近的人,漂流瓶,購物這些功能的曝光度就會下降,不利于微信功能的拓展。(產(chǎn)品功能層面)
  • 也許會造成各個模塊分配不平衡,而且發(fā)現(xiàn)里的功能與其他模塊的功能屬性混在一起也許會不恰當,微信為了不讓用戶被過多的信息打擾把公共號打包放在一起,那么朋友圈隨著聯(lián)系人增多,分享動態(tài)也會增加,而且內(nèi)容都是一些生活中的瑣事,多少也會像公共號一樣打擾到用戶。(用戶角度)
  • 設(shè)計并不是對用戶有求必應(yīng),而是應(yīng)該在產(chǎn)品發(fā)展戰(zhàn)略的指導(dǎo)下平衡各功能。如果將朋友圈提升為一級入口,很明顯微信的社交分享功能將得到強化,那么相應(yīng)的其他功能將會被弱化,這與微信鏈接一切的發(fā)展戰(zhàn)略是相違背的。(產(chǎn)品層面)

保持主干清晰,枝干適度。產(chǎn)品的主要功能架構(gòu)是產(chǎn)品的骨骼,它應(yīng)該盡量保持簡單、明了,不可以輕易變更,讓用戶無所適從。次要功能豐富主干,不可以喧賓奪主,盡量隱藏起來,而不要放在一級頁面。

舉這個簡單的小例子供大家了解信息架構(gòu)這個概念,體會一下如何用一個更全面更發(fā)展的眼光去看待產(chǎn)品結(jié)構(gòu)這個抽象的問題。

總結(jié)

要在 UX 中建立良好的 IA 我們需要特別注意的5個關(guān)鍵點:

  • 在建立信息架構(gòu)之前確定產(chǎn)品目標(戰(zhàn)略層)
  • 進行用戶研究預(yù)測用戶對產(chǎn)品可能產(chǎn)生的反應(yīng)(范圍層)
  • 合理運用認知心理學原理預(yù)測用戶對產(chǎn)品可能產(chǎn)生的反應(yīng)(結(jié)構(gòu)層)
  • 根據(jù)產(chǎn)品信息結(jié)構(gòu)去規(guī)劃導(dǎo)航(框架層)
  • 注意視覺層次在內(nèi)容的視覺表現(xiàn)中的重要作用(表現(xiàn)層)

所以我們繞了一大圈來看,在 UX 中建立良好的 IA 的5個關(guān)鍵點其實最后還是回歸到了用戶體驗的5個要素。再回到剛開始分享提到的那句話,從上到下表現(xiàn)層是由框架層來決定,框架層建立在結(jié)構(gòu)層基礎(chǔ)之上,結(jié)構(gòu)層基于范圍層,范圍層根據(jù)戰(zhàn)略層制定。這里每一個層面都是根據(jù)它下面的那個層面來決定的,相當于把用戶體驗要素每一層需要做的事情從另一個維度又解釋了一遍。

當然這里要注意一點,這些層級都不是完全割裂的,如果你要求每個層面的工作在下一個層面可以開始之前完成,那樣一定會導(dǎo)致你和你的用戶都不滿意的結(jié)果,而相反的,應(yīng)該規(guī)劃好你的項目,讓任何一個層面中的工作都不能在其下層面的工作完成之前結(jié)束。這里最重要的一條是,在我們知道基本形狀之前,不能為房屋加上房頂。 不管我們是在這5個層級的哪一層,我們不能忘記的就是要把這些連成一個整體去理解,他們一定是相輔相成互相影響的。

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計  cs界面設(shè)計  ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

跟蘇格蘭設(shè)計師學習如何設(shè)計.

用心設(shè)計

 

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

蘇格蘭有了第一座設(shè)計博物館,你永遠不知道建筑和室內(nèi)設(shè)計的邊與限在哪里,它只有用不完的靈感之泉,和看不盡的精彩設(shè)計。建筑位于蘇格蘭東北海岸線上的懸崖,地理位置不平凡,它如何能平凡呢?


博物館外的材質(zhì)是預(yù)制混凝土,它沿著起伏的混凝土墻延伸,像千萬年前的高山被慢慢風化,形成一種自然形狀,曾踏上高山環(huán)云游九天,曾在無數(shù)飄渺的歲月里看世間。當太陽經(jīng)過的時候,奇妙的光影效果產(chǎn)生,它是建筑與自然的聯(lián)系。再看看室內(nèi)的設(shè)計,大廳和樓梯的地板使用愛爾蘭藍石灰?guī)r,數(shù)百萬年前的海洋動植物化石藏在其中,寓意室外那片水。白色混凝土則是像瀕臨滅絕的淡水珍珠蚌致敬,混凝土里有不少貝殼,二樓和畫廊內(nèi)的地板材質(zhì)選用產(chǎn)自歐洲的橡木,餐廳和野餐屋的地板和墻面材質(zhì)是用的竹子,自然的聲音在這里每天奏響。


藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 

 

教你用「認知超載」提升用戶體驗!

資深UI設(shè)計者

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

創(chuàng)意桌報收集

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


好看的鎖骨千篇一律,

有趣的肚腩duang來duang去。

 

11月22日,

那一天,是西方的感恩節(jié),

那一天,也是中國的小雪。

歪果仁感恩上帝的厚德與恩賜,

我只想感謝我身上的秋膘…

它,比秋褲更便利;

它,比暖寶更親膩;

它,比集體供暖更懂你;

它,比炭盆燒炕來的更容易。

 

感謝久坐,感謝外賣,感謝秋膘,

讓盡情放浪在暖冬的我,肥而不膩。



創(chuàng)意周報 – 2018年11月第3周


一周熱銷圖片TOP5


NO.5 圖片ID:678491803(點擊查看圖片)



感恩節(jié)將近。

這張垂直視角的感恩節(jié)餐桌照片中,

果蔬與肉類食物顏色搭配鮮艷,

木質(zhì)桌面紋路不搶眼。

很適合作為網(wǎng)頁大圖、banner、

移動端開屏背景和海報背景等用途使用。



NO.4 圖片ID:735764617(點擊查看圖片)



在國內(nèi)絕大多數(shù)人更熟識雙十一,

但“黑色星期五”才是世界范圍內(nèi)的購物狂歡節(jié)。

在國內(nèi)的權(quán)重雖然不及雙十一,

但是黑五的影響力依舊不可小覷。



NO.3 圖片ID:1076345054(點擊查看圖片)



這張智能場景矢量圖在8月時曾經(jīng)上榜一次。

可愛、生動的形象和冷靜、嚴謹?shù)睦渖{(diào)是讓這張圖片

從眾多固有風格的科技主題畫面中脫穎而出的重要原因。



NO.2 圖片ID:1071512777(點擊查看圖片)



這張3D霓虹場景利用簡單的幾何結(jié)構(gòu)搭建亮部背景,

前景空間的留白倒影也為畫面增加了立體感和質(zhì)感。

是一張通用型很強的背景圖。



NO.1 圖片ID:1092261245(點擊查看圖片)



經(jīng)典的紅、金配色,剪紙風格設(shè)計。

中國傳統(tǒng)的窗框輪廓,左右對稱的排版。

可見該作者對于傳統(tǒng)題材的理解和用心。




一周熱銷題材TOP5



NO.5 健身(點擊查看該題材)



進入秋冬之后,健身題材屢次上榜。

除了有氧運動的內(nèi)容以外,力量訓練內(nèi)容增加明顯。

不論男女對身體線條的追求越來越以歐美為目標。



NO.4 城市(點擊查看該題材)



從后臺數(shù)據(jù)來看城市題材攝影畫面在上周的熱銷,

主要是互聯(lián)網(wǎng)公司的采購為主。

在互聯(lián)網(wǎng)企業(yè)不斷發(fā)展的過程中,

以城市為核心、為載體的成長方式需要更多的城市影像

來傳遞各類品牌理念、產(chǎn)品訴求等信息。



NO.3 圣誕(點擊查看該題材)



圣誕題材毫無懸念入榜,

小編目測未來幾周內(nèi)圣誕題材會一直榜上有名。

圣誕裝飾主題的照片在上周比較搶眼。



NO.2 科技(點擊查看該題材)



本次熱銷的科技題材中,以太空科技畫面為主。

太空技術(shù)不但是各國國力競爭的重點項目,

也承載了人類不斷探索和追求超越的夢想。



NO.1 金融(點擊查看該題材)



雙十一之后,人們結(jié)束了購物狂歡。

把視線集中在了各種銷售行為背后的商業(yè)邏輯上。

中產(chǎn)階級也更關(guān)心各種商業(yè)頂層的內(nèi)容。

金融題材內(nèi)容作為嚴肅話題一直處在討論熱點。




藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 

避開"灰"畫面至少提高幾個層次

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


大家平時在畫素描的時候經(jīng)常會遇到顏色深不下去、顏色對比不強烈等問題。畫面的顏色總是顯得很灰,體現(xiàn)不出立體的效果。不管多使勁顏色就是重不下去,有時把紙都涂破了,依然沒有效果。這到底是為什么了?究竟如何才能把顏色重下去了?接下來我們就一探究竟吧~

 

什么樣的畫面是偏灰、偏臟的畫面呢?

畫面中這種暗部不暗,亮部不亮,顏色處于一個區(qū)別不大的狀態(tài),畫面就會顯得灰;而亮面上色的時候筆觸太粗,灰面顏色磨得太多,整個亮部區(qū)域顏色就會顯得很臟。


這些問題之所以出現(xiàn),是因為大家沒有將畫面的“黑、白、灰”表達清楚。

要在白紙上畫出立體的圖形,需要我們加強明暗之間的顏色對比;通過強烈的光影營造立體的視覺效果。而快速表現(xiàn)出大的黑白灰關(guān)系是我們塑造的關(guān)鍵:


首先,我們找到所畫物體自身顏色最深的地方。用軟一點的鉛筆(8B、12B)排上調(diào)子,依次過渡灰面,留出并輕輕刻畫亮部,加上投影和背景。讓畫面先有一個基本的黑白灰,確定出最黑的地方,灰面的位置以及高光的分布。

然后,在這個基礎(chǔ)上我們找到物體的明暗交接線。


先從明暗交界線開始加深顏色并往暗部邊緣逐漸的過渡,運筆排線的力度越來越輕,讓暗部形成一個有深淺顏色變化的面??拷靼到唤缇€的地方顏色就重一點,靠近投影的地方顏色就淺一點,然后通過壓深投影的顏色,襯托暗部的反光,讓這個暗部顏色更加透氣。


再回到明暗交界線,往亮部方向用4B、2B將顏色逐漸過渡,畫出灰面來,但物體的灰面不宜畫得過多,一多畫面就膩了;灰面塑造的標準就是顏色一定要比暗部淺,灰面顏色如果加深那暗部的顏色也要同時加深,始終要保持這兩個面的顏色區(qū)別。

接下來,就是對比一下整個暗部區(qū)域和背景顏色的深淺程度。如果暗部的顏色比背景深就將暗部邊緣的顏色壓重一點點,如果背景的顏色更深,那么就像畫投影一樣,沿著物體的暗部邊緣疊色,加深背景的顏色;不管哪一種情況都要將暗部和背景的顏色區(qū)分開。


最后,我們有稍微硬一點的鉛筆(如2H、HB)排線將亮部表現(xiàn)一下,主要是將高光收攏,除了不銹鋼和玻璃其他物體都是越靠近高光用的鉛筆越硬(HB、2H、4H),亮部刻畫時排線一定要細膩,可以刻意排幾組特別精準的線條加強物體的質(zhì)感,這樣高光和亮部會顯得更白,從而就會襯得暗部的顏色更黑更深。

完成的物體黑白灰的塑造之后,最后看一看整個物體各邊線與背景顏色的深淺對比,還是通過加強區(qū)部的顏色對比,完善畫面整體的明暗對比。

總而言之,暗部的黑并不是獨立存在,是因為周邊的顏色都比它淺,于是乎,它就深了下去,如果與周圍的顏色區(qū)分不開,那即使將紙張揉破顏色依舊難深下去。所以,暗部疊色就是一邊畫一邊比較,不停的調(diào)整,才能始終確保暗部能重下去。








藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 

1868-1988年,復(fù)古設(shè)計的黃金年代是什么樣的?

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

文化時光機 1868-1988,以復(fù)古文化為概念,與大家分享一些系列的老式設(shè)計、品牌

編輯丨姚澤斌

校對丨BranD編輯部



不知道從什么時候開始,有了“復(fù)古風”這一說法,到處可以發(fā)現(xiàn)復(fù)古的衣服、家具、產(chǎn)品、建筑,很多舊的風格已經(jīng)重新流行起來了。


BranD No.40期:文化時光機 1868-1988,以復(fù)古文化為概念,與大家分享一些系列的老式設(shè)計、品牌,為此我們提了三個問題來講述這一期:




為什么要選用相機作為封面?


選用了一款復(fù)古相機作為BranD No.40期的封面,主要是因為我們覺得相機是極具代表性的一款能夠記錄時光的媒介,這一期的主題:文化時光機 1868-1988,因為一款復(fù)古相機本身具備著悠長的歷史之余,它還承載著歷史的變遷、人文的變化以及文明的發(fā)展。



為了繼續(xù)從封面上擴散復(fù)古理念,利用照相機來提高整個封面的互動性和趣味性,設(shè)計師以“拍立得”為設(shè)計靈感,在已經(jīng)設(shè)計好的封面基礎(chǔ)上,做出了一些大膽的嘗試。


最終成型的BranD No.40期的封面是這樣的,遠看只是一款復(fù)古的拍立得相機,但是當你接觸到封面時,你會發(fā)現(xiàn)在相機底部是可以隨意抽取出一張老照片來。


ps:每一本只贈送一張復(fù)古老相片。




這一期用什么內(nèi)容記錄舊時光?


或許是因為流行本身就是一個循環(huán)的過程,一些復(fù)古的潮流,很容易在沉寂了多年以后,又會開始流行起來,又或許人們本身就是很迷戀過去的美好。


有時候真的會捫心自問,為了迎合市場而進行的“偽”復(fù)古是否值得我們?nèi)ネ瞥纾@個問題我們先不必去討論。



與其強行模仿復(fù)古的設(shè)計風格,不如跟隨本期BranD新刊:文化時光機 1868-1988,去認識一下那些記錄舊時光的美好物品。來看一下那時候的設(shè)計,到底值不值得讓我們?nèi)グ阉俅瘟餍衅饋?。本期一共分為六大專題來記錄那份美好的舊時光,那些經(jīng)典的設(shè)計、古老的品牌,讓您停留在每一個瞬間:



奇跡 ? 漫威


“復(fù)仇者聯(lián)盟”這個英雄系列第一次出現(xiàn)是在1963年的漫威漫畫《復(fù)仇者聯(lián)盟》當中,于1961年正式定名為Marvel。


這一部分將記錄著那些描繪英雄的藝術(shù)家,他們用色彩和線條構(gòu)建了故事的靈魂。試著翻開來自數(shù)十年前的漫畫,感受角色最原始的模樣、最自然的色彩,這或許也是現(xiàn)代人除了看電影以外最美妙的生活方式之一。




永不褪色的復(fù)古美


可以毫不夸張地說,復(fù)古是種永不過時的格調(diào),每一個年代的人們都有追溯往昔的情懷,復(fù)古設(shè)計也因為能勾起人們的這種情懷而受到青睞。因此,現(xiàn)代設(shè)計師喜歡在設(shè)計中融入復(fù)古的元素。


插畫、紙牌、海報、票據(jù)、傳單、菜單、食品或產(chǎn)品包裝、玩具、室內(nèi)外設(shè)計,各種媒介都可以成為復(fù)古元素的載體,延續(xù)甚至更生復(fù)古風格永不褪色的魅力。




重塑品牌傳統(tǒng)


臺灣本土有很多知名傳統(tǒng)品牌,這些人們耳熟能詳?shù)钠放瞥休d了傳統(tǒng)的物產(chǎn)與豐富的文化記憶。美可特品牌企劃設(shè)計(美可特)為不少傳統(tǒng)品牌重塑了適應(yīng)社會發(fā)展的品牌形象。


在書中美可特與讀者分享的包裝設(shè)計案例以不落俗套的現(xiàn)代設(shè)計手法,彰顯出臺灣在地新、舊品牌的文化內(nèi)涵,燃起了人們對臺灣設(shè)計的期待與信心。



永恒的文化


這里涉及到了一個菜譜文化,將會給大家展示一些歷史悠久,珍貴又罕見的菜譜,早期的菜譜專供廚師使用,專業(yè)性較強,但隨著人們對飲食的要求越來越高,而其中一些實用與美觀兼具的書籍排版更是吸引了設(shè)計師和菜譜收藏家的注意。




邂逅舊時光


文具,作為舊時光的代表物品之一。幾乎是從識字開始就一直伴隨著我們,蠟筆、橡皮擦、訂書機等,直觀且鮮明地反映出時代的經(jīng)濟與文化。由于二戰(zhàn)的爆發(fā),《文具界》也發(fā)生了新變化,風格由鮮明變得內(nèi)斂,顏色方面也變得相當獨特。舊文具背后所蘊含的意義或許可以小到顯示用戶的習慣,也可能大到反映出當時的時代背景。




上海復(fù)古插畫


2018年1月份中國上海徐匯藝術(shù)館與上海風景工作室再度攜手策展 “百年上海圖畫”, 期待通過這次展覽能帶給觀者對城市視覺文化的回憶、思考及美育的體驗,并由此引來對城市社會史、生活史的多方位的關(guān)注和研究。


展覽一共展出100件與20世紀上海有關(guān)的印刷實物:書報、雜志、樣本等,及30張海報。同時展出70件繪有插圖的日常生活用品實物,作品在時代功能映照之下的美感交織呈現(xiàn)了20世紀上海插畫藝術(shù)的圖像簡史。






字體有沒有復(fù)古這一說法?


從過去到現(xiàn)在BranD雜志談?wù)撟疃嗟膽?yīng)該是字體設(shè)計了,隨著字體設(shè)計意識的提升,熱愛字體設(shè)計的人越來越多,討論的話題越來越有深度,越來越有趣味。


平野甲賀老先生的作品是極具有歷史的代表性,每當看到老先生的字體作品的時候,明明就是一副靜態(tài)的作品,卻在那一刻感受到了它的溫度。在我看來,字體是沒有復(fù)古與不復(fù)古這一說法的,但是為什么我們卻想要把平野老先生的作品放在這一期復(fù)古主題里面呢?


因為我們覺得一種字體的出現(xiàn)正好是代表著一個年代、一段歷史的誕生。恰好復(fù)古是一個大概念的說法,每個人追求的復(fù)古潮流都是一段歷史、一個年代的文化縮影。而平野甲賀的字體家族正好符合這樣的“復(fù)古特性。”



藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

圖文組合的布局該如何選擇?

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里



          





藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 

阿里設(shè)計師:B端產(chǎn)品國際版體驗設(shè)計

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

本篇文章,我將以項目的實踐為例子,簡述設(shè)計師在面對未知的商業(yè)環(huán)境下怎樣應(yīng)用「精益創(chuàng)業(yè)」和「設(shè)計思維」將設(shè)計與商業(yè)結(jié)合,實踐設(shè)計轉(zhuǎn)譯和推進落地。我將這次設(shè)計實踐稱為「國際化全景設(shè)計框架」探索。

一、xSpace產(chǎn)品背景介紹

CCO-集團客戶體驗事業(yè)群是一個為阿里平臺商家、阿里經(jīng)濟體提供售后服務(wù)能力的部門,勵志于賦能阿里電商生態(tài)圈內(nèi)的售后服務(wù)體驗,提升消費者對平臺的滿意度和 NPS指標。xSpace產(chǎn)品是一個幫助客服人員處理消費者咨詢、投訴、維權(quán)等場景的一站式售后服務(wù)工作臺。現(xiàn)已經(jīng)在阿里生態(tài)圈中多個 BU 中應(yīng)用,成為平臺服務(wù)中不可缺少的 CRM產(chǎn)品。

二、Lazada場景中面對的挑戰(zhàn)

2017年,阿里收購東南亞電商巨頭 lazada 成為阿里商業(yè)生態(tài)的重要組成部分。CCO 作為負責經(jīng)濟體售后服務(wù)體驗的部門,需要向外輸出阿里服務(wù)的價值和能力。因此,我參與的 xSpace產(chǎn)品海外場景孵化是其中重要的一個能力輸出。

△ 產(chǎn)品功能和業(yè)務(wù)覆蓋范圍

三、國際化項目遇到的問題

國內(nèi)產(chǎn)品出海,都會面對一些通用問題,例如:產(chǎn)品設(shè)計開發(fā)都在國內(nèi);業(yè)務(wù)和真實用戶在國外接觸機會少;文化背景、時間、空間上都或多或少存在差異。

我們熟知很多設(shè)計方法,例如 lean UX,design sprint,hook model,lean canvas 等,但是如何在國際化的挑戰(zhàn)中尋找最合適的方法,是我在國際化產(chǎn)品項目中遇到的困惑。

回想項目在推進的過程中出現(xiàn)過的一些困難,例如:

  • 解決方案似乎缺乏終端用戶輸入;
  • 產(chǎn)品owner太多,設(shè)計比較難收口;
  • 設(shè)計工作的重要性被認為低于功能迭代;
  • 調(diào)研之后經(jīng)常沒有后續(xù)action;
  • 在項目初始階段就被要求產(chǎn)出高保真設(shè)計方案。

是否有一種全面的國際產(chǎn)品設(shè)計和開發(fā)模式,既可以轉(zhuǎn)化產(chǎn)品能力又可以科學的度量海外用戶的體驗?

為了解決所面對的困惑,我嘗試將以往經(jīng)驗和項目的實踐相結(jié)合,梳理了 B類產(chǎn)品國際化體驗設(shè)計實踐模型。

本篇文章,我將以項目的實踐為例子,簡述設(shè)計師在面對未知的商業(yè)環(huán)境下怎樣應(yīng)用「精益創(chuàng)業(yè)」和「設(shè)計思維」將設(shè)計與商業(yè)結(jié)合,實踐設(shè)計轉(zhuǎn)譯和推進落地。我將這次設(shè)計實踐稱為「國際化全景設(shè)計框架」探索。

△ 設(shè)計思維、精益創(chuàng)業(yè)和敏捷開發(fā)之間的關(guān)系

四、國際化項目實踐

根據(jù)項目不同時期的側(cè)重點,我將把整個項目的實踐拆分為3個時期進行介紹,分別是探索期、實驗期和開發(fā)期?!冈O(shè)計框架」中包含的設(shè)計方法也將圍繞不同時期的側(cè)重點進行展開。

△ 國際化設(shè)計實踐項目分期

1. 探索期

當我們對海外場景一無所知的時候需要應(yīng)用「設(shè)計思維」對目標進行分析。在項目啟動初期,由于不清晰、不確定的需求導(dǎo)致產(chǎn)品設(shè)計存在很大的阻力。面對這樣的情況,項目團隊決定直接去到客戶現(xiàn)場了解業(yè)務(wù)現(xiàn)狀。設(shè)計師需要遵循「設(shè)計思維」,通過發(fā)現(xiàn)問題 – 定義問題 – 解決問題的思路,幫助項目快速明確目標。

收集用戶輸入,抽象產(chǎn)品場景:可以從「人」和「事」兩個方面入手。

△ 設(shè)計思維在設(shè)計前期的應(yīng)用

從「用戶(人)」的維度發(fā)現(xiàn)問題,是為了理解業(yè)務(wù)人員組織架構(gòu);明確公司內(nèi)部自上而下對產(chǎn)品期待;以及終端用戶的核心訴求。我們主要是通過訪談和觀察法進行數(shù)據(jù)收集,確保獲得一手的資料。

△ 基于角色的前期調(diào)研

通過調(diào)研我們發(fā)現(xiàn):Lazada服務(wù)團隊與服務(wù)BOP 之間的管理關(guān)系并沒有很緊密,在服務(wù)指標整體的管理上面相較于淘系平臺要求較簡單。但是也同樣存在客服流動性大,不穩(wěn)定等通用問題。而一線客服在日常使用產(chǎn)品的過程中,則面臨系統(tǒng)割裂操作效率不高等問題。

從「事情(業(yè)務(wù))」的維度發(fā)現(xiàn)問題可以快速理清業(yè)務(wù)流程和業(yè)務(wù)邊界。

在準備出發(fā)前,我結(jié)合國內(nèi)項目對電商服務(wù)流程的理解,簡單設(shè)計了業(yè)務(wù)調(diào)研的框架和范圍。通過訪談的形式進行歸納和補充,有目的有范圍的了解業(yè)務(wù)的共性和個性。

△ Lazada商業(yè)畫布,明確業(yè)務(wù)目標和范圍

通過「人」和「事」角度的資料收集,我們可以歸納出大部分的產(chǎn)品使用場景。對產(chǎn)品使用場景的抽象理解,可以讓設(shè)計師更深入了解業(yè)務(wù),通過對用戶的移情和以往的經(jīng)驗做第一輪體驗判斷。

第一輪體驗判斷:定義問題,明確產(chǎn)品落地思路和節(jié)奏。

通過對訪談和觀察內(nèi)容的梳理發(fā)現(xiàn),目前首要解決的問題是系統(tǒng)遷移、信息內(nèi)容和渠道擴展融合的問題。經(jīng)過評估和判斷,現(xiàn)有產(chǎn)品有50%的功能可以被復(fù)用,考慮到效能成本的因素,因此就有了系統(tǒng)整合場景適應(yīng)的概決思路。

△ MVP功能范圍拆解思路

通過以上業(yè)務(wù)方面的調(diào)研分析,接下來將進行產(chǎn)品執(zhí)行落地階段的實驗和分析。

2. 實驗期

有了解決問題的思路,就可以根據(jù)預(yù)先判斷的方向快速產(chǎn)出概念原型并進行實驗。與此同時,有目的性的針對市場競品進行分級調(diào)研,可以輔助加深對產(chǎn)品需求設(shè)計的理解。把眾多的競品分為核心競品、重要競品和行業(yè)競品,主要針對3個核心競品進行調(diào)研:這些調(diào)研可以幫助打磨出更合理的設(shè)計策略。

△ 競品分析思路和競品分級

從調(diào)研發(fā)現(xiàn),通常意義上國外的 B端產(chǎn)品似乎看起來相對「簡單」,這可能要歸功于他們在產(chǎn)品商業(yè)化推進過程中使用的策略,使得 B類產(chǎn)品在獲客體驗全流程表現(xiàn)的比較成熟。產(chǎn)品獲客階段的體驗感知也是我們的 B類產(chǎn)品在 PK 商業(yè)化產(chǎn)品的過程中一個重要參考。

研究競品的設(shè)計策略,可以幫助項目在之后的實踐中找到最適合的策略應(yīng)用在具體的設(shè)計方案中。

△ 設(shè)計策略、設(shè)計原則總結(jié)

在這個試錯的階段,整個項目團隊需要保有「精益創(chuàng)業(yè)」的思維:接觸并持續(xù)地收集用戶對產(chǎn)品的反饋和意見,用真實聲音去驗證產(chǎn)品方案和設(shè)計策略與市場的貼合度,并及時調(diào)整項目方向。多給自己試錯的機會,就像「精益創(chuàng)業(yè)」的作者所說的:失敗是學習的先決條件。

3. 開發(fā)期

通過前期的調(diào)研和實驗,進入開發(fā)期的項目應(yīng)該已經(jīng)明確了其目標,在這個階段的主要任務(wù)是根據(jù)產(chǎn)品和業(yè)務(wù)拆解設(shè)計目標,分解設(shè)計輸出,度量產(chǎn)品體驗。

拆解設(shè)計目標

需要結(jié)合產(chǎn)品的生命周期進行設(shè)計目標的拆解。我們項目的目標就是成功遷移產(chǎn)品。并且產(chǎn)品目前現(xiàn)有1.0版本已經(jīng)在公司內(nèi)部運營了2年,基礎(chǔ)功能已經(jīng)覆蓋。但為了結(jié)合 Lazada 的業(yè)務(wù)場景需要更深一步的功能定制。結(jié)合現(xiàn)狀,設(shè)計在不同的產(chǎn)品階段有以下如圖所示的策略分層。

△ 根據(jù)產(chǎn)品周期的不同階段進行設(shè)計目標的拆解

分解設(shè)計輸出

在 MVP 功能覆蓋階段,設(shè)計輸出主要包括對設(shè)計需求的探索和轉(zhuǎn)譯。在設(shè)計轉(zhuǎn)譯的拆解思路上,我主要關(guān)注通用功能和定制功能之間的融合和落地。抽象來看,從0到1的融合轉(zhuǎn)譯過程就像是一個由大到小再變大的沙漏。

總匯產(chǎn)品功能→收集國際化產(chǎn)品需求→需求分類→建立映射→提出解決方案→評估成本→設(shè)計落地

△ 設(shè)計思路抽象

其中有一些關(guān)鍵節(jié)點需要著重把握:

  • 總匯產(chǎn)品功能:了解現(xiàn)有產(chǎn)品功能大圖,目的是快速理清與新業(yè)務(wù)場景建立映射關(guān)系。通過業(yè)務(wù)分析,明確需求范圍,將需求轉(zhuǎn)化成產(chǎn)品功能。(前面提到了有多種手段可以收集產(chǎn)品需求)
  • 需求分類&建立映射:項目團隊內(nèi)根據(jù)功能模塊優(yōu)先級,制定設(shè)計迭代計劃。與之前的「產(chǎn)品功能大圖」匹配作為建立映射的依據(jù)。
  • 提出解決方案&評估成本:這個階段主要的設(shè)計行為是做設(shè)計的收口決策,需要設(shè)計師更好的收口不同功能模塊的產(chǎn)品訴求,達到跨國內(nèi)國外通用功能保持一致的產(chǎn)品體驗。

△ 交互demo

度量產(chǎn)品體驗

作為 B類國際化產(chǎn)品項目,最大的痛點就是距離。設(shè)計團隊與一線用戶存在時間、空間、文化上面多種多樣的差異。而用戶的反饋則是體驗優(yōu)化的重要輸入,如何在項目前期沒有數(shù)據(jù)監(jiān)控的情況下度量產(chǎn)品體驗,是國際化設(shè)計中所普遍存在的痛點。

因此,除了常規(guī)的小范圍可用性測試,我在項目實踐過程中還嘗試應(yīng)用一種適應(yīng)于國際化產(chǎn)品的體驗度量方式——SUS(system usability scale)。SUS量表的優(yōu)點在于:

  • 在樣本量有限時,SUS量表可以得出較可信的數(shù)據(jù)結(jié)果。
  • SUS分數(shù)可以橫向?qū)Ρ?,了解自身產(chǎn)品與行業(yè)競品對產(chǎn)品的差距。
  • SUS量表不僅可以衡量「usability」同時也可以衡量「learnability」,對于處在系統(tǒng)遷移場景的產(chǎn)品度量是比較適合的。

用戶UAT→SUS測試準備→量表發(fā)放→量表回收分析→體驗優(yōu)化提案→設(shè)計落地

△ 國際化產(chǎn)品SUS量表回收分析

配合產(chǎn)品 UAT 計劃,安排一定數(shù)量的可用性量表的投放和回收,通過計算可以獲得準確性高達95%的 SUS分數(shù)。該分數(shù)可以和行業(yè)的 benchmark進 行比對,評估出現(xiàn)有產(chǎn)品的弱項分數(shù)。這種科學的輕量且快速獲得用戶反饋的方式可幫助體驗設(shè)計師找到優(yōu)化提升的方向,進行專門的走查和分析。

五、設(shè)計小結(jié)

總結(jié)一下在遠離客戶的國際化場景中,設(shè)計師如何擁有一個全局的視角,科學的推進設(shè)計進度和度量產(chǎn)品體驗:

在第一階段——探索期,應(yīng)該針對項目的側(cè)重點選擇科學合理的設(shè)計方法,獲取一手的產(chǎn)品需求輸入,抽象出產(chǎn)品的使用場景作為接下來研發(fā)產(chǎn)品的「實驗素材」。

在第二個階段——試驗期,除了對項目競品的全鏈路競對研究之外,設(shè)計師和項目團隊都需要有不怕錯的試錯精神,應(yīng)用「精益創(chuàng)業(yè)」的流程快速驗證方案、圈定項目發(fā)展策略和思路。

在第三個階段——研發(fā)期,設(shè)計師需要突破國際化項目普遍存在的時間、空間等等限制,選擇最優(yōu)的設(shè)計方法指導(dǎo)設(shè)計產(chǎn)出和度量設(shè)計方案。

以上就是我在實踐 B類國際化項目中的一些經(jīng)驗總結(jié)。歡迎大家多多交流,相信在 B類產(chǎn)品國際化的道路中,還有非常多可以探索的課題等著我們?nèi)ニ伎肌?

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計  cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計  圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔