如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
版式設(shè)計(jì)中編排類型繁多，這里介紹常用的10種編排類型。運(yùn)用好這10種編排類型，快速完成設(shè)計(jì)任務(wù)同時(shí)，可達(dá)到最佳的傳播效果
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
按鈕在UI設(shè)計(jì)中是一種常用的UI控件，在界面中作為主要的行動(dòng)點(diǎn)，引導(dǎo)用戶進(jìn)行相應(yīng)的操作，它在用戶和產(chǎn)品的交互中承擔(dān)著重要的作用。
按鈕設(shè)計(jì)看似簡(jiǎn)單，但是如果想要更好的交互體驗(yàn)，引導(dǎo)用戶進(jìn)行相應(yīng)的操作，提升產(chǎn)品的轉(zhuǎn)化率這仍是我們需要研究的問題。下面小編將從按鈕功能類型和設(shè)計(jì)要點(diǎn)兩個(gè)方面進(jìn)行分析。
一、按鈕功能類型
按鈕的功能類型往往決定了一個(gè)按鈕的設(shè)計(jì)方式，是需要強(qiáng)調(diào)還是需要弱化；文案是需要強(qiáng)引導(dǎo)，還是直接闡述功能；按鈕上是放圖標(biāo)還是不放圖標(biāo)等。按鈕根據(jù)功能的不同，可以分為不同的類型，主要有行為召喚按鈕、表格按鈕、標(biāo)簽按鈕、命令按鈕、懸浮按鈕、開關(guān)按鈕這六大類型。
1.行為召喚按鈕
行為召喚（CTA）按鈕其目的是誘使用戶采取某些操作， 從而提高產(chǎn)品的轉(zhuǎn)行率。簡(jiǎn)單來說就是通過設(shè)計(jì)誘導(dǎo)或激勵(lì)用戶點(diǎn)擊按鈕，例如立即購(gòu)買、訂閱關(guān)注、利益誘導(dǎo)、文字誘導(dǎo)等。
1）誘導(dǎo)購(gòu)買
當(dāng)行為召喚的目的是誘導(dǎo)購(gòu)買時(shí)，按鈕的設(shè)計(jì)不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點(diǎn)擊，讓用戶進(jìn)來第一眼就能知道該按鈕的用途。如下圖所示：
以美團(tuán)外賣為例，該按鈕的顏色采用黑黃對(duì)比、形狀采用具有親和力的圓角，在樣式上加入投影同時(shí)加入送餐員的元素，配上小紅點(diǎn)，能夠清晰的給用戶傳遞出可點(diǎn)擊部分有去結(jié)算、送餐員。另外加入價(jià)格誘導(dǎo)，讓你可直觀看到優(yōu)惠了多少錢，促使你進(jìn)一步操作。
以淘寶詳情為例，該按鈕是一個(gè)組合按鈕，由加入購(gòu)物車和馬上搶以及店鋪、客服、收藏等組成，作為行為召喚按鈕我們可以明確的看到，不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2）訂閱關(guān)注
當(dāng)行為召喚的目的是訂閱關(guān)注時(shí)，其重要程度相比誘導(dǎo)購(gòu)買低很多，但是在設(shè)計(jì)時(shí)我們?nèi)匀恍枰紤]一個(gè)問題，這個(gè)問題可直接決定該按鈕大小、樣式等，這個(gè)問題就是需要根據(jù)產(chǎn)品目的判斷是誘導(dǎo)用戶訂閱關(guān)注重要還是讓用戶閱讀內(nèi)容重要。如下圖所示：
當(dāng)內(nèi)容重要時(shí)，按鈕的設(shè)計(jì)需要弱化處理，以優(yōu)酷視頻的發(fā)現(xiàn)頁(yè)和星球頁(yè)為例，這兩個(gè)頁(yè)面很明顯是以內(nèi)容為主的界面，在設(shè)計(jì)時(shí)直接弱化了按鈕形式，讓按鈕和整個(gè)界面相融合，但是按鈕設(shè)計(jì)的原則是讓其看上去像按鈕，因此當(dāng)按鈕只是文字時(shí)可以加圖標(biāo)進(jìn)行引導(dǎo)比如優(yōu)酷視頻發(fā)現(xiàn)頁(yè)，也可以加入弱底紋進(jìn)行引導(dǎo)還能讓界面看上去整潔，比如優(yōu)酷視頻星球頁(yè)面。
當(dāng)訂閱關(guān)注重要時(shí)，按鈕的設(shè)計(jì)需要強(qiáng)化處理，以橘子娛樂和土豆視頻為例，橘子娛樂采用粗描邊漸變按鈕，同時(shí)加入圖標(biāo)進(jìn)行引導(dǎo)，具有較強(qiáng)的視覺引導(dǎo)作用，很容易喚起用戶的關(guān)注。土豆視頻采用黃色填充加圖標(biāo)引導(dǎo)，在視覺上和產(chǎn)品內(nèi)容形成強(qiáng)烈對(duì)比，明顯的以關(guān)注為主的界面。
3）利益誘導(dǎo)
當(dāng)行為召喚的目的是利益誘導(dǎo)時(shí)，該按鈕設(shè)計(jì)根據(jù)重要程度較高，因此在設(shè)計(jì)時(shí)可以考慮顏色、形狀、加入圖標(biāo)、誘導(dǎo)文字等設(shè)計(jì)方法。如下圖所示：
以大眾點(diǎn)評(píng)為例，其領(lǐng)獎(jiǎng)按鈕明顯比賺積分的層級(jí)高，因此為了突出領(lǐng)獎(jiǎng)按鈕采用了色塊設(shè)計(jì)的樣式，同時(shí)賺積分按鈕采用描邊設(shè)計(jì)進(jìn)行弱化處理。
以騰訊doki為例，其打榜頁(yè)面沖榜的重要層級(jí)較高，因此在設(shè)計(jì)時(shí)不僅采用了色塊、加入動(dòng)效圖標(biāo)、同時(shí)還加入了誘導(dǎo)文字，讓按鈕更明顯同時(shí)誘導(dǎo)用戶點(diǎn)擊，其他去瀏覽按鈕則采用描邊樣式弱化處理。
4）文字誘導(dǎo)
文字誘導(dǎo)簡(jiǎn)單來說就是通過文字，誘導(dǎo)用戶進(jìn)行下一步操作，多用于空頁(yè)面、活動(dòng)頁(yè)面中，因此在設(shè)計(jì)時(shí)采用簡(jiǎn)單的色塊填充即可，如果該頁(yè)面為活動(dòng)頁(yè)面也可增加漸變或投影樣式，讓按鈕更有空間感，進(jìn)而突出按鈕。如下圖所示：
以得到為例，當(dāng)你還沒有學(xué)習(xí)計(jì)劃時(shí)，它會(huì)對(duì)你進(jìn)行提示“開始制定學(xué)習(xí)計(jì)劃”，同時(shí)其按鈕采用重要程度較高的色塊+投影的方式，誘導(dǎo)用戶點(diǎn)擊。
以大眾點(diǎn)評(píng)為例，當(dāng)你還沒有攻略時(shí)，它會(huì)對(duì)你進(jìn)行提示“我也要?jiǎng)?chuàng)建攻略”，同時(shí)其按鈕采用漸變填充的方式，誘導(dǎo)用戶點(diǎn)擊。
2.懸浮按鈕
懸按鈕浮是 Android 應(yīng)用中最常見的一個(gè)控件。不過隨著Android和iOS規(guī)范的不斷融合，在iOS中也經(jīng)常會(huì)看到各種各樣的懸浮按鈕。在設(shè)計(jì)上懸浮按鈕應(yīng)該采用顯眼的顏色，以抓住用戶的注意力。同時(shí)它應(yīng)該是積極正向的交互，比如創(chuàng)建、分享、探索等，同時(shí)并不是所有頁(yè)面都需要加懸浮按鈕。如下圖所示：
以UC瀏覽器為例，懸浮按鈕在訂閱頁(yè)面的右下角出現(xiàn)，將按鈕和界面結(jié)合很容易看出創(chuàng)建內(nèi)容的意思，同時(shí)點(diǎn)擊按鈕還可呼出圖文、視頻等操作圖標(biāo)。
3.標(biāo)簽按鈕
標(biāo)簽按鈕往往呈多個(gè)出現(xiàn)，多使用在二級(jí)導(dǎo)航或條件篩選下面；以及表單頁(yè)面作為切換條件選中。因此在設(shè)計(jì)樣式上有選中狀態(tài)和默認(rèn)狀態(tài)，同時(shí)其重要程度較低，在設(shè)計(jì)時(shí)不能喧賓奪主，需要弱化處理。如下圖所示：
以支付寶為例，它主要用在投保的表單頁(yè)面，其主要目的就是一個(gè)切換條件，重要程度遠(yuǎn)不及我要投保按鈕，因此在設(shè)計(jì)時(shí)默認(rèn)用的描邊處理；選中采用淡淡的色塊。
以轉(zhuǎn)轉(zhuǎn)為例，它主要用在導(dǎo)航下方，其主要目的也是切換條件，用戶主要操作是看下方篩選出的內(nèi)容，因此在設(shè)計(jì)時(shí)也進(jìn)行弱化處理。
4.表格按鈕
表格按鈕也就是由一個(gè)白色網(wǎng)格加文字組成的按鈕，從視覺上看和頁(yè)面融為一體，特別不突出。因此多用在個(gè)人中心中不太重要信息或者不想讓用戶操作的退出登錄界面中。如下圖所示：
以愛奇藝為例，在我的界面中，關(guān)于我們和退出登錄都是用的表格按鈕，由于關(guān)于我們是不太重要信息，退出登錄又是不想讓用戶操作的內(nèi)容，因此采用表格按鈕最為合適。
5.命令按鈕
命令按鈕也就是該按鈕具有明確的指令，多出現(xiàn)在彈框中，通常會(huì)有一個(gè)文字或2個(gè)文字出現(xiàn)的情況。其要求是文字語義要明確，盡量不要用確定、好的、要等詞匯，同時(shí)根據(jù)用戶右手操作習(xí)慣居多，因此將重要的按鈕放在右側(cè)。如下圖所示：
以京東金融為例，左圖是京東金融退出的二次確認(rèn)頁(yè)面，右圖是我調(diào)整文字之后的頁(yè)面。我們說到文字需要表意明確，因此將確定換成退出后表意更加直白，降低用戶理解度。
6.開關(guān)按鈕
開關(guān)按鈕也是我們很常見的一個(gè)組件。表示兩種相互對(duì)立的狀態(tài)間的切換，多用于表示功能的開啟和關(guān)閉。當(dāng)按鈕開啟后可能還會(huì)帶來其他的相應(yīng)操作。開關(guān)按鈕最常見的就是手機(jī)設(shè)置中，但是也有很多APP將其用到界面中使用。如下圖所示：
以美團(tuán)外賣和小豬短租為例，它們?cè)谔峤挥唵雾?yè)面時(shí)都采用了開關(guān)按鈕，同時(shí)在小豬短租中，當(dāng)按鈕打開底部會(huì)將“您可再入住完成10天內(nèi)補(bǔ)全信息”進(jìn)行展開顯示，提示用戶去填寫。這種點(diǎn)擊展開的操作還可增加更多的功能相關(guān)內(nèi)容。
二、按鈕設(shè)計(jì)要點(diǎn)
1.根據(jù)產(chǎn)品為按鈕選擇適合的形狀
在按鈕設(shè)計(jì)時(shí)，需要根據(jù)整個(gè)界面風(fēng)格設(shè)計(jì)合適的按鈕，按鈕樣式主要有直角、小圓角、全圓角三種樣式。
直角的含義：嚴(yán)謹(jǐn)、力量、高端。適用于金融類、奢品類產(chǎn)品中，讓產(chǎn)品給人嚴(yán)謹(jǐn)安全、高端的感覺。例如寺庫(kù)。
半圓角的含義：活潑、年輕、安全。適用于兒童類、年輕化、娛樂類、購(gòu)物類的產(chǎn)品中，提升親和力，拉近用戶的距離。例如土豆。
小圓角的含義：穩(wěn)定、中性。適用于用戶跨度較大的常規(guī)類產(chǎn)品中，例如微信。
以寺庫(kù)、微信、土豆為例，寺庫(kù)是品類電商，因此在設(shè)計(jì)時(shí)需要提現(xiàn)高端，因此在按鈕設(shè)計(jì)時(shí)采用直角設(shè)計(jì)。而微信的用戶群體上到七八十歲，下到幾歲其年齡范圍廣，因此采用穩(wěn)重的小圓角較為穩(wěn)妥。土豆短視頻其用戶群體較為年輕活潑，因此采用全圓角較為適合。
2.使用合適的狀態(tài)
在部分界面設(shè)計(jì)中需要考慮按鈕的不同狀態(tài)的設(shè)計(jì)，從而提高用戶操作流暢度。移動(dòng)端完整的系統(tǒng)按鈕可以分為正常狀態(tài)、按壓狀態(tài)、禁用狀態(tài)。
其中，正常狀態(tài)和加載狀態(tài)展示的是APP的主色；按壓狀態(tài)在正常態(tài)的基礎(chǔ)上疊加不透明度15%的黑色#000；禁用狀態(tài)是設(shè)置灰色或者將正常態(tài)設(shè)置不透明度45%，該狀態(tài)適用于提交界面中使用，比如登陸注冊(cè)、轉(zhuǎn)賬等。如下圖所示：
以京東金融為例，當(dāng)未輸入轉(zhuǎn)賬金額時(shí)，按鈕禁用為灰色，當(dāng)輸入金額時(shí)按鈕為正常狀態(tài)。不過隨著互聯(lián)網(wǎng)的發(fā)展，寬帶速度不斷的提高，按壓狀態(tài)慢慢被拋棄，他存在的意義不像以前網(wǎng)絡(luò)不發(fā)達(dá)的時(shí)候，點(diǎn)擊還需要時(shí)間反應(yīng)。
3.提供恰當(dāng)?shù)姆答?/span>
當(dāng)用戶點(diǎn)擊按鈕時(shí)，他們希望界面可以給些恰當(dāng)?shù)姆答?。如果沒有任何反饋，用戶會(huì)以為系統(tǒng)沒有收到他們的操作，然后就會(huì)重復(fù)點(diǎn)擊。這種行為常常導(dǎo)致多個(gè)不必要的操作。如下圖所示：
以土豆短視頻為例，當(dāng)點(diǎn)擊關(guān)注時(shí)為了避免用戶點(diǎn)擊沒有反應(yīng)的情況，可在按鈕上添加加載狀態(tài)，當(dāng)關(guān)注成功后圖標(biāo)狀態(tài)改為禁用狀態(tài)，同時(shí)文字變?yōu)橐殃P(guān)注。
總結(jié)
按鈕設(shè)計(jì)看似簡(jiǎn)單，但是如果想要更好的交互體驗(yàn)，引導(dǎo)用戶進(jìn)行相應(yīng)的操作，提升產(chǎn)品的轉(zhuǎn)化率這仍是我們需要研究的問題。本篇主要將從按鈕功能類型和設(shè)計(jì)要點(diǎn)兩個(gè)方面進(jìn)行歸納總結(jié)。
按鈕功能類型：主要有行為召喚按鈕、表格按鈕、標(biāo)簽按鈕、命令按鈕、懸浮按鈕、開關(guān)按鈕這六大類型。在使用我們需要根據(jù)對(duì)應(yīng)的功能和重要程度選擇適合的設(shè)計(jì)。
按鈕設(shè)計(jì)要點(diǎn)：主要有根據(jù)產(chǎn)品為按鈕選擇適合的形狀；使用適合的狀態(tài)；提供恰當(dāng)?shù)姆答佭@三大注意要點(diǎn)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
什么是信息架構(gòu)？怎么理解用戶體驗(yàn)五要素？本文用大量的案例和插圖幫你輕松掌握這個(gè)基礎(chǔ)知識(shí)。今天想要跟大家聊一聊關(guān)于 UX 和 IA 的話題。其實(shí)在寫今天這次分享的題目的時(shí)候我修改了很多次，為什么會(huì)修改很多次？這要從我在 medium 看的一篇文章說起，這篇文章的標(biāo)題是《6 Tips How to Apply Information Architecture in UX Design》，翻譯過來的意思是在用戶體驗(yàn)設(shè)計(jì)中如何建立信息架構(gòu)的6點(diǎn)建議。
當(dāng)時(shí)讀完文章，雖然覺得文章里講的一些散碎的概念迷迷糊糊可以理解，但這些概念就像蓋房子的磚塊一樣，我完全不知道這些磚塊該怎樣才能蓋成一棟大樓，或者我就站在樓下而因?yàn)樽约阂曇坝邢尥耆恢肋@棟大樓到底長(zhǎng)什么樣子，所以因?yàn)檫@個(gè)原因我一直苦惱于該如何去清晰的表達(dá)想要分享的內(nèi)容，思來想去決定這次分享不能僅僅是我對(duì)某篇文章的翻譯，想要弄清楚這篇文章到底在講什么，先要弄明白文章里的知識(shí)，當(dāng)我們了解清楚了這些信息之后再來理解這篇文章就會(huì)輕松容易得多，下面就將我總結(jié)出來的內(nèi)容分享給大家。
UX 即 user experience，譯為用戶體驗(yàn)。
IA 即 information architecture，譯為信息架構(gòu)。
他們的關(guān)系可以簡(jiǎn)單理解為良好的信息架構(gòu)是用戶體驗(yàn)的基礎(chǔ)。
我們平時(shí)聽到了太多關(guān)于用戶體驗(yàn)的東西，大家都以為用戶體驗(yàn)就跟交互設(shè)計(jì)差不多。我之前確實(shí)也是這么理解的，但是最近發(fā)現(xiàn)我的這個(gè)想法是有些過于片面了。
我們可以把用戶體驗(yàn)的工作分解成五個(gè)組成要素，分別為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
它們都是自下而上起作用的，每一個(gè)層面都是根據(jù)它下面的那個(gè)層面來決定的，所以表現(xiàn)層由框架層來決定，框架層則建立在結(jié)構(gòu)層的基礎(chǔ)上，結(jié)構(gòu)層的設(shè)計(jì)基于范圍層，范圍層是根據(jù)戰(zhàn)略層來制定的。每一個(gè)層面的決定都會(huì)影響到它之上層面的可用選項(xiàng)，信息架構(gòu)只是用戶體驗(yàn)結(jié)構(gòu)層的一部分而已。
IA 即 information architecture，解釋出來就是合理的組織信息的展現(xiàn)形式。
主要任務(wù)是為信息與用戶認(rèn)知之間搭建一座暢通的橋梁，是信息直觀表達(dá)的載體，通俗點(diǎn)說就是信息架構(gòu)不僅僅是設(shè)計(jì)信息的組織結(jié)構(gòu)，還需要研究信息的表達(dá)和傳遞。
這么說也許還有些抽象，舉個(gè)簡(jiǎn)單易懂的例子：
我們來看這個(gè)商場(chǎng)的平面解析圖，通過這個(gè)圖我們可以很清楚的了解商場(chǎng)的結(jié)構(gòu)，從而快速定位自己的位置還能順利找到自己想要購(gòu)買的產(chǎn)品。信息架構(gòu)對(duì)于一款產(chǎn)品來說就相當(dāng)于商場(chǎng)的平面解析圖，就像現(xiàn)在我們看到的這幅圖一樣，商場(chǎng)的每一層都有相對(duì)應(yīng)的分類區(qū)塊來指導(dǎo)消費(fèi)者。試想如果一個(gè)商場(chǎng)沒有對(duì)商品進(jìn)行有序的分類，那么我們?cè)诠渖虉?chǎng)的時(shí)候就很難順利挑選出自己所需要的商品，面對(duì)各種無序且數(shù)量繁多的商品我們一定會(huì)崩潰，這樣的情況對(duì)于男士來說絕對(duì)是場(chǎng)災(zāi)難，但對(duì)于女性來說也許會(huì)是一個(gè)充滿未知探索的挑選過程吧。
但不管怎么說在這里設(shè)計(jì)師需要做的就是規(guī)劃好這些樓層信息層級(jí)，主要做的工作就是：分類、層級(jí)梳理等。簡(jiǎn)單的說就是規(guī)劃好每一層有什么商品，同一層商品怎么分布等等信息。
所以在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中：設(shè)計(jì)師梳理信息架構(gòu)，其實(shí)和剛才說的梳理商場(chǎng)樓層架構(gòu)的概念是差不多的。
一個(gè)好的信息架構(gòu)一定是會(huì)滿足兩個(gè)維度的需求，即用戶需求和產(chǎn)品目標(biāo)。
從用戶的角度出發(fā)它可以讓用戶在一定的信息規(guī)劃下更容易找到自己想要的「東西」。
從產(chǎn)品目標(biāo)角度來看它能通過「信息架構(gòu)設(shè)計(jì)」去教育、說服、通知用戶。
所以用最簡(jiǎn)單的兩個(gè)字來說其實(shí)信息架構(gòu)就是在做分類。
再回到剛才那個(gè)例子想一想，把商場(chǎng)里的商品分類其實(shí)對(duì)于我們產(chǎn)品而言就是在給我們產(chǎn)品中的信息分類，以方便用戶能更好的使用我們的產(chǎn)品，而不會(huì)想要把產(chǎn)品卸載，從而使產(chǎn)品達(dá)到易用好用想用的目的。就跟我們逛商場(chǎng)一樣，當(dāng)我們能夠根據(jù)指示順利買到自己所需的商品的時(shí)候我們就不會(huì)因?yàn)檎也坏轿覀兿胭I的商品而失望的離開商場(chǎng)。
那么問題來了，我們?cè)撊绾芜M(jìn)行信息架構(gòu)分類呢？也就是信息架構(gòu)的分類方法是什么呢？
這里給大家介紹2種方法，從「產(chǎn)品目標(biāo)」出發(fā)我們可以采用「從上到下」的分類方法；從「內(nèi)容和功能需求分析」出發(fā)就可以用「從下到上」的方法進(jìn)行分類。下面來跟大家分享一下這兩種方法的具體做法。
剛才說了從上到下是以產(chǎn)品目標(biāo)即戰(zhàn)略層出發(fā)的分類方法，所以最開始就是先從最廣泛的、可能滿足決策目標(biāo)的內(nèi)容與功能開始進(jìn)行分類，然后再按邏輯細(xì)分出次級(jí)分類，這樣的「主要分類」和「次級(jí)分類」就構(gòu)成了「一個(gè)個(gè)空槽」，將想要的內(nèi)容和功能按順序一一填入即可。
我們以微信為例：首先根據(jù)產(chǎn)品目標(biāo)將「主要分類」即一級(jí)架構(gòu)分為「最近會(huì)話（微信）」、「通訊錄」、「發(fā)現(xiàn)」和「我」；然后再進(jìn)行「次級(jí)分類」分類，比如「發(fā)現(xiàn)」下再分「朋友圈」、「掃一掃」、「搖一搖」等等；最后將相應(yīng)的功能（如朋友圈feeds、發(fā)朋友圈、朋友圈消息等）填入到相應(yīng)的「朋友圈」分類中。
這樣就像是先有了大概的框架我們?cè)俑鶕?jù)這些框架往上面加?xùn)|西的感覺是一樣的。
接下來我們?cè)賮碚f一說從下到上的方法：
剛才說了從下到上是由范圍層驅(qū)動(dòng)從產(chǎn)品的功能和內(nèi)容層面出發(fā)的，所以我們就要先把已有的所有內(nèi)容，放在層級(jí)分類中，然后再將他們分別歸屬到較高一級(jí)的類別。這種分類方法其實(shí)就是在做「歸類」。
其實(shí)從下到上的信息架構(gòu)方法也包括了主要分類和次級(jí)分類，但它是根據(jù)對(duì)內(nèi)容和功能需求的分析而來的。先從已有的資料開始，我們把這些資料統(tǒng)統(tǒng)放到級(jí)別的分類中，然后再將它們分別歸屬到較高一級(jí)的類別，從而逐漸構(gòu)建出能反應(yīng)我們的產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。
具體工作中我們可以將所有的功能點(diǎn)用一張張卡片寫下來，然后讓目標(biāo)用戶參與到信息分類中，并反饋相關(guān)分類標(biāo)準(zhǔn)作為我們產(chǎn)品設(shè)計(jì)師去梳理信息架構(gòu)的參考。實(shí)踐過程中，更需要設(shè)計(jì)師或者產(chǎn)品經(jīng)理本身有一定的信息篩選、梳理、分類的能力，進(jìn)一步通過用戶測(cè)試去檢驗(yàn)分類的信息傳達(dá)有效性。
其實(shí)就好像我們?nèi)粘Ｉ钪惺占{衣服，我們會(huì)根據(jù)不同標(biāo)準(zhǔn)去收納，比如我們可以根據(jù)季節(jié)分類，也可以根據(jù)顏色分類，或者是根據(jù)款式分類，每個(gè)人都會(huì)有不同的分類習(xí)慣，所以這里歸結(jié)到工作中才會(huì)讓目標(biāo)用戶參與到信息分類中，畢竟我們的產(chǎn)品是服務(wù)于用戶，所以還原用戶使用習(xí)慣和使用心理也是我們同樣要注意到的，這樣可以給我們提供一些有效的分類信息幫助我們更好的做出清楚的信息架構(gòu)。
當(dāng)然這兩種方法都有一定的局限，從上到下的架構(gòu)方法有時(shí)可能導(dǎo)致內(nèi)容的重要細(xì)節(jié)被忽略，而從下到上的方法則可能導(dǎo)致架構(gòu)過于的反應(yīng)了現(xiàn)有的內(nèi)容，因此不能靈活地容納未來內(nèi)容的變動(dòng)或增加，所以在實(shí)際運(yùn)用中是需要我們將這兩種方式結(jié)合起來靈活運(yùn)用。
這兩種方法雖然有不同的視角但其實(shí)最終目的都是讓我們的產(chǎn)品易用好用最終達(dá)到想用的目的，所以讓這兩種方法對(duì)接、交匯、融合之后得出的結(jié)果才應(yīng)該是我們理想中的產(chǎn)品信息架構(gòu)。
剛才提到用戶體驗(yàn)的5個(gè)層級(jí)是自下而上對(duì)其上面一層起作用的，信息架構(gòu)位于用戶體驗(yàn)要素第3層結(jié)構(gòu)層，剛才說了結(jié)構(gòu)層的設(shè)計(jì)基于范圍層之上，所以這里遇到的影響因素我們還要返回到范圍層面去尋找，范圍層又包含兩個(gè)維度，功能和內(nèi)容，在從范圍層到結(jié)構(gòu)層這個(gè)過程中我們會(huì)遇到很多影響因素，所以把這些影響因素總結(jié)起來我們還是要從用戶層面（內(nèi)容）和產(chǎn)品層面（功能）兩個(gè)維度來理解。
從用戶的角度出發(fā)，理解能力、操作習(xí)慣、目標(biāo)內(nèi)容使用頻率等等這些都會(huì)成為影響因素。
從產(chǎn)品角度來看，產(chǎn)品的核心價(jià)值、主線功能、特色功能等才是影響信息梳理的因素。
這兩個(gè)層面當(dāng)然也不是完全割裂的，在做信息架構(gòu)的時(shí)候可以先從一個(gè)層面出發(fā)得出一個(gè)結(jié)論之后再用另外一個(gè)層面去驗(yàn)證得到的答案，然后再不斷優(yōu)化在驗(yàn)證過程中遇到的問題。
不同人會(huì)有不同的分類結(jié)果，因?yàn)楦鶕?jù)不同情況我們所需要關(guān)注的側(cè)重點(diǎn)會(huì)有不同，我們根據(jù)不同的影響因素會(huì)得出不同的答案。每個(gè)人都會(huì)得出不一樣的分類結(jié)果，沒有哪個(gè)結(jié)果是完全正確或者說是完全相同的，就像數(shù)學(xué)中的排列組合一樣，內(nèi)容越多我們得到的結(jié)果就會(huì)越豐富，但是這些結(jié)果當(dāng)然不是全都合理的，所以就需要設(shè)計(jì)師根據(jù)自己的經(jīng)驗(yàn)結(jié)合產(chǎn)品層和用戶層的需求找到合理的解決方案。我們都知道在產(chǎn)品設(shè)計(jì)中想要設(shè)計(jì)出來一款完美不需要迭代優(yōu)化的產(chǎn)品幾乎是不可能的，所以我們能做的只能是結(jié)合各方面的影響因素和自己的經(jīng)驗(yàn)理解一直優(yōu)化產(chǎn)品讓它接近于完美的狀態(tài)。
現(xiàn)在我們來思考一個(gè)問題：為什么微信朋友圈這么高密度使用的功能要放到二級(jí)菜單呢？
微信的創(chuàng)始人張小龍是這樣解釋的：
保持主干清晰，枝干適度。產(chǎn)品的主要功能架構(gòu)是產(chǎn)品的骨骼，它應(yīng)該盡量保持簡(jiǎn)單、明了，不可以輕易變更，讓用戶無所適從。次要功能豐富主干，不可以喧賓奪主，盡量隱藏起來，而不要放在一級(jí)頁(yè)面。
舉這個(gè)簡(jiǎn)單的小例子供大家了解信息架構(gòu)這個(gè)概念，體會(huì)一下如何用一個(gè)更全面更發(fā)展的眼光去看待產(chǎn)品結(jié)構(gòu)這個(gè)抽象的問題。
要在 UX 中建立良好的 IA 我們需要特別注意的5個(gè)關(guān)鍵點(diǎn)：
所以我們繞了一大圈來看，在 UX 中建立良好的 IA 的5個(gè)關(guān)鍵點(diǎn)其實(shí)最后還是回歸到了用戶體驗(yàn)的5個(gè)要素。再回到剛開始分享提到的那句話，從上到下表現(xiàn)層是由框架層來決定，框架層建立在結(jié)構(gòu)層基礎(chǔ)之上，結(jié)構(gòu)層基于范圍層，范圍層根據(jù)戰(zhàn)略層制定。這里每一個(gè)層面都是根據(jù)它下面的那個(gè)層面來決定的，相當(dāng)于把用戶體驗(yàn)要素每一層需要做的事情從另一個(gè)維度又解釋了一遍。
當(dāng)然這里要注意一點(diǎn)，這些層級(jí)都不是完全割裂的，如果你要求每個(gè)層面的工作在下一個(gè)層面可以開始之前完成，那樣一定會(huì)導(dǎo)致你和你的用戶都不滿意的結(jié)果，而相反的，應(yīng)該規(guī)劃好你的項(xiàng)目，讓任何一個(gè)層面中的工作都不能在其下層面的工作完成之前結(jié)束。這里最重要的一條是，在我們知道基本形狀之前，不能為房屋加上房頂。 不管我們是在這5個(gè)層級(jí)的哪一層，我們不能忘記的就是要把這些連成一個(gè)整體去理解，他們一定是相輔相成互相影響的。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
蘇格蘭有了第一座設(shè)計(jì)博物館，你永遠(yuǎn)不知道建筑和室內(nèi)設(shè)計(jì)的邊與限在哪里，它只有用不完的靈感之泉，和看不盡的精彩設(shè)計(jì)。建筑位于蘇格蘭東北海岸線上的懸崖，地理位置不平凡，它如何能平凡呢？
博物館外的材質(zhì)是預(yù)制混凝土，它沿著起伏的混凝土墻延伸，像千萬年前的高山被慢慢風(fēng)化，形成一種自然形狀，曾踏上高山環(huán)云游九天，曾在無數(shù)飄渺的歲月里看世間。當(dāng)太陽經(jīng)過的時(shí)候，奇妙的光影效果產(chǎn)生，它是建筑與自然的聯(lián)系。再看看室內(nèi)的設(shè)計(jì)，大廳和樓梯的地板使用愛爾蘭藍(lán)石灰?guī)r，數(shù)百萬年前的海洋動(dòng)植物化石藏在其中，寓意室外那片水。白色混凝土則是像瀕臨滅絕的淡水珍珠蚌致敬，混凝土里有不少貝殼，二樓和畫廊內(nèi)的地板材質(zhì)選用產(chǎn)自歐洲的橡木，餐廳和野餐屋的地板和墻面材質(zhì)是用的竹子，自然的聲音在這里每天奏響。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
好看的鎖骨千篇一律，
有趣的肚腩duang來duang去。
11月22日，
那一天，是西方的感恩節(jié)，
那一天，也是中國(guó)的小雪。
歪果仁感恩上帝的厚德與恩賜，
…
我只想感謝我身上的秋膘…
它，比秋褲更便利；
它，比暖寶更親膩；
它，比集體供暖更懂你；
它，比炭盆燒炕來的更容易。
感謝久坐，感謝外賣，感謝秋膘，
讓盡情放浪在暖冬的我，肥而不膩。
創(chuàng)意周報(bào) – 2018年11月第3周
一周熱銷圖片TOP5
NO.5 圖片ID：678491803（點(diǎn)擊查看圖片）
感恩節(jié)將近。
這張垂直視角的感恩節(jié)餐桌照片中，
果蔬與肉類食物顏色搭配鮮艷，
木質(zhì)桌面紋路不搶眼。
很適合作為網(wǎng)頁(yè)大圖、banner、
移動(dòng)端開屏背景和海報(bào)背景等用途使用。
NO.4 圖片ID：735764617（點(diǎn)擊查看圖片）
在國(guó)內(nèi)絕大多數(shù)人更熟識(shí)雙十一，
但“黑色星期五”才是世界范圍內(nèi)的購(gòu)物狂歡節(jié)。
在國(guó)內(nèi)的權(quán)重雖然不及雙十一，
但是黑五的影響力依舊不可小覷。
NO.3 圖片ID：1076345054（點(diǎn)擊查看圖片）
這張智能場(chǎng)景矢量圖在8月時(shí)曾經(jīng)上榜一次。
可愛、生動(dòng)的形象和冷靜、嚴(yán)謹(jǐn)?shù)睦渖{(diào)是讓這張圖片
從眾多固有風(fēng)格的科技主題畫面中脫穎而出的重要原因。
NO.2 圖片ID：1071512777（點(diǎn)擊查看圖片）
這張3D霓虹場(chǎng)景利用簡(jiǎn)單的幾何結(jié)構(gòu)搭建亮部背景，
前景空間的留白倒影也為畫面增加了立體感和質(zhì)感。
是一張通用型很強(qiáng)的背景圖。
NO.1 圖片ID：1092261245（點(diǎn)擊查看圖片）
經(jīng)典的紅、金配色，剪紙風(fēng)格設(shè)計(jì)。
中國(guó)傳統(tǒng)的窗框輪廓，左右對(duì)稱的排版。
可見該作者對(duì)于傳統(tǒng)題材的理解和用心。
一周熱銷題材TOP5
NO.5 健身（點(diǎn)擊查看該題材）
進(jìn)入秋冬之后，健身題材屢次上榜。
除了有氧運(yùn)動(dòng)的內(nèi)容以外，力量訓(xùn)練內(nèi)容增加明顯。
不論男女對(duì)身體線條的追求越來越以歐美為目標(biāo)。
NO.4 城市（點(diǎn)擊查看該題材）
從后臺(tái)數(shù)據(jù)來看城市題材攝影畫面在上周的熱銷，
主要是互聯(lián)網(wǎng)公司的采購(gòu)為主。
在互聯(lián)網(wǎng)企業(yè)不斷發(fā)展的過程中，
以城市為核心、為載體的成長(zhǎng)方式需要更多的城市影像
來傳遞各類品牌理念、產(chǎn)品訴求等信息。
NO.3 圣誕（點(diǎn)擊查看該題材）
圣誕題材毫無懸念入榜，
小編目測(cè)未來幾周內(nèi)圣誕題材會(huì)一直榜上有名。
圣誕裝飾主題的照片在上周比較搶眼。
NO.2 科技（點(diǎn)擊查看該題材）
本次熱銷的科技題材中，以太空科技畫面為主。
太空技術(shù)不但是各國(guó)國(guó)力競(jìng)爭(zhēng)的重點(diǎn)項(xiàng)目，
也承載了人類不斷探索和追求超越的夢(mèng)想。
NO.1 金融（點(diǎn)擊查看該題材）
雙十一之后，人們結(jié)束了購(gòu)物狂歡。
把視線集中在了各種銷售行為背后的商業(yè)邏輯上。
中產(chǎn)階級(jí)也更關(guān)心各種商業(yè)頂層的內(nèi)容。
金融題材內(nèi)容作為嚴(yán)肅話題一直處在討論熱點(diǎn)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
大家平時(shí)在畫素描的時(shí)候經(jīng)常會(huì)遇到顏色深不下去、顏色對(duì)比不強(qiáng)烈等問題。畫面的顏色總是顯得很灰，體現(xiàn)不出立體的效果。不管多使勁顏色就是重不下去，有時(shí)把紙都涂破了，依然沒有效果。這到底是為什么了？究竟如何才能把顏色重下去了?接下來我們就一探究竟吧~
什么樣的畫面是偏灰、偏臟的畫面呢?
畫面中這種暗部不暗，亮部不亮，顏色處于一個(gè)區(qū)別不大的狀態(tài)，畫面就會(huì)顯得灰；而亮面上色的時(shí)候筆觸太粗，灰面顏色磨得太多，整個(gè)亮部區(qū)域顏色就會(huì)顯得很臟。
這些問題之所以出現(xiàn)，是因?yàn)榇蠹覜]有將畫面的“黑、白、灰”表達(dá)清楚。
要在白紙上畫出立體的圖形，需要我們加強(qiáng)明暗之間的顏色對(duì)比；通過強(qiáng)烈的光影營(yíng)造立體的視覺效果。而快速表現(xiàn)出大的黑白灰關(guān)系是我們塑造的關(guān)鍵：
首先，我們找到所畫物體自身顏色最深的地方。用軟一點(diǎn)的鉛筆（8B、12B）排上調(diào)子，依次過渡灰面，留出并輕輕刻畫亮部，加上投影和背景。讓畫面先有一個(gè)基本的黑白灰，確定出最黑的地方，灰面的位置以及高光的分布。
然后，在這個(gè)基礎(chǔ)上我們找到物體的明暗交接線。
先從明暗交界線開始加深顏色并往暗部邊緣逐漸的過渡，運(yùn)筆排線的力度越來越輕，讓暗部形成一個(gè)有深淺顏色變化的面。靠近明暗交界線的地方顏色就重一點(diǎn)，靠近投影的地方顏色就淺一點(diǎn)，然后通過壓深投影的顏色，襯托暗部的反光，讓這個(gè)暗部顏色更加透氣。
再回到明暗交界線，往亮部方向用4B、2B將顏色逐漸過渡，畫出灰面來，但物體的灰面不宜畫得過多，一多畫面就膩了；灰面塑造的標(biāo)準(zhǔn)就是顏色一定要比暗部淺，灰面顏色如果加深那暗部的顏色也要同時(shí)加深，始終要保持這兩個(gè)面的顏色區(qū)別。
接下來，就是對(duì)比一下整個(gè)暗部區(qū)域和背景顏色的深淺程度。如果暗部的顏色比背景深就將暗部邊緣的顏色壓重一點(diǎn)點(diǎn)，如果背景的顏色更深，那么就像畫投影一樣，沿著物體的暗部邊緣疊色，加深背景的顏色；不管哪一種情況都要將暗部和背景的顏色區(qū)分開。
最后，我們有稍微硬一點(diǎn)的鉛筆（如2H、HB）排線將亮部表現(xiàn)一下，主要是將高光收攏，除了不銹鋼和玻璃其他物體都是越靠近高光用的鉛筆越硬（HB、2H、4H），亮部刻畫時(shí)排線一定要細(xì)膩，可以刻意排幾組特別精準(zhǔn)的線條加強(qiáng)物體的質(zhì)感，這樣高光和亮部會(huì)顯得更白，從而就會(huì)襯得暗部的顏色更黑更深。
完成的物體黑白灰的塑造之后，最后看一看整個(gè)物體各邊線與背景顏色的深淺對(duì)比，還是通過加強(qiáng)區(qū)部的顏色對(duì)比，完善畫面整體的明暗對(duì)比。
總而言之，暗部的黑并不是獨(dú)立存在，是因?yàn)橹苓叺念伾急人鼫\，于是乎，它就深了下去，如果與周圍的顏色區(qū)分不開，那即使將紙張揉破顏色依舊難深下去。所以，暗部疊色就是一邊畫一邊比較，不停的調(diào)整，才能始終確保暗部能重下去。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
文化時(shí)光機(jī) 1868-1988，以復(fù)古文化為概念，與大家分享一些系列的老式設(shè)計(jì)、品牌
編輯丨姚澤斌
校對(duì)丨BranD編輯部
不知道從什么時(shí)候開始，有了“復(fù)古風(fēng)”這一說法，到處可以發(fā)現(xiàn)復(fù)古的衣服、家具、產(chǎn)品、建筑，很多舊的風(fēng)格已經(jīng)重新流行起來了。
BranD No.40期：文化時(shí)光機(jī) 1868-1988，以復(fù)古文化為概念，與大家分享一些系列的老式設(shè)計(jì)、品牌，為此我們提了三個(gè)問題來講述這一期：
為什么要選用相機(jī)作為封面？
選用了一款復(fù)古相機(jī)作為BranD No.40期的封面，主要是因?yàn)槲覀冇X得相機(jī)是極具代表性的一款能夠記錄時(shí)光的媒介，這一期的主題：文化時(shí)光機(jī) 1868-1988，因?yàn)橐豢顝?fù)古相機(jī)本身具備著悠長(zhǎng)的歷史之余，它還承載著歷史的變遷、人文的變化以及文明的發(fā)展。
為了繼續(xù)從封面上擴(kuò)散復(fù)古理念，利用照相機(jī)來提高整個(gè)封面的互動(dòng)性和趣味性，設(shè)計(jì)師以“拍立得”為設(shè)計(jì)靈感，在已經(jīng)設(shè)計(jì)好的封面基礎(chǔ)上，做出了一些大膽的嘗試。
最終成型的BranD No.40期的封面是這樣的，遠(yuǎn)看只是一款復(fù)古的拍立得相機(jī)，但是當(dāng)你接觸到封面時(shí)，你會(huì)發(fā)現(xiàn)在相機(jī)底部是可以隨意抽取出一張老照片來。
ps：每一本只贈(zèng)送一張復(fù)古老相片。
這一期用什么內(nèi)容記錄舊時(shí)光？
或許是因?yàn)榱餍斜旧砭褪且粋€(gè)循環(huán)的過程，一些復(fù)古的潮流，很容易在沉寂了多年以后，又會(huì)開始流行起來，又或許人們本身就是很迷戀過去的美好。
有時(shí)候真的會(huì)捫心自問，為了迎合市場(chǎng)而進(jìn)行的“偽”復(fù)古是否值得我們?nèi)ネ瞥?，這個(gè)問題我們先不必去討論。
與其強(qiáng)行模仿復(fù)古的設(shè)計(jì)風(fēng)格，不如跟隨本期BranD新刊：文化時(shí)光機(jī) 1868-1988，去認(rèn)識(shí)一下那些記錄舊時(shí)光的美好物品。來看一下那時(shí)候的設(shè)計(jì)，到底值不值得讓我們?nèi)グ阉俅瘟餍衅饋?。本期一共分為六大專題來記錄那份美好的舊時(shí)光，那些經(jīng)典的設(shè)計(jì)、古老的品牌，讓您停留在每一個(gè)瞬間：
①
奇跡 ? 漫威
“復(fù)仇者聯(lián)盟”這個(gè)英雄系列第一次出現(xiàn)是在1963年的漫威漫畫《復(fù)仇者聯(lián)盟》當(dāng)中，于1961年正式定名為Marvel。
這一部分將記錄著那些描繪英雄的藝術(shù)家，他們用色彩和線條構(gòu)建了故事的靈魂。試著翻開來自數(shù)十年前的漫畫，感受角色最原始的模樣、最自然的色彩，這或許也是現(xiàn)代人除了看電影以外最美妙的生活方式之一。
②
永不褪色的復(fù)古美
可以毫不夸張地說，復(fù)古是種永不過時(shí)的格調(diào)，每一個(gè)年代的人們都有追溯往昔的情懷，復(fù)古設(shè)計(jì)也因?yàn)槟芄雌鹑藗兊倪@種情懷而受到青睞。因此，現(xiàn)代設(shè)計(jì)師喜歡在設(shè)計(jì)中融入復(fù)古的元素。
插畫、紙牌、海報(bào)、票據(jù)、傳單、菜單、食品或產(chǎn)品包裝、玩具、室內(nèi)外設(shè)計(jì)，各種媒介都可以成為復(fù)古元素的載體，延續(xù)甚至更生復(fù)古風(fēng)格永不褪色的魅力。
③
重塑品牌傳統(tǒng)
臺(tái)灣本土有很多知名傳統(tǒng)品牌，這些人們耳熟能詳?shù)钠放瞥休d了傳統(tǒng)的物產(chǎn)與豐富的文化記憶。美可特品牌企劃設(shè)計(jì)（美可特）為不少傳統(tǒng)品牌重塑了適應(yīng)社會(huì)發(fā)展的品牌形象。
在書中美可特與讀者分享的包裝設(shè)計(jì)案例以不落俗套的現(xiàn)代設(shè)計(jì)手法，彰顯出臺(tái)灣在地新、舊品牌的文化內(nèi)涵，燃起了人們對(duì)臺(tái)灣設(shè)計(jì)的期待與信心。
④
永恒的文化
這里涉及到了一個(gè)菜譜文化，將會(huì)給大家展示一些歷史悠久，珍貴又罕見的菜譜，早期的菜譜專供廚師使用，專業(yè)性較強(qiáng)，但隨著人們對(duì)飲食的要求越來越高，而其中一些實(shí)用與美觀兼具的書籍排版更是吸引了設(shè)計(jì)師和菜譜收藏家的注意。
⑤
邂逅舊時(shí)光
文具，作為舊時(shí)光的代表物品之一。幾乎是從識(shí)字開始就一直伴隨著我們，蠟筆、橡皮擦、訂書機(jī)等，直觀且鮮明地反映出時(shí)代的經(jīng)濟(jì)與文化。由于二戰(zhàn)的爆發(fā)，《文具界》也發(fā)生了新變化，風(fēng)格由鮮明變得內(nèi)斂，顏色方面也變得相當(dāng)獨(dú)特。舊文具背后所蘊(yùn)含的意義或許可以小到顯示用戶的習(xí)慣，也可能大到反映出當(dāng)時(shí)的時(shí)代背景。
⑥
上海復(fù)古插畫
2018年1月份中國(guó)上海徐匯藝術(shù)館與上海風(fēng)景工作室再度攜手策展 “百年上海圖畫”， 期待通過這次展覽能帶給觀者對(duì)城市視覺文化的回憶、思考及美育的體驗(yàn)，并由此引來對(duì)城市社會(huì)史、生活史的多方位的關(guān)注和研究。
展覽一共展出100件與20世紀(jì)上海有關(guān)的印刷實(shí)物：書報(bào)、雜志、樣本等，及30張海報(bào)。同時(shí)展出70件繪有插圖的日常生活用品實(shí)物，作品在時(shí)代功能映照之下的美感交織呈現(xiàn)了20世紀(jì)上海插畫藝術(shù)的圖像簡(jiǎn)史。
字體有沒有復(fù)古這一說法？
從過去到現(xiàn)在BranD雜志談?wù)撟疃嗟膽?yīng)該是字體設(shè)計(jì)了，隨著字體設(shè)計(jì)意識(shí)的提升，熱愛字體設(shè)計(jì)的人越來越多，討論的話題越來越有深度，越來越有趣味。
平野甲賀老先生的作品是極具有歷史的代表性，每當(dāng)看到老先生的字體作品的時(shí)候，明明就是一副靜態(tài)的作品，卻在那一刻感受到了它的溫度。在我看來，字體是沒有復(fù)古與不復(fù)古這一說法的，但是為什么我們卻想要把平野老先生的作品放在這一期復(fù)古主題里面呢？
因?yàn)槲覀冇X得一種字體的出現(xiàn)正好是代表著一個(gè)年代、一段歷史的誕生。恰好復(fù)古是一個(gè)大概念的說法，每個(gè)人追求的復(fù)古潮流都是一段歷史、一個(gè)年代的文化縮影。而平野甲賀的字體家族正好符合這樣的“復(fù)古特性?！?
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
本篇文章，我將以項(xiàng)目的實(shí)踐為例子，簡(jiǎn)述設(shè)計(jì)師在面對(duì)未知的商業(yè)環(huán)境下怎樣應(yīng)用「精益創(chuàng)業(yè)」和「設(shè)計(jì)思維」將設(shè)計(jì)與商業(yè)結(jié)合，實(shí)踐設(shè)計(jì)轉(zhuǎn)譯和推進(jìn)落地。我將這次設(shè)計(jì)實(shí)踐稱為「國(guó)際化全景設(shè)計(jì)框架」探索。CCO-集團(tuán)客戶體驗(yàn)事業(yè)群是一個(gè)為阿里平臺(tái)商家、阿里經(jīng)濟(jì)體提供售后服務(wù)能力的部門，勵(lì)志于賦能阿里電商生態(tài)圈內(nèi)的售后服務(wù)體驗(yàn)，提升消費(fèi)者對(duì)平臺(tái)的滿意度和 NPS指標(biāo)。xSpace產(chǎn)品是一個(gè)幫助客服人員處理消費(fèi)者咨詢、投訴、維權(quán)等場(chǎng)景的一站式售后服務(wù)工作臺(tái)。現(xiàn)已經(jīng)在阿里生態(tài)圈中多個(gè) BU 中應(yīng)用，成為平臺(tái)服務(wù)中不可缺少的 CRM產(chǎn)品。
2017年，阿里收購(gòu)東南亞電商巨頭 lazada 成為阿里商業(yè)生態(tài)的重要組成部分。CCO 作為負(fù)責(zé)經(jīng)濟(jì)體售后服務(wù)體驗(yàn)的部門，需要向外輸出阿里服務(wù)的價(jià)值和能力。因此，我參與的 xSpace產(chǎn)品海外場(chǎng)景孵化是其中重要的一個(gè)能力輸出。
△ 產(chǎn)品功能和業(yè)務(wù)覆蓋范圍
國(guó)內(nèi)產(chǎn)品出海，都會(huì)面對(duì)一些通用問題，例如：產(chǎn)品設(shè)計(jì)開發(fā)都在國(guó)內(nèi)；業(yè)務(wù)和真實(shí)用戶在國(guó)外接觸機(jī)會(huì)少；文化背景、時(shí)間、空間上都或多或少存在差異。
我們熟知很多設(shè)計(jì)方法，例如 lean UX，design sprint，hook model，lean canvas 等，但是如何在國(guó)際化的挑戰(zhàn)中尋找最合適的方法，是我在國(guó)際化產(chǎn)品項(xiàng)目中遇到的困惑。
回想項(xiàng)目在推進(jìn)的過程中出現(xiàn)過的一些困難，例如：
是否有一種全面的國(guó)際產(chǎn)品設(shè)計(jì)和開發(fā)模式，既可以轉(zhuǎn)化產(chǎn)品能力又可以科學(xué)的度量海外用戶的體驗(yàn)？
為了解決所面對(duì)的困惑，我嘗試將以往經(jīng)驗(yàn)和項(xiàng)目的實(shí)踐相結(jié)合，梳理了 B類產(chǎn)品國(guó)際化體驗(yàn)設(shè)計(jì)實(shí)踐模型。
本篇文章，我將以項(xiàng)目的實(shí)踐為例子，簡(jiǎn)述設(shè)計(jì)師在面對(duì)未知的商業(yè)環(huán)境下怎樣應(yīng)用「精益創(chuàng)業(yè)」和「設(shè)計(jì)思維」將設(shè)計(jì)與商業(yè)結(jié)合，實(shí)踐設(shè)計(jì)轉(zhuǎn)譯和推進(jìn)落地。我將這次設(shè)計(jì)實(shí)踐稱為「國(guó)際化全景設(shè)計(jì)框架」探索。
△ 設(shè)計(jì)思維、精益創(chuàng)業(yè)和敏捷開發(fā)之間的關(guān)系
根據(jù)項(xiàng)目不同時(shí)期的側(cè)重點(diǎn)，我將把整個(gè)項(xiàng)目的實(shí)踐拆分為3個(gè)時(shí)期進(jìn)行介紹，分別是探索期、實(shí)驗(yàn)期和開發(fā)期?！冈O(shè)計(jì)框架」中包含的設(shè)計(jì)方法也將圍繞不同時(shí)期的側(cè)重點(diǎn)進(jìn)行展開。
△ 國(guó)際化設(shè)計(jì)實(shí)踐項(xiàng)目分期
當(dāng)我們對(duì)海外場(chǎng)景一無所知的時(shí)候需要應(yīng)用「設(shè)計(jì)思維」對(duì)目標(biāo)進(jìn)行分析。在項(xiàng)目啟動(dòng)初期，由于不清晰、不確定的需求導(dǎo)致產(chǎn)品設(shè)計(jì)存在很大的阻力。面對(duì)這樣的情況，項(xiàng)目團(tuán)隊(duì)決定直接去到客戶現(xiàn)場(chǎng)了解業(yè)務(wù)現(xiàn)狀。設(shè)計(jì)師需要遵循「設(shè)計(jì)思維」，通過發(fā)現(xiàn)問題 – 定義問題 – 解決問題的思路，幫助項(xiàng)目快速明確目標(biāo)。
收集用戶輸入，抽象產(chǎn)品場(chǎng)景：可以從「人」和「事」兩個(gè)方面入手。
△ 設(shè)計(jì)思維在設(shè)計(jì)前期的應(yīng)用
從「用戶（人）」的維度發(fā)現(xiàn)問題，是為了理解業(yè)務(wù)人員組織架構(gòu)；明確公司內(nèi)部自上而下對(duì)產(chǎn)品期待；以及終端用戶的核心訴求。我們主要是通過訪談和觀察法進(jìn)行數(shù)據(jù)收集，確保獲得一手的資料。
△ 基于角色的前期調(diào)研
通過調(diào)研我們發(fā)現(xiàn)：Lazada服務(wù)團(tuán)隊(duì)與服務(wù)BOP 之間的管理關(guān)系并沒有很緊密，在服務(wù)指標(biāo)整體的管理上面相較于淘系平臺(tái)要求較簡(jiǎn)單。但是也同樣存在客服流動(dòng)性大，不穩(wěn)定等通用問題。而一線客服在日常使用產(chǎn)品的過程中，則面臨系統(tǒng)割裂操作效率不高等問題。
從「事情（業(yè)務(wù)）」的維度發(fā)現(xiàn)問題可以快速理清業(yè)務(wù)流程和業(yè)務(wù)邊界。
在準(zhǔn)備出發(fā)前，我結(jié)合國(guó)內(nèi)項(xiàng)目對(duì)電商服務(wù)流程的理解，簡(jiǎn)單設(shè)計(jì)了業(yè)務(wù)調(diào)研的框架和范圍。通過訪談的形式進(jìn)行歸納和補(bǔ)充，有目的有范圍的了解業(yè)務(wù)的共性和個(gè)性。
△ Lazada商業(yè)畫布，明確業(yè)務(wù)目標(biāo)和范圍
通過「人」和「事」角度的資料收集，我們可以歸納出大部分的產(chǎn)品使用場(chǎng)景。對(duì)產(chǎn)品使用場(chǎng)景的抽象理解，可以讓設(shè)計(jì)師更深入了解業(yè)務(wù)，通過對(duì)用戶的移情和以往的經(jīng)驗(yàn)做第一輪體驗(yàn)判斷。
第一輪體驗(yàn)判斷：定義問題，明確產(chǎn)品落地思路和節(jié)奏。
通過對(duì)訪談和觀察內(nèi)容的梳理發(fā)現(xiàn)，目前首要解決的問題是系統(tǒng)遷移、信息內(nèi)容和渠道擴(kuò)展融合的問題。經(jīng)過評(píng)估和判斷，現(xiàn)有產(chǎn)品有50%的功能可以被復(fù)用，考慮到效能成本的因素，因此就有了系統(tǒng)整合場(chǎng)景適應(yīng)的概決思路。
△ MVP功能范圍拆解思路
通過以上業(yè)務(wù)方面的調(diào)研分析，接下來將進(jìn)行產(chǎn)品執(zhí)行落地階段的實(shí)驗(yàn)和分析。
有了解決問題的思路，就可以根據(jù)預(yù)先判斷的方向快速產(chǎn)出概念原型并進(jìn)行實(shí)驗(yàn)。與此同時(shí)，有目的性的針對(duì)市場(chǎng)競(jìng)品進(jìn)行分級(jí)調(diào)研，可以輔助加深對(duì)產(chǎn)品需求設(shè)計(jì)的理解。把眾多的競(jìng)品分為核心競(jìng)品、重要競(jìng)品和行業(yè)競(jìng)品，主要針對(duì)3個(gè)核心競(jìng)品進(jìn)行調(diào)研：這些調(diào)研可以幫助打磨出更合理的設(shè)計(jì)策略。
△ 競(jìng)品分析思路和競(jìng)品分級(jí)
從調(diào)研發(fā)現(xiàn)，通常意義上國(guó)外的 B端產(chǎn)品似乎看起來相對(duì)「簡(jiǎn)單」，這可能要?dú)w功于他們?cè)诋a(chǎn)品商業(yè)化推進(jìn)過程中使用的策略，使得 B類產(chǎn)品在獲客體驗(yàn)全流程表現(xiàn)的比較成熟。產(chǎn)品獲客階段的體驗(yàn)感知也是我們的 B類產(chǎn)品在 PK 商業(yè)化產(chǎn)品的過程中一個(gè)重要參考。
研究競(jìng)品的設(shè)計(jì)策略，可以幫助項(xiàng)目在之后的實(shí)踐中找到最適合的策略應(yīng)用在具體的設(shè)計(jì)方案中。
△ 設(shè)計(jì)策略、設(shè)計(jì)原則總結(jié)
在這個(gè)試錯(cuò)的階段，整個(gè)項(xiàng)目團(tuán)隊(duì)需要保有「精益創(chuàng)業(yè)」的思維：接觸并持續(xù)地收集用戶對(duì)產(chǎn)品的反饋和意見，用真實(shí)聲音去驗(yàn)證產(chǎn)品方案和設(shè)計(jì)策略與市場(chǎng)的貼合度，并及時(shí)調(diào)整項(xiàng)目方向。多給自己試錯(cuò)的機(jī)會(huì)，就像「精益創(chuàng)業(yè)」的作者所說的：失敗是學(xué)習(xí)的先決條件。
通過前期的調(diào)研和實(shí)驗(yàn)，進(jìn)入開發(fā)期的項(xiàng)目應(yīng)該已經(jīng)明確了其目標(biāo)，在這個(gè)階段的主要任務(wù)是根據(jù)產(chǎn)品和業(yè)務(wù)拆解設(shè)計(jì)目標(biāo)，分解設(shè)計(jì)輸出，度量產(chǎn)品體驗(yàn)。
拆解設(shè)計(jì)目標(biāo)
需要結(jié)合產(chǎn)品的生命周期進(jìn)行設(shè)計(jì)目標(biāo)的拆解。我們項(xiàng)目的目標(biāo)就是成功遷移產(chǎn)品。并且產(chǎn)品目前現(xiàn)有1.0版本已經(jīng)在公司內(nèi)部運(yùn)營(yíng)了2年，基礎(chǔ)功能已經(jīng)覆蓋。但為了結(jié)合 Lazada 的業(yè)務(wù)場(chǎng)景需要更深一步的功能定制。結(jié)合現(xiàn)狀，設(shè)計(jì)在不同的產(chǎn)品階段有以下如圖所示的策略分層。
△ 根據(jù)產(chǎn)品周期的不同階段進(jìn)行設(shè)計(jì)目標(biāo)的拆解
分解設(shè)計(jì)輸出
在 MVP 功能覆蓋階段，設(shè)計(jì)輸出主要包括對(duì)設(shè)計(jì)需求的探索和轉(zhuǎn)譯。在設(shè)計(jì)轉(zhuǎn)譯的拆解思路上，我主要關(guān)注通用功能和定制功能之間的融合和落地。抽象來看，從0到1的融合轉(zhuǎn)譯過程就像是一個(gè)由大到小再變大的沙漏。
總匯產(chǎn)品功能→收集國(guó)際化產(chǎn)品需求→需求分類→建立映射→提出解決方案→評(píng)估成本→設(shè)計(jì)落地
△ 設(shè)計(jì)思路抽象
其中有一些關(guān)鍵節(jié)點(diǎn)需要著重把握：
△ 交互demo
度量產(chǎn)品體驗(yàn)
作為 B類國(guó)際化產(chǎn)品項(xiàng)目，最大的痛點(diǎn)就是距離。設(shè)計(jì)團(tuán)隊(duì)與一線用戶存在時(shí)間、空間、文化上面多種多樣的差異。而用戶的反饋則是體驗(yàn)優(yōu)化的重要輸入，如何在項(xiàng)目前期沒有數(shù)據(jù)監(jiān)控的情況下度量產(chǎn)品體驗(yàn)，是國(guó)際化設(shè)計(jì)中所普遍存在的痛點(diǎn)。
因此，除了常規(guī)的小范圍可用性測(cè)試，我在項(xiàng)目實(shí)踐過程中還嘗試應(yīng)用一種適應(yīng)于國(guó)際化產(chǎn)品的體驗(yàn)度量方式——SUS（system usability scale）。SUS量表的優(yōu)點(diǎn)在于：
用戶UAT→SUS測(cè)試準(zhǔn)備→量表發(fā)放→量表回收分析→體驗(yàn)優(yōu)化提案→設(shè)計(jì)落地
△ 國(guó)際化產(chǎn)品SUS量表回收分析
配合產(chǎn)品 UAT 計(jì)劃，安排一定數(shù)量的可用性量表的投放和回收，通過計(jì)算可以獲得準(zhǔn)確性高達(dá)95%的 SUS分?jǐn)?shù)。該分?jǐn)?shù)可以和行業(yè)的 benchmark進(jìn) 行比對(duì)，評(píng)估出現(xiàn)有產(chǎn)品的弱項(xiàng)分?jǐn)?shù)。這種科學(xué)的輕量且快速獲得用戶反饋的方式可幫助體驗(yàn)設(shè)計(jì)師找到優(yōu)化提升的方向，進(jìn)行專門的走查和分析。
總結(jié)一下在遠(yuǎn)離客戶的國(guó)際化場(chǎng)景中，設(shè)計(jì)師如何擁有一個(gè)全局的視角，科學(xué)的推進(jìn)設(shè)計(jì)進(jìn)度和度量產(chǎn)品體驗(yàn)：
在第一階段——探索期，應(yīng)該針對(duì)項(xiàng)目的側(cè)重點(diǎn)選擇科學(xué)合理的設(shè)計(jì)方法，獲取一手的產(chǎn)品需求輸入，抽象出產(chǎn)品的使用場(chǎng)景作為接下來研發(fā)產(chǎn)品的「實(shí)驗(yàn)素材」。
在第二個(gè)階段——試驗(yàn)期，除了對(duì)項(xiàng)目競(jìng)品的全鏈路競(jìng)對(duì)研究之外，設(shè)計(jì)師和項(xiàng)目團(tuán)隊(duì)都需要有不怕錯(cuò)的試錯(cuò)精神，應(yīng)用「精益創(chuàng)業(yè)」的流程快速驗(yàn)證方案、圈定項(xiàng)目發(fā)展策略和思路。
在第三個(gè)階段——研發(fā)期，設(shè)計(jì)師需要突破國(guó)際化項(xiàng)目普遍存在的時(shí)間、空間等等限制，選擇最優(yōu)的設(shè)計(jì)方法指導(dǎo)設(shè)計(jì)產(chǎn)出和度量設(shè)計(jì)方案。
以上就是我在實(shí)踐 B類國(guó)際化項(xiàng)目中的一些經(jīng)驗(yàn)總結(jié)。歡迎大家多多交流，相信在 B類產(chǎn)品國(guó)際化的道路中，還有非常多可以探索的課題等著我們?nèi)ニ伎肌?
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn