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

• 
  

閱讀之前，溫馨提示下，文中提到的 UI設(shè)計(jì)方式不一定有對錯(cuò)，如果使用得當(dāng)，它們都有很大的可能性。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

本文介紹在設(shè)計(jì)表單體驗(yàn)時(shí)，決定這兩個(gè)控件之間的指導(dǎo)性原則和案例分享。

表單提供了幾個(gè)可以更輕松收集用戶輸入的控件。設(shè)計(jì)表單時(shí)，在正確的位置使用正確的控件是一項(xiàng)挑戰(zhàn)。

復(fù)選框控件有三種狀態(tài)：unselected（非勾選態(tài)）、selected（勾選態(tài)）和indeterminate（未確定態(tài)）。最后一個(gè)狀態(tài)代表子選項(xiàng)列表在父選項(xiàng)下分組且子選項(xiàng)處于勾選態(tài)和未勾選態(tài)之間的情況。

切換開關(guān)代表允許用戶打開或關(guān)閉物體的物理開關(guān)，如燈的開關(guān)。

點(diǎn)擊切換開關(guān)需要兩個(gè)操作步驟：選擇和執(zhí)行，但復(fù)選框只有一個(gè)選項(xiàng)，其執(zhí)行通常需要另一個(gè)控件。

在選中復(fù)選框和切換開關(guān)控件之間時(shí)，最好關(guān)注使用的環(huán)境而不是其功能。

下面是一些在設(shè)計(jì)表單體驗(yàn)時(shí)決定這兩個(gè)控件之間的指導(dǎo)性原則和案例分享。

案例1：即時(shí)回復(fù)

使用切換開關(guān)時(shí)，

1. 應(yīng)用設(shè)置的立即響應(yīng)是無需明確操作的。

2. 設(shè)置需要打開/關(guān)閉或顯示/隱藏功能才能顯示結(jié)果。

3. 用戶需要執(zhí)行不需要審核或確認(rèn)的即時(shí)操作。

如果需要即時(shí)響應(yīng)的選項(xiàng)最好選擇使用切換開關(guān)

案例2：設(shè)置確認(rèn)

使用復(fù)選框時(shí)，

1. 應(yīng)用設(shè)置需要在提交之前由用戶確認(rèn)和審核。

2. 在顯示結(jié)果前，設(shè)置定義需要執(zhí)行提交、確定、下一步、等應(yīng)用操作。

3. 用戶必須執(zhí)行其他步驟才能使更改生效。

如果需要顯式操作來應(yīng)用設(shè)置，則首選復(fù)選框

案例3：多項(xiàng)選擇

使用復(fù)選框時(shí)，

1. 有多個(gè)選項(xiàng)可供使用，用戶必須從中選擇一個(gè)或多個(gè)選項(xiàng)。

2. 逐個(gè)單擊多個(gè)切換開關(guān)，每次單擊后等待查看結(jié)果是需要額外的時(shí)間。

在列表中選擇多個(gè)選項(xiàng)，復(fù)選框能提供更好的體驗(yàn)

案例4：不確定狀態(tài)

使用復(fù)選框時(shí)，

1. 當(dāng)多個(gè)子選項(xiàng)在父選項(xiàng)下分組時(shí)，需要中間選擇狀態(tài)。中間狀態(tài)表示在列表中選擇了多個(gè)子選項(xiàng)（但不是全部）。

使用復(fù)選框最好地顯示不確定狀態(tài)

案例5：清晰的視覺狀態(tài)

使用復(fù)選框時(shí)，

1. 有可能與切換開關(guān)的開/關(guān)狀態(tài)混淆。有時(shí)很難理解開關(guān)是顯示狀態(tài)還是動作。

2. 需要提供明確的勾選狀態(tài)或未勾選狀態(tài)。

有時(shí)切換開關(guān)不能清晰地顯示它是狀態(tài)還是動作

案例6：相關(guān)項(xiàng)目

使用復(fù)選框時(shí)，

1. 用戶必須從相關(guān)項(xiàng)目列表中選擇選項(xiàng)。

用復(fù)選框顯示要選擇列表中的相關(guān)項(xiàng)

使用時(shí)切換開關(guān)時(shí)，

1. 用戶切換獨(dú)立的功能或行為。

獨(dú)立項(xiàng)目可使用切換開關(guān)進(jìn)行選擇

案例7：單選項(xiàng)

使用復(fù)選框時(shí)，

1. 提供單個(gè)二進(jìn)制是/否選擇。

2. 只有選擇或取消選擇一個(gè)顯而易見的選項(xiàng)。

單個(gè)是/否選項(xiàng)更適用于復(fù)選框

使用切換開關(guān)時(shí)，

1. 需要單一選擇，并且您希望為開/關(guān)類型的決策提供兩個(gè)選項(xiàng)。

使用切換開關(guān)可以最好地理解單個(gè)開/關(guān)決定

結(jié)論

重要的是在表格中的正確位置提供正確的控件使其更加用戶友好。由于表單有很多很長的選項(xiàng)，若用戶必須進(jìn)行額外點(diǎn)擊才能填寫信息，對用戶來說會變得枯燥乏味。提供的案例和指南會幫助你決定在表單中添加控件時(shí)選擇復(fù)選框還是切換開關(guān)。

參考文獻(xiàn)

1. Control and Patterns《控制和模式》

2. When to Use a Switch or Checkbox《何時(shí)使用開關(guān)或復(fù)選框》

3. Selection Controls《選擇控制》

4. UX Design: Checkbox and Toggle in Forms《UX設(shè)計(jì)：表單中的復(fù)選框和切換》

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

前幾天帶大家學(xué)習(xí)了《牢記這9個(gè)排版設(shè)計(jì)要點(diǎn)，領(lǐng)導(dǎo)都無話可說了…》，今天給大家?guī)砼虐嬖O(shè)計(jì)要點(diǎn)第二彈。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

7月份的時(shí)候，有一位面粉問到了我關(guān)于統(tǒng)一店鋪視覺風(fēng)格的問題，我說等有機(jī)會了專門寫篇文章做分享，因?yàn)橐粌删湓捀揪驼f不清。

但是，今天我并不是專門只針對某個(gè)店鋪?zhàn)鲆曈X統(tǒng)一的設(shè)計(jì)分享，而是想從全局的角度去給大家闡述這個(gè)問題，畢竟，你得知道自己為什么需要做視覺統(tǒng)一，你才可能做好視覺統(tǒng)一，所以這個(gè)問題就不單單只是指店鋪了，而是關(guān)于品牌與用戶之間的問題。

因?yàn)椴还苁堑赇佉埠茫脚_也好，他們其實(shí)都是為賣貨服務(wù)的，它們與品牌產(chǎn)品之間其實(shí)都是合作關(guān)系，最終其實(shí)都是要鏈接到用戶身上的，而設(shè)計(jì)師要做的，歸根結(jié)底都是處理好它們與用戶之間的關(guān)系，幫助達(dá)成交易。

所以我將要分享的關(guān)于視覺統(tǒng)一的方法，就不單止是適用于店鋪了，而是品牌、平臺、店鋪都適合的。

按照慣例，我還是先給大家列出一個(gè)提綱，方便大家理解：

• 為什么需要統(tǒng)一視覺風(fēng)格？
• 統(tǒng)一視覺風(fēng)格的方法有哪些？
• 統(tǒng)一視覺風(fēng)格的注意事項(xiàng)及總結(jié)

接下來我就逐條展開給大家說一下這其中的奧秘吧！

一、為什么需要統(tǒng)一視覺風(fēng)格？

當(dāng)我們提到統(tǒng)一視覺風(fēng)格這幾個(gè)字，不知道大家能聯(lián)想到什么？或者能聯(lián)想到什么畫面什么公司什么產(chǎn)品呢？在回答這些問題之前，我還是先給大家舉一些例子也許你就明白了。

比如前幾天我無意中打開了淘寶app，然后剛好看到了2018年淘寶新勢力周的一系列賣場頁面：

大家知道像淘寶天貓京東這樣的平臺，每年各種賣場促銷活動是很多的，而且每一場活動都需要容納成千上萬的商家和數(shù)以萬計(jì)的商品，但是，所有這些東西都卻只是通過一塊液晶顯示屏展現(xiàn)在消費(fèi)者面前，那么這時(shí)候就是我們設(shè)計(jì)師發(fā)揮作用的時(shí)候啦。

這時(shí)候設(shè)計(jì)師需要做的事情就包括以下幾個(gè)方面：

• 要保證活動頁面里能把所有東西都容納進(jìn)去；
• 要保證頁面是方便顧客瀏覽的，所以要有規(guī)律可循；
• 要保證頁面是可以吸引顧客一直逛下去的，所以頁面有規(guī)律的同時(shí)又要有所差異，視覺上不枯燥，不然會視覺疲勞；
• 要在顧客心里和腦袋里建立某種印象，找到存在感，以免被顧客遺忘；
• 既要保證平臺活動整體的調(diào)性和諧性，又要為不同的商家提供最恰當(dāng)?shù)恼故緳C(jī)會，所以視覺表現(xiàn)形式要合理；
• ……

總而言之就是要權(quán)衡平臺、商家、顧客三者之間的關(guān)系和利益：顧客買的爽，商家賣的爽，平臺名利雙收。

那么這時(shí)候保持頁面視覺統(tǒng)一就很有必要了，因?yàn)橐曈X統(tǒng)一就有以下非常重要的幾點(diǎn)作用：

1. 強(qiáng)化品牌或事件在用戶心中的印象

因?yàn)閹缀跛械钠放贫夹枰龅囊患虑榫褪钦碱I(lǐng)用戶心智，就是要讓用戶在眾多的品牌選擇里有自己的一席之地，不要把自己遺忘了，所以它需要不斷的出現(xiàn)，保持存在感。

一個(gè)活動每年去做，一個(gè)電影每年都出續(xù)集，一個(gè)產(chǎn)品每年都會出不同的系列等等，都是同一個(gè)道理，都是在強(qiáng)化自己在用戶心目中的印象，保持存在感。

提到這個(gè)，我平時(shí)每次搞活動都會提醒大家不要經(jīng)常換頭像或微信昵稱，我讓大家多來留言其實(shí)就是這個(gè)道理，因?yàn)槲颐刻煲鎸Φ哪敲炊嗳说念^像和名字，如果你長期不換頭像并且經(jīng)常來留言，那我肯定會記得你；但如果你經(jīng)常換頭像，并且留言次數(shù)還少，那我鐵定就不記得你了，因?yàn)槟銢]有強(qiáng)化一個(gè)符號在我的腦海里啊，明白了吧。

2. 讓事件變得有序有規(guī)律可循

就像我們辦運(yùn)動會，不同的隊(duì)穿不同的衣服、喊不同的口號等等，即便是隊(duì)里的人走散了，你看一下隊(duì)服或?qū)Ψ胶暗目谔柲憔湍鼙鎰e出是自己人還是別人了是吧。

再比如你去超市貨架上拿飲料，正是因?yàn)檫@種視覺統(tǒng)一的作用，所以你才能很好的辨認(rèn)出自己要買的品牌產(chǎn)品，而不至于拿錯(cuò)了，反過來對于品牌也一樣，自己內(nèi)部的產(chǎn)品之間是有統(tǒng)一的視覺形象的，同時(shí)又是跟其他品牌相區(qū)分開來的，所以才可以保證顧客不買錯(cuò)。

這些道理運(yùn)用到頁面設(shè)計(jì)上也是一樣的，讓顧客方便逛，同時(shí)別逛錯(cuò)了地方。

3. 提高相關(guān)人員的可執(zhí)行性

因?yàn)橄襁@種大型的活動，需要大量的人力投入，就拿設(shè)計(jì)師來說，一般都是某個(gè)主設(shè)計(jì)師出來一個(gè)設(shè)計(jì)方案，然后這個(gè)方案不僅要能達(dá)到以上提到的要求，還必須要是能保證其他設(shè)計(jì)師能夠以這個(gè)設(shè)計(jì)方案的模版，去執(zhí)行剩余的幾十上百個(gè)頁面，工作量非常之大。

二、統(tǒng)一視覺風(fēng)格的方法有哪些？

前面我們講到了統(tǒng)一視覺風(fēng)格和形象的必要性和重要性，那么接下來就是大家最關(guān)心的如何統(tǒng)一視覺形象的問題了，所以我依舊會從好幾個(gè)方面以舉例的方式給大家做講解，你就明白了。

不過在這之前，我還是拿一張圖給大家看，還是淘寶新勢力的這張圖：

你在這個(gè)畫面里看到了什么？這個(gè)視覺畫面里都包含了哪些東西？

嗯，我看到了模特、文字、圖案、各種顏色，還有布局、排版、以及所有上面的內(nèi)容匯聚在一起所組成的一種風(fēng)格。

那所謂統(tǒng)一頁面的視覺風(fēng)格，也就是說只要保證以上所有提到的這些東西，我在另外的頁面里也至少能找到一項(xiàng)是類似的，那我們就很容易將它們視為是具有共通性的頁面了，也就達(dá)到了視覺風(fēng)格統(tǒng)一的目的。

以下面這幾個(gè)淘寶新勢力分會場的頁面為例：

你應(yīng)該注意到了，這些頁面雖然顏色不一樣，但整體看視覺卻非常統(tǒng)一，同時(shí)細(xì)看又有些差別，其原因就在于以下幾個(gè)方面：

• 不同的頁面對應(yīng)的色相不同，但是明度和飽和度是近似的；
• 不同的頁面對應(yīng)的文案不同，但是文案的字體樣式、布局排版是一樣的；
• 不同的頁面對應(yīng)的氛圍點(diǎn)綴元素不同，但是氛圍元素的風(fēng)格、質(zhì)感、手法等等是類似的；
• 不同的頁面對應(yīng)的點(diǎn)綴元素不同，但是每一個(gè)頁面里的點(diǎn)綴元素都是跟相應(yīng)的主題、模特、文案等等相呼應(yīng)的。

所以你才會有這些頁面具有統(tǒng)一的視覺風(fēng)格的印象，包括其他會場的頁面，雖然做了一些小調(diào)整，但是依然可以看得出來是統(tǒng)一的視覺風(fēng)格：

因?yàn)檫@里運(yùn)用到了跟上面同樣的原理。

不過這種手繪風(fēng)格與模特相結(jié)合的設(shè)計(jì)形式我以前也給大家分析過，我這里就不深入舉例了，大家可以看看圣保羅藝術(shù)家 Ana Strumpf 為很多時(shí)尚雜志所做的插畫封面就能有所體會：

這種手法給人俏皮、時(shí)尚、新潮的感覺，非常適合追求趣味個(gè)性而又不失品味的心態(tài)年輕的群體，所以這一次的淘寶新勢力周大概也是出于這種新潮人群定位考量，才會做這種形式的設(shè)計(jì)吧。

而且這種扁平質(zhì)感半插畫性質(zhì)的設(shè)計(jì)形式幾乎是很難過時(shí)的，非常前衛(wèi)和耐看。

所以到這里你應(yīng)該就好理解了，一般來說，我們有以下5個(gè)途徑可以達(dá)到統(tǒng)一視覺風(fēng)格的途徑。

1. 提煉某種風(fēng)格，重復(fù)使用

比如你看今天淘寶新勢力的一些會場頁面，視覺風(fēng)格就非常統(tǒng)一，一眼就看出是實(shí)體模特＋手繪圖形相結(jié)合的風(fēng)格形式，在模特臉部做一些圖案輪廓線，然后模特周圍點(diǎn)綴一些手繪圖案做氛圍，有點(diǎn)達(dá)達(dá)主義的感覺。

2. 建立某種品牌色，重復(fù)使用

當(dāng)我們重復(fù)看到某種顏色跟某個(gè)品牌或產(chǎn)品同時(shí)出現(xiàn)，時(shí)間久了就會自然而然的把這個(gè)顏色和品牌聯(lián)系在一起，從而產(chǎn)生條件反射，只要看到某個(gè)顏色立馬就會想到這個(gè)品牌，只要聽到這個(gè)品牌的名字腦海里就會出現(xiàn)某種顏色。

這其實(shí)就是通過建立某種品牌色達(dá)到視覺風(fēng)格統(tǒng)一的目的從而讓品牌在用戶心里建立起了這種色彩印象。

比如蒂芙尼藍(lán)：

所以，任何頁面，任何場所，任何產(chǎn)品上只要出現(xiàn)了這個(gè)蒂芙尼藍(lán)色，用戶都會默認(rèn)他們是相關(guān)聯(lián)的：

再比如，可口可樂紅：

當(dāng)然了，色彩種類那么多，有的品牌或店鋪的品牌色并不是單一的，而是多彩的，這都沒有什么限定。

那這個(gè)如果是運(yùn)用到頁面設(shè)計(jì)或 Banner 設(shè)計(jì)里的話，這種品牌色是一定都需要出現(xiàn)在畫面里的，至于色彩比例就因需要而定了，而且今后只需要出現(xiàn)這種顏色，就能反過來達(dá)到視覺統(tǒng)一的目的。

3. 提煉某種視覺元素，重復(fù)使用

所謂視覺元素，其實(shí)就是指一切你能看到的想到的元素，所以這里的視覺元素也是指多個(gè)方面的，比如某種圖案圖形、某個(gè)物件、某個(gè)文字、產(chǎn)品、模特、logo 等等其實(shí)都算是視覺元素。

那說到視覺元素的運(yùn)用，我腦海里印象比較深刻的2個(gè)品牌就是初語和天貓，前者是店鋪，后者是平臺。

我們可以看看品牌升級以前的初語，它有一個(gè)讓人印象非常深刻的視覺元素，就是她的模特和眼部的妝容：

所有的模特都保持了一致的妝容特點(diǎn)，氣質(zhì)也是類似的，當(dāng)然你也會看到很多他的設(shè)計(jì)都是會與藝術(shù)名畫相結(jié)合，這些都是它的特點(diǎn)，并且加以充實(shí)用，就給人建立了很深刻的印象，你只要看到這種模特妝容或者畫面，你就知道：「噢沒錯(cuò)了，這是初語」。

那天貓也是一樣的，每年雙十一這個(gè)天貓頭的元素就會以各種形式露面，而且不止是在雙十一，可以說是相當(dāng)強(qiáng)大的視覺符號了，你想忘都忘不掉它：

2017年天貓雙十一宣傳海報(bào)

△ Budweiser 百威

△ GUERLAIN 嬌蘭

△ Beats

這種通過某種視覺符號來統(tǒng)一視覺形象，重復(fù)使用從而加深用戶印象的方式在很多其他地方都有用到，比如每一個(gè)蘋果手機(jī)，每一次開機(jī)，都會出現(xiàn)同樣的開機(jī)畫面：白底＋黑色的蘋果 logo。

4. 打造品牌專屬的IP或?qū)櫸镄蜗螅⒅貜?fù)使用

這就跟品牌給自己找了個(gè)的代言人一樣的效果，只要這個(gè)形象出現(xiàn)了，你就知道這個(gè)是xxx品牌。

比如店鋪，三只松鼠就是這么干的：幾乎所有的頁面里都會出現(xiàn)三只松鼠。

比如平臺，京東有狗，天貓有貓，蘇寧也有獅子等等，電商界儼然是一個(gè)動物世界。

再比如珠寶品牌，卡地亞Cartier 有獵豹：

這只獵豹經(jīng)常出現(xiàn)在各種品牌宣傳廣告里，或者制作成各種首飾，用戶看到獵豹就會想到卡地亞。

5. 提煉某一句口號，重復(fù)使用

既然我們前面提到了視覺元素，那么文案或口號其實(shí)也是畫面里的其中一種視覺元素，所以我們再以2017年天貓雙十一宣傳海報(bào)舉例：

△ Budweiser 百威

△ GUERLAIN 嬌蘭

△ Beats

這里面的「xxx祝你雙11快樂」 「天貓雙11全球購狂歡節(jié)」等等口號文案，重復(fù)使用，其實(shí)就起到了這種畫面視覺統(tǒng)一的作用。

而且這種方式也在很多地方有運(yùn)用到啦，比如你看的很多動漫、電視劇，總會重復(fù)出現(xiàn)一些臺詞，嗯，說到這里，我想到了小時(shí)候看的一個(gè)動畫片《寵物小精靈》，每集火箭隊(duì)出場臺詞都是這幾句：

然后每集結(jié)束的時(shí)候總會有那么一幕，喵喵被拋到空中然后喊出一句臺詞：「我們還會回來噠～」。

你看這種重復(fù)口號的威力多么可怕啊，一二十年了還讓用戶印象深刻呢。

不過，其實(shí)最后列舉的這三點(diǎn)其實(shí)都可以稱作是視覺元素的重復(fù)使用啦，至于原因我也在前面作了解釋，而且以上所有的方式其實(shí)都是可以結(jié)合運(yùn)用的，并不是孤立存在的。

還有，大家注意到了嗎？我在每一條后面都加了4個(gè)字「重復(fù)使用」，因?yàn)榫退隳阌辛俗约禾囟ǖ囊曈X元素、有屬于自己的寵物形象、有自己的品牌色、有自己的風(fēng)格等等，但是你壓根就不露面，你還特別低調(diào)藏著掖著不展示自己，那誰還記得你啊。

說到這個(gè)，我想到了異地戀之所以容易失敗，不也是差不多道理嗎？你和男/女朋友三五年不見面沒有關(guān)系，沒法手拉手親親嘴也沒有關(guān)系，但是如果你們壓根就不聯(lián)系，不出現(xiàn)在彼此的視線里，那感情自然會淡的呀，等于是白白給了別人可乘之機(jī)。

所以我一直都覺得品牌和用戶之間其實(shí)也是一樣的道理，就是在「談戀愛」，而不是做生意，至于你們之間是談的什么類型的戀愛，那就看自己本事了。

總結(jié)

之所以我們需要做視覺統(tǒng)一，其實(shí)就是為了強(qiáng)化我們在用戶心理的印象，讓他們記住我們，記住我們是很有規(guī)范的，靠譜的，可信賴的品牌印象等等，并且還要重復(fù)的出現(xiàn)在用戶的視野里，那怎么出現(xiàn)呢？方法就在我上面列舉的幾條內(nèi)容里啦。

當(dāng)然，你也得控制一個(gè)度，不要過份的運(yùn)用這些方法，不然會招致用戶反感的。

想想有的男孩子可以成功討女孩子歡心，而有的卻被女孩子嫌棄的不行，知道原因了嗎？道理都是一樣的啊。

你看下面這些世界杯期間的廣告，畫面 low，口號 low，重復(fù)次數(shù)又很多，用戶記住是記住你了，但真的挺煩的。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

最近《創(chuàng)造101》讓 pick 一詞大火，大家都在討論自己 pick 了哪位小姐姐，pick 到一定地步的人被稱為鐵粉，極端失去理智的叫「腦殘粉」，pick 讓我想到了上癮這個(gè)詞。上癮一詞在我們生活中一直屬于一個(gè)稍帶貶義且指責(zé)的詞，兒時(shí)媽媽會指責(zé)你吃糖上癮，玩游戲上癮，長大后小姐姐們會被說購物上癮，甚至研究表明整容也會上癮。最近拜讀了美國斯坦福大學(xué)任教的尼爾·埃亞爾寫的《上癮》一書，感觸非常深。如果從服務(wù)提供者角度看，上癮的指責(zé)是不是也說明你的產(chǎn)品解決了用戶的痛點(diǎn)，你為用戶帶來了情感滿足呢？

目錄：

• 前言（上癮模型-pick模型）
• QQ空間小游戲?yàn)榘咐?xiàng)目介紹&目標(biāo)人群）
• 觸發(fā)用戶＆抓住動機(jī)
• 付出行動
• 情感撩動＆情感滿足
• 持續(xù)投入
• Pick me

一、前言

尼爾·埃亞爾寫的《上癮》中提出「上癮模型」的概念，其中分為四大步驟：觸發(fā)-行動-多變的犒賞-投入。

這四個(gè)步驟是一個(gè)循環(huán)的過程，當(dāng)用戶越沉迷于這個(gè)循環(huán)，那說明你的產(chǎn)品對用戶的吸引力越強(qiáng)，反之當(dāng)用戶中斷了這個(gè)循環(huán)，作為產(chǎn)品設(shè)計(jì)師就需要考慮我們在哪一步出現(xiàn)了問題，用戶為何拋棄了你的產(chǎn)品，或者說用戶是怎么「戒掉」你的產(chǎn)品。這其中的原因可能會很多樣，比如用戶找到了更好的撩動自己情感的產(chǎn)品，又或者你沒有達(dá)到用戶的預(yù)期。

那么怎么樣才能讓用戶在有多個(gè)選擇時(shí)，選擇 pick 你呢？我試著把「上癮模型」結(jié)合認(rèn)知心理學(xué)中的「心智模型」，系統(tǒng)性的提出<鎖定目標(biāo)用戶-觸發(fā)用戶-抓住動機(jī)-付出行動-情感撩動-情感滿足-持續(xù)投入-pick> pick模型。

二、QQ空間小游戲?yàn)榘咐?xiàng)目介紹&目標(biāo)人群）

空間小游戲平臺是國內(nèi)領(lǐng)先的 H5 游戲平臺，通過接入外部優(yōu)質(zhì) H5 游戲開發(fā)商來提供角色扮演、休閑、策略、劇情、棋牌、雙人pk 等六大類別的輕量小游戲來滿足用戶碎片化時(shí)間娛樂的需求。

• 目標(biāo)人群：手Q所有用戶都是我們既定的目標(biāo)人群，平臺游戲類型能滿足不同年齡階層的用戶需求。
• 用戶場景：個(gè)人碎片化時(shí)間， 好友之間有互動娛樂需求時(shí)。

平臺分為4個(gè) Tab，每個(gè) Tab 都滿足了用戶相應(yīng)的需求。

• 首頁：承載所有平臺游戲，有分類讓用戶去找喜歡類型的游戲，也根據(jù)智能算法進(jìn)行游戲推薦。
• 社區(qū)：提供一個(gè)讓玩家能互相交流的平臺。
• 禮包：給用戶提供游戲福利，加強(qiáng)對平臺依賴性。
• 我的：承載 VIP 體系和積分任務(wù)體系。

以下我想通過空間小游戲?yàn)榘噶?，講解 pick模型在實(shí)際運(yùn)用中的指導(dǎo)意義。

三、觸發(fā)用戶&抓住動機(jī)

觸發(fā)分為內(nèi)部觸發(fā)和外部觸發(fā)，觸發(fā)要顯而易見，行為要易于實(shí)施。

1. 外部觸發(fā)

空間小游戲作為依附于手Q空間的一個(gè)入口級平臺，我們可以很好的利用好友關(guān)系鏈的傳播性，這也就是觸發(fā)模型中的外部觸發(fā)——人際型觸發(fā)。由于平臺的關(guān)系鏈屬性，所以我們會把人際型觸發(fā)當(dāng)做外部觸發(fā)的核心觸發(fā)方式，因?yàn)楹糜阎g的觸發(fā)是相對其他觸發(fā)方式更加穩(wěn)固值得信賴的，當(dāng)然付費(fèi)推廣型觸發(fā)也是在產(chǎn)品冷啟動時(shí)期常用的方式。人際型觸發(fā)我們細(xì)分為自主型和被動型，自主的主要是用戶通過分享游戲或者邀請好友的方式，被動的就是平臺通過用戶在游戲內(nèi)的信息觸發(fā)給他的好友。

人際型觸發(fā)（主動型&被動型）是外部觸發(fā)的核心觸發(fā)方式。

自主型人際觸發(fā)-邀請好友來平臺玩游戲，通過展示游戲特點(diǎn)吸引用戶點(diǎn)擊進(jìn)入，這就是典型的自主型人際觸發(fā)方式，也是最容易形成病毒傳播的方式。

被動型人際觸發(fā)-在不透露隱私的前提下，通過好友在游戲內(nèi)的信息吸引用戶的關(guān)注進(jìn)行觸發(fā)，這種觸發(fā)一般會使用在廣告位和推薦位模塊上，這樣能盡可能的提高用戶的安全感和認(rèn)可度。

2. 內(nèi)部觸發(fā)

也就是用戶自主的觸發(fā)，情緒觸發(fā)是主要的內(nèi)部觸發(fā)方式，尤其是負(fù)面情緒，當(dāng)人厭倦，孤獨(dú)，沮喪或者游離不定的時(shí)候會讓我們體會到輕微的痛楚和憤怒，我們在內(nèi)部觸發(fā)這里需要抓住用戶孤獨(dú)，無聊的情緒波動。當(dāng)用戶無聊的時(shí)候，如果產(chǎn)品能快速的出現(xiàn)到用戶眼前，并能消除用戶的負(fù)面情緒，那么這就能讓用戶產(chǎn)生記憶點(diǎn)，每當(dāng)這種情緒襲來的時(shí)候，用戶總能想到你。

通過展示游戲的熱度信息來吸引用戶關(guān)注，在用戶無目的性刷空間的時(shí)候，通過推薦熱門游戲相關(guān)數(shù)據(jù)，然后與用戶的孤獨(dú)情緒產(chǎn)生碰撞。

總結(jié)：觸發(fā)是讓產(chǎn)品賣出去的第一步，而有效的觸發(fā)才是成敗的關(guān)鍵點(diǎn)。有時(shí)候內(nèi)部觸發(fā)和外部觸發(fā)并不是獨(dú)立存在的，在不同的場景下兩種方式是可以做到相互結(jié)合的。觸發(fā)方式千萬種，最適合自己產(chǎn)品的觸發(fā)方式才是最好的。

四、付出行動

人在做出行為時(shí)有兩個(gè)基本動因，一個(gè)是該行為簡單易行，二是行為主體有這個(gè)主觀意愿。

上一步我們已經(jīng)通過各種方式觸發(fā)了用戶，這個(gè)時(shí)候就需要用戶能做出行動。在我們空間小游戲這個(gè)案例里，用戶點(diǎn)擊游戲 logo 時(shí)，我們有過一個(gè)很大分歧，那就是用戶在平臺或者廣告位上看到游戲 logo 點(diǎn)擊后，是直接進(jìn)入游戲還是需要一個(gè)游戲詳情頁去介紹游戲。

兩種方式都有各自的優(yōu)勢，即點(diǎn)即玩能快速的讓用戶進(jìn)入游戲，能提高轉(zhuǎn)化率，游戲詳情頁能讓用戶更好的了解游戲內(nèi)容，再進(jìn)一步確認(rèn)是否去玩這個(gè)游戲。

針對這兩個(gè)方案，我們最終選擇前者-即點(diǎn)即玩，因?yàn)槲覀兛紤]到 H5 游戲都是屬于比較輕量的游戲，所以我們希望用戶能形成一種認(rèn)知，平臺內(nèi)所有游戲是輕量的，便捷的。所以在面臨方案選擇時(shí)，回頭看看產(chǎn)品的調(diào)性與特點(diǎn)，可能能幫助我們做抉擇。

而針對已經(jīng)玩過平臺內(nèi)游戲的老用戶，我們必須能讓用戶在下次想開啟游戲時(shí)快速的找到玩過的游戲。根據(jù)后臺數(shù)據(jù)我們的用戶平均在玩的游戲數(shù)量是2.9個(gè)左右。最后我們選擇在小游戲首頁頂部位置設(shè)立一個(gè)最近在玩模塊，首屏展示三個(gè)，可滑動和查看更多，希望能讓用戶快速的找到玩過的游戲。

所以觸發(fā)是有分新用戶和老用戶的區(qū)別的，針對新用戶我們更多的是需要拿內(nèi)容去吸引他們，而老用戶則需要能讓他們快速的找到自己已經(jīng)玩過的游戲。所以觸發(fā)要簡單易行，主觀意愿是需要我們?nèi)ヒ龑?dǎo)和吸引的。

五、情感撩動&情感滿足

優(yōu)秀的游戲總是能持續(xù)的撩動用戶的情感，讓人在游戲中得到滿足感，成就感。我們平臺所有游戲都是第三方公司提供，我們沒有權(quán)限對游戲內(nèi)容進(jìn)行過度的參與，我們只能盡可能的把最優(yōu)質(zhì)的游戲篩選進(jìn)來，所以在情感撩動和滿足上我們不能完全依賴開發(fā)商的游戲質(zhì)量和設(shè)定。所以必須在我們平臺的體驗(yàn)上給用戶一些噱頭，一些小目標(biāo)，讓用戶在平臺上也能得到情感滿足。只有這樣，用戶才能對平臺產(chǎn)生記憶點(diǎn)和依賴，這才是我們想要達(dá)到的目標(biāo)。

從平臺的角度我們希望通過<社交屬性，獎(jiǎng)勵(lì)機(jī)制>兩個(gè)方向去撩動用戶的情感，用戶可以在社交里面找到榮譽(yù)感（曬自己的游戲等級和戰(zhàn)績）,也可以在多變的獎(jiǎng)勵(lì)機(jī)制里面不停的完成一個(gè)又一個(gè)的任務(wù)而獲取相應(yīng)的獎(jiǎng)勵(lì)。

1. 社交屬性

游戲社區(qū)，讓充值玩家可以有地方炫耀自己獲得成就感（名稱附帶游戲等級和榮譽(yù)），讓普通玩家也能通過社區(qū)了解更多游戲攻略，甚至可以在這里與陌生人交友（點(diǎn)擊頭像可跳轉(zhuǎn)手Q資料卡）。

2. 獎(jiǎng)勵(lì)機(jī)制

• 游戲禮包 tab，通過發(fā)放平臺特殊禮包福利，讓用戶養(yǎng)成習(xí)慣，每日來平臺領(lǐng)取禮包再去玩游戲。
• 平臺任務(wù)（簽到，轉(zhuǎn)發(fā)，進(jìn)入游戲等）可獲取積分，積分可以到兌換商城換取游戲金幣和抽獎(jiǎng)，通過積分抽獎(jiǎng)能調(diào)起用戶的心理起伏，讓用戶樂此不彼的投入到獲取積分當(dāng)中。
• 首沖優(yōu)惠，充值抵扣券，通過優(yōu)惠的方式引導(dǎo)用戶充值，研究表明當(dāng)用戶首沖后，之后充值的概率會提高很多。

總結(jié)：多變的福利獎(jiǎng)賞會使大腦中的伏隔核更加活躍，并且會提升神經(jīng)傳遞多巴胺的含量，促使我們情感產(chǎn)生起伏，然后一旦情感被滿足，我們將會持續(xù)的投入下去，比如更多的時(shí)間，更多的金錢。

六、持續(xù)投入

人為什么會進(jìn)行投入，投入行為背后的大思路是利用用戶的認(rèn)知，就是用戶會認(rèn)為投入越多，服務(wù)越好，得到的情感滿足越豐富。當(dāng)然事實(shí)也的確是這樣的，投入的階段我們需要讓用戶對未來的獎(jiǎng)賞（心理，福利）抱有強(qiáng)烈的期待，這樣才能讓用戶持續(xù)的投入。

比如我們在設(shè)計(jì) VIP 體系時(shí)，隨著 VIP 等級的提升，用戶所擁有的特權(quán)就會不斷增加，通過特權(quán)的吸引，當(dāng)用戶在游戲體驗(yàn)中發(fā)現(xiàn)了比較困難的任務(wù)時(shí)，我們就會提醒用戶是否去升級 VIP，讓通關(guān)更輕松，用戶將很難抵擋這種特權(quán)滿足。

又比如我們設(shè)定每周三為積分翻倍日，用戶可以得到更多的積分，我們不斷豐富積分商城的兌換物品，持續(xù)吸引用戶的注意，讓用戶不斷去期待新獎(jiǎng)勵(lì)。

七、PICK ME

我理解的 pick 是一種充滿信任感的選擇，這種選擇會讓用戶去把產(chǎn)品分享給自己的好友，會在社交平臺上討論產(chǎn)品。但是能讓用戶 pick 你，并不是一件簡單的事情，就好比你 pick 創(chuàng)造101小姐姐時(shí)，你可能會關(guān)注小姐姐的樣貌、才藝、背景、人設(shè)，這些都是影響你產(chǎn)生認(rèn)同感重要的因素。

我們做產(chǎn)品何嘗不是這樣呢，如果你的產(chǎn)品沒有解決用戶的痛點(diǎn)，沒有讓他產(chǎn)生愉悅的情緒，你就會被「淘汰」。用戶的投票都是在符合自己心智模型的基礎(chǔ)上做出的選擇，pick 模型的設(shè)計(jì)目的就是將用戶遇到的問題（情感需求）和我們作為設(shè)計(jì)者的解決方案頻繁的聯(lián)系到一起。

總結(jié)

讓用戶對產(chǎn)品產(chǎn)生習(xí)慣，是我們的終極目標(biāo)。而如何讓用戶產(chǎn)生使用習(xí)慣，不是一朝一夕能達(dá)成的，這需要產(chǎn)品不斷的迭代優(yōu)化，讓你的產(chǎn)品不斷的解決用戶變化多端的需求，那么忠誠就隨之而來了。我們回顧一下 pick 理論，從更簡單理解的角度來看，可以分為<觸發(fā)-持續(xù)解決問題-養(yǎng)成習(xí)慣>，這里的難點(diǎn)屬于第二步，當(dāng)你的產(chǎn)品能不斷解決用戶的問題，養(yǎng)成習(xí)慣只是水到渠成的結(jié)果罷了。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

常見的APP 圖文布局有哪些？不同按鈕有哪些用法？今天這篇總結(jié)幫新手認(rèn)識基礎(chǔ)知識，趕緊來收！

一、圖文布局

用戶所關(guān)注的內(nèi)容以及不同的業(yè)務(wù)訴求決定信息的優(yōu)先級排布，所以沒有通用的布局，只有適合的布局。

1. 上圖下文

上圖下文更強(qiáng)調(diào)了圖片的重要性，以「見」這個(gè)屬性為優(yōu)先，上圖下文需要注意的是圖片高度過高會嚴(yán)重影響版面效率，而一個(gè)具有商業(yè)化目的的產(chǎn)品對首頁的版面效率異?？粗?，同樣對圖片的質(zhì)量要求也甚高。通常這樣的 feed流布局更抓人眼球。

如果確實(shí)需要以大圖+文的上下方式來布局，盡量找到版面的平衡點(diǎn)，考慮圖片與文字之間想要給用戶傳達(dá)的關(guān)系和優(yōu)先級圖片的使用盡量使用黃金比例做展示，例如4:3，2:1，16:9等。

宮格排列式的上圖下文能夠極大的提升版面效率，一般更多用于電商平臺，在首頁將某個(gè)模塊的優(yōu)質(zhì)商品進(jìn)行透出，提高轉(zhuǎn)化和流量。缺點(diǎn)是缺乏信息完整度，在布局時(shí)需要考慮更多因設(shè)備、極限值帶來的不同狀況的問題。

可以看出，嚴(yán)選將金額跟在標(biāo)題后面，而非固定位置，這樣做的好處是將標(biāo)題和金額關(guān)聯(lián)度更高，形成一致性，缺點(diǎn)是布局上顯得層次不齊影響閱讀效率。通常這樣的排版會根據(jù)業(yè)務(wù)需要來選擇展示一行或多行文字極限。但由于版面效率它不得不只給了兩行的極限高度。

2. 左圖右文

左圖右文形式的排版應(yīng)該也算是用的非常多了。其實(shí)大家會經(jīng)常把它和左文右邊圖進(jìn)行對比。但無論是左圖還是右圖，在這樣的布局中我們首先就要做好圖和文的占比。顯示在外面的圖片通常是選取了詳情中的圖片來進(jìn)行展示，否則就浪費(fèi)了比較多的人力資源去重新配圖了得不償失。同樣和圖片搭配的信息字段此時(shí)就顯得極為重要。

菜鳥裹裹其實(shí)將標(biāo)題的優(yōu)先級又提升到了和圖片一樣的層次。圖片本身給人的視覺沖擊會更強(qiáng)所以即便圖片放在標(biāo)題下面，也不會弱。

方形縮略圖是最常用的形式，不至于太窄也不至于太寬，對于右側(cè)信息的布局也顯得更游刃有余。橫形的圖片會讓右側(cè)的文字顯示空間壓縮的厲害，通常在視頻縮略圖會用到，但圖片對整個(gè)頁面的氛圍感會更好。豎形的圖片讓右側(cè)信息有更多的發(fā)揮空間，同時(shí)版面的留白也更大，但是如果右側(cè)信息過少，則會讓頁面有些單調(diào)和不完整。

左文右圖就不再贅述，現(xiàn)在大多數(shù)左文右圖在咨詢和旅游產(chǎn)品中使用的更多，因?yàn)橛脩粼跒g覽這樣的列表信息時(shí)圖片無法在第一眼被識別出具體內(nèi)容，而對于這樣的產(chǎn)品來說無疑是低效的。當(dāng)然很多時(shí)候沒有那么多時(shí)間去驗(yàn)證如此設(shè)計(jì)對于用戶來說是否真的能提高瀏覽效率，提升了多少滿意度。我們可以簡單的理解，如果說的是一件事，那么文字比圖片更重要。如果說的是一樣物品、人，那么左邊放圖更合適，體會一下。

3. 圖文混排

為了使信息傳達(dá)的更一致，通常如果沒有大量的文字信息則我們會選擇文字與圖片混排的形式，為了適應(yīng)多變的圖片，我們會在文字底部加一層黑色半透明蒙層或者給文字加一些無傷大雅的陰影。前提是文字信息不會太多而干擾到圖片內(nèi)容的展示和傳達(dá)。

二、按鈕解析

其實(shí)嚴(yán)格意義上來說，能通過點(diǎn)擊觸發(fā)交互動作的控件我們都能將它定義為按鈕，但是如果這樣定義那就沒的玩了，所以我們將移動端的按鈕定義為具有引導(dǎo)性并且可點(diǎn)擊的控件。

例如京東金融查看歷史支取利率后的箭頭，其實(shí)這才是這一行的引導(dǎo)按鈕，但是為了更好的觸發(fā)點(diǎn)擊通常會將整一行都作為點(diǎn)擊熱區(qū)。

所以為了區(qū)分不同的按鈕的用法，我這邊將按鈕進(jìn)行了一個(gè)分類：主線場景、支線場景、異常場景。

主線場景下的按鈕通常會使用的比較大，為了強(qiáng)化和引導(dǎo)核心的任務(wù)流程，所以該按鈕應(yīng)該是最醒目的。

樣式通常會分為通欄和非通欄，而通欄則是從 MD 設(shè)計(jì)中衍生出來的一種形式。

1. 主線場景

要注意的是，通欄和非通欄按鈕我們到底該如何選擇，首先我們需要知道這樣的按鈕都是放在頁面的底部固定顯示，不會隨著內(nèi)容滾動，如果選擇通欄按鈕，則更適合可滾動的頁面容器，也就是說一頁中內(nèi)容較多在一屏幕中無法顯示全的頁面，優(yōu)點(diǎn)是按鈕的優(yōu)先級會很高，但是在 iphone X 這樣的設(shè)備中，適配會糾結(jié)一些。

而如果選擇不通欄的按鈕，我們要考慮的是頁面內(nèi)容是否很長，如果很長需要在按鈕底部加一層白色背景，盡量不要讓內(nèi)容穿過按鈕，因?yàn)榈撞科鋵?shí)并不是內(nèi)容最好的顯示區(qū)域。同樣非通欄的置底按鈕相較于通欄按鈕層級就顯得沒那么高。

所以我們會發(fā)現(xiàn)考拉和淘寶雖然有樣式區(qū)別，但實(shí)際上都相當(dāng)于在底部有一層內(nèi)容遮蓋的部分。

2. 支線場景

再來看支線場景的按鈕，支線場景的按鈕一般能夠分為：圖標(biāo)、文字、圖標(biāo)+文字、框+圖文字+圖標(biāo)這樣幾種類型。

圖標(biāo)就不用說了本身就具有可操作的屬性，也有修飾的屬性，關(guān)鍵看他的場景和布局位置。例如淘寶的 tab 標(biāo)簽上的定位圖標(biāo)，就是一種修飾型的圖標(biāo)，為了更好理解這里的定位是一種樓層定位，隨著頁面滑動到不同的業(yè)務(wù)模塊而會跳動，這里并不是一個(gè) tab 的功能，不能算是切換頁面。

如果把定位按鈕單獨(dú)拿出來放在導(dǎo)航欄，或者頁面右側(cè)的空白處，我們就會覺得他是一個(gè)可點(diǎn)擊并能夠進(jìn)行跳轉(zhuǎn)的按鈕。

包括「查看全部」這樣的文字，即便不加箭頭我們也會嘗試去點(diǎn)擊，高亮顯示就更加明顯，用戶已經(jīng)形成這樣的意識，但是像上面的規(guī)格和參數(shù)如果不加箭頭會讓用戶覺得這里并沒有可操作的東西就不去點(diǎn)擊了。所以我們總結(jié)一下就是支線按鈕的使用場景較為復(fù)雜，需要通過參考上下文的情景來做不同樣式的選擇。

不過支線流程畢竟是支線流程，為了不打擾主線流程，盡量不要將支線流程的按鈕做的過分明顯。例如淘寶詳情頁中的進(jìn)店逛逛，其實(shí)這個(gè)按鈕用了實(shí)心的色塊做了強(qiáng)引導(dǎo)，目的是為了提高客單價(jià)，同樣只要是對最終目標(biāo)有幫助，并不能算是跳失，說不定回來的時(shí)候買了更多更貴的東西。

3. 異常場景

異常場景下的按鈕不需要做的過于醒目，一般會采用幽靈按鈕或者和背景近似的顏色。該場景下按鈕大多數(shù)情況是希望用戶點(diǎn)擊將頁面恢復(fù)正常狀態(tài)，并不是一種強(qiáng)烈的引導(dǎo)。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

對于許多設(shè)計(jì)師來說，虛擬現(xiàn)實(shí)（VR）是一個(gè)全新且陌生的領(lǐng)域。過去幾年中，我們目睹了虛擬現(xiàn)實(shí)硬件和軟件的爆炸式增長。從體驗(yàn)性上看，虛擬現(xiàn)實(shí)既有小而簡單的也有專業(yè)復(fù)雜的，整體體驗(yàn)差異很大。

作為 UX 或 UI 設(shè)計(jì)師，初次接觸 VR 可能會有所畏懼，但不要害怕，在本文中，我們將分享一個(gè)設(shè)計(jì) VR 應(yīng)用程序的完整過程，我們希望您可以通過這個(gè)案例來開始自己的 VR 設(shè)計(jì)之旅。你不需要成為 VR 的專家；你只需要將你之前的設(shè)計(jì)技能應(yīng)用到一個(gè)新領(lǐng)域。最終，經(jīng)過大家的共同努力，我們定可以加速 VR 的發(fā)展以發(fā)揮它的全部潛力。

一、VR應(yīng)用程序里有什么？

一般來說，從設(shè)計(jì)者的角度來看，VR 應(yīng)用程序由兩種類型的組件組成：環(huán)境和交互元素。

環(huán)境：您可以將環(huán)境視為您戴上 VR 頭盔時(shí)所進(jìn)入的整個(gè)世界 ， 比如你身處的虛擬星系或者駕駛過山車飛馳的樂園。

交互元素：界面上影響用戶交互和操控體驗(yàn)的元素合集。

根據(jù)這兩個(gè)組件的復(fù)雜性，所有 VR 應(yīng)用程序都可以沿兩個(gè)軸定位。

在左上象限中的 VR 應(yīng)用有類似模擬器的東西，例如過山車的 VR 應(yīng)用，這種應(yīng)用具有完全成形的環(huán)境，但根本沒有交互。你只是被鎖在了車?yán)铩?

在右下角的象限中，應(yīng)用程序具有一個(gè)更好的界面，但比較少或沒有3D環(huán)境。三星的 Gear VR 主屏就是一個(gè)很好的例子。

設(shè)計(jì)場所和景觀等虛擬環(huán)境需要熟練使用3D建模工具，許多設(shè)計(jì)師平時(shí)無法接觸到這些元素。但是，UX 和 UI 設(shè)計(jì)人員有很大的機(jī)會將他們已有的技能應(yīng)用于設(shè)計(jì)虛擬現(xiàn)實(shí)的用戶界面。

我們所做的第一個(gè)完整 VR 的 UI 設(shè)計(jì)是 The Economist 的應(yīng)用程序，與 VR 制作工作室 Visualize 合作。我們做設(shè)計(jì)，Visualize 創(chuàng)建內(nèi)容并開發(fā)應(yīng)用程序。

我們在之后文章中將此應(yīng)用作為一個(gè)工作示例，現(xiàn)在我們將介紹設(shè)計(jì) VR 應(yīng)用程序的方法，然后再介紹設(shè)計(jì) VR 界面的細(xì)節(jié)。您可以從 Oculus 網(wǎng)站下載Gear VR 的 Economist 應(yīng)用程序。

二、VR UI設(shè)計(jì)的第一步-回顧傳統(tǒng)流程

盡管大多數(shù)設(shè)計(jì)師已經(jīng)熟悉了設(shè)計(jì)移動應(yīng)用程序的工作流程，但還不太清楚設(shè)計(jì) VR 界面的流程。當(dāng)面對第一個(gè)VR應(yīng)用程序設(shè)計(jì)項(xiàng)目時(shí)，我們首先要做的是合乎邏輯。

傳統(tǒng)工作流程到全新領(lǐng)域

當(dāng)我們第一次使用三星的 Gear VR 時(shí)，我們注意到它與傳統(tǒng)移動應(yīng)用有很多相似之處。VR 應(yīng)用程序與傳統(tǒng)應(yīng)用程序有著相同的工作流程：幫助用戶與界面進(jìn)行交互。

現(xiàn)在請記住。鑒于與傳統(tǒng)應(yīng)用的相似性，設(shè)計(jì)師花費(fèi)數(shù)年時(shí)間改進(jìn)的久經(jīng)考驗(yàn)的移動應(yīng)用工作流程不會浪費(fèi)，這些流程仍然可用于制作 VR UI。這讓你比你想象的更接近 VR！

在如何設(shè)計(jì) VR 界面之前，讓我們回過頭來看看傳統(tǒng)移動應(yīng)用的設(shè)計(jì)過程。

1. 線框

首先，我們將進(jìn)行快速迭代，定義交互和總體布局。

2. 視覺設(shè)計(jì)

在此階段，功能和交互已經(jīng)完成。我們把視覺規(guī)范與設(shè)計(jì)應(yīng)用于線框圖，并制作出漂亮的界面。

3. 設(shè)計(jì)文檔

在這里，我們將屏幕組織成流程，繪制屏幕之間的鏈接并描述每個(gè)屏幕的交互。我們將此稱為應(yīng)用程序的設(shè)計(jì)文檔，它將被用作開發(fā)人員的主要參考。

現(xiàn)在，我們?nèi)绾螌⒋斯ぷ髁鞒虘?yīng)用于虛擬現(xiàn)實(shí)的設(shè)計(jì)當(dāng)中呢？

三、開始VR UI設(shè)計(jì)

1. 畫布的尺寸

最簡單的問題可能也是最具挑戰(zhàn)性的。面對360度的畫布，人們可能很難知道從哪里開始。事實(shí)證明，UX 和 UI 設(shè)計(jì)者只需要關(guān)注整個(gè)空間的某個(gè)部分即可。

我們花了幾周時(shí)間試圖弄清楚什么樣的畫布尺寸適用于 VR 設(shè)計(jì)。當(dāng)您使用移動應(yīng)用程序時(shí)，畫布大小取決于設(shè)備的大?。篿Phone 6為1334×750像素，Android大約1280×720像素。

要將移動應(yīng)用程序工作流應(yīng)用于 VR UI，首先必須確定合適的畫布大小。

以下是扁平化時(shí)360度環(huán)境的樣子。這種視圖叫做等角矩形投影。在3D虛擬環(huán)境中，這些投影圍繞球體纏繞，以模仿現(xiàn)實(shí)世界。

整個(gè)投影的水平寬度是360度，垂直180度。我們可以用它來定義畫布的像素大?。?600×1800。

使用這么大的尺寸可能是一個(gè)挑戰(zhàn)。但因?yàn)槲覀冎饕獙?VR 應(yīng)用程序的界面設(shè)計(jì)感興趣，所以我們可以專注于這個(gè)畫布的一部分。

基于邁克·阿爾格（Mike Alger）對舒適觀察區(qū)域的早期研究，我們可以找出一個(gè)合適的部分來展示界面。

感興趣的區(qū)域占360度環(huán)境的九分之一。它位于圖像的中心，大小為1200×600像素。

讓我們總結(jié)一下：

「 360度視圖 」：3600×1800像素

「 UI視圖 」：1200×600像素

四、測試原型

「UI視圖」畫布有助于將我們的注意力集中在我們正在制作的界面上，并使設(shè)計(jì)流程變得更加容易。

同時(shí)也必須使用「360度視圖」在 VR 環(huán)境中的預(yù)覽界面。此外為了獲得真實(shí)的比例感，使用 VR 頭盔測試界面也是必要的。

△ 使用Avocode，您可以輕松直觀地比較設(shè)計(jì)

五、設(shè)計(jì)工具

在開始之前，我們需要以下工具：

1. sketch

我們將使用 Sketch 來設(shè)計(jì)我們的界面和用戶流程。如果您沒有，可以下載試用版。Sketch 是我們首選的界面設(shè)計(jì)軟件，但如果您使用 Photoshop 或其他任何軟件更舒服，也沒問題。

2. GoPro VR Player

GoPro VR Player 是一款360度內(nèi)容查看器。它由 GoPro 提供，是免費(fèi)的。我們將使用它來預(yù)覽我們的設(shè)計(jì)。

3. Oculus Rift

Oculus Rift 連接到 GoPro VR 播放器，這將使我們能夠測試我們的設(shè)計(jì)。

六、VR界面設(shè)計(jì)流程

在本節(jié)中，我們將介紹如何設(shè)計(jì) VR 界面。我們將一起設(shè)計(jì)一個(gè)簡單的界面，最多花費(fèi)5分鐘時(shí)間。

下載源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密碼：09vt，其中包含預(yù)設(shè)的 UI 元素和背景圖像。如果你想使用自己的設(shè)計(jì)文件，那也是可以的。

1. 設(shè)置「360度視圖」

首先要做的事情，讓我們創(chuàng)建360度視圖的畫布。在 Sketch 中打開一個(gè)新文檔，并創(chuàng)建一個(gè)畫板：3600×1800像素。

導(dǎo)入文件 background.jpg，并將其放在畫布的中間。如果您使用自己的背景文件，請確保其比例為2：1，并將其大小調(diào)整為3600×1800像素。

2. 設(shè)置畫板

如上所述，「UI view」是「360 view」的裁剪版本，我們僅關(guān)注 VR 界面。

我們創(chuàng)建一個(gè)新畫板：1200×600像素。然后，復(fù)制畫板到「360 view」中，并將其放在畫板的中間。不要?jiǎng)h除「360 view」畫板，我們同時(shí)保留著兩個(gè)畫板，以后會用到它們。

3. 設(shè)計(jì)界面

我們將在「UI View」畫布上設(shè)計(jì)我們的界面。我們會盡量簡單一些，首先在視圖上添加一些圖塊。您可以使用 tile.png 文件將其拖到 UI 視圖的中間。

復(fù)制它，并創(chuàng)建一行三個(gè)圖塊。

使用 kickpush-logo.png 文件，并將其放在圖塊上方。

4. 合并畫板

現(xiàn)在來看看有趣的東西。確保「UI view」畫板位于左側(cè)圖層列表的「360view」畫板上方。

將「UI view」畫板拖動到「360 view」畫板的中間。將「360 View」畫板導(dǎo)出為 PNG；「UI view」將位于其上方。

5. 在VR中測試它

打開 GoPro VR Player，并將剛剛導(dǎo)出的「360 View」PNG 拖到窗口中。使用鼠標(biāo)拖動圖像以預(yù)覽360度環(huán)境。

我們完成了！是不是很簡單？

如果您的機(jī)器上安裝了 Oculus Rift，則 GoPro VR 播放器應(yīng)該可以檢測到它并允許您使用 VR 設(shè)備預(yù)覽圖像。根據(jù)您的配置，您可能需要在 MacOS 中做一些顯示設(shè)置。

七、VR設(shè)計(jì)中需要注意的因素

1. 低分辨率

VR 頭盔的分辨率非常糟糕？這不完全正確，其實(shí)它相當(dāng)于手機(jī)的分辨率。但是，考慮到設(shè)備距離您的眼睛5厘米，顯示器看起來并不清晰。

為了獲得清晰的 VR 體驗(yàn)，我們需要一個(gè)8K的顯示屏，這是一個(gè)15,360×7680像素的顯示屏。相信這種設(shè)備早晚會普及。

2. 文本可讀性

由于顯示器的分辨率較低，會導(dǎo)致所有精美的 UI 元素都會看起來像素化。這意味著，首先，文字難以閱讀，其次，直線部分會出現(xiàn)鋸齒。所以盡量避免使用大段文字和特別復(fù)雜的 UI 元素。

八、收尾工作

1. 設(shè)計(jì)文檔

還記得我們的移動應(yīng)用中的流程圖嗎？我們現(xiàn)在將這種做法也應(yīng)用到 VR 界面。用我們已經(jīng)做好的界面組織成一個(gè)易于理解的流程圖，這非常有益于開發(fā)人員理解我們設(shè)計(jì)的應(yīng)用程序的整體架構(gòu)。

2. 動效設(shè)計(jì)

設(shè)計(jì)一個(gè)漂亮的 UI 是一回事，但讓他動起來又是另外一回事了。我們決定以二維視角來處理它。

基于我們的 Sketch 文件，我們使用 Adobe After Effects 和 Principle 為界面設(shè)計(jì)動畫。雖然輸出的不是真實(shí)的3D體驗(yàn)，但它足以指導(dǎo)開發(fā)團(tuán)隊(duì)了，且能幫助我們的協(xié)作者在流程的早期階段了解我們的愿景。

△ 你剛剛設(shè)計(jì)了第一個(gè) VR UI。真棒！

我們知道你在想什么，「這很酷，但真實(shí)的 VR 應(yīng)用程序會復(fù)雜的多?！故堑?，當(dāng)然是。但重點(diǎn)在于我們可以在多大程度上將我們當(dāng)前的 UX 和 UI 的經(jīng)驗(yàn)應(yīng)用于這種新媒介？

九、VR UI可以走多遠(yuǎn)？

1. 新的交互體驗(yàn)

一些 VR 體驗(yàn)非常依賴虛擬環(huán)境，然而傳統(tǒng)界面的確已經(jīng)不是用戶控制應(yīng)用程序的最佳方式了。在這種情況下，您可能希望用戶直接與環(huán)境本身進(jìn)行交互。

想象一下，你正在為一家豪華旅行社制作應(yīng)用程序。您希望以最生動的方式將用戶轉(zhuǎn)移到潛在的度假目的地。因此，您邀請用戶佩戴耳機(jī)并在時(shí)髦的切爾西辦公室開始體驗(yàn)。

要從辦公室轉(zhuǎn)移至目的地，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜志，輕輕松松瀏覽它們，直到它們被某一頁吸引。或者，桌面上可能會有一系列有趣的物品，根據(jù)用戶選擇的不同，將用戶帶到不同的位置。

這確實(shí)很酷，但也有一些缺點(diǎn)。為了達(dá)到完美的效果，你需要一個(gè)更先進(jìn)的帶手持控制器的 VR 頭盔。不過，像這樣的應(yīng)用程序要比傳統(tǒng)的應(yīng)用程序花費(fèi)更多的精力來開發(fā)。

2. 革命萬歲

現(xiàn)實(shí)情況是，對于大多數(shù)公司而言，這些沉浸式的體驗(yàn)在商業(yè)上還不可行。除非您擁有幾乎無限的資源，例如 Valve 和 Google，否則創(chuàng)建類似于上述體驗(yàn)的產(chǎn)品可能成本太高，風(fēng)險(xiǎn)太大且過于耗時(shí)。

這種體驗(yàn)非常出色，可以帶你到媒體和技術(shù)的最前沿，但通過新媒體將產(chǎn)品推向市場并不太好。

通常，當(dāng)一種新形式出現(xiàn)時(shí)，它會是一個(gè)小眾產(chǎn)品。隨著時(shí)間的推移，成本的下降，有足夠的人去學(xué)習(xí)和市場的資本注入，它就會成為應(yīng)用廣泛的產(chǎn)品。

隨著 VR 頭盔變得越來越普及，將會有越來越多的公司將 VR 融入他們與用戶的互動當(dāng)中。

從我們的角度看，相比于手機(jī)、平板，VR 用戶界面本質(zhì)上是更直觀的，并且更接近用戶，隨著科技和市場的發(fā)展，VR 將會帶來更大的價(jià)值。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

《名偵探柯南》中總是提到福爾摩斯的一段話：「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.（排除一切不可能的，剩下的即使再不可能，那也是真相。）」這句話用干擾效應(yīng)來解釋最好不過，本期我們來聊聊。

想看更多設(shè)計(jì)法則，這個(gè)專題里全都有：設(shè)計(jì)法則專題

一、干擾效應(yīng)（Interference Effect ）定義

干擾效應(yīng)：一種現(xiàn)象，同時(shí)思考兩件或兩件以上的事情時(shí)，思考的過程會變得比較慢，也不準(zhǔn)確。

二、干擾效應(yīng)產(chǎn)生理由

有兩種或兩種以上的知覺或認(rèn)知過程發(fā)生沖突時(shí)，就會產(chǎn)生干擾效應(yīng)。

人們的知覺和認(rèn)知的不同與心智模型有關(guān)，這些模式會獨(dú)立分析、處理收到的相關(guān)信息，處理后會傳送到工作記憶區(qū)，并作出詮釋。當(dāng)輸出資料一致，詮釋過程會又快又好。當(dāng)輸出資料不一致，就會產(chǎn)生干擾，需要一些其他的處理，以便更好地解決。解決這些問題需要浪費(fèi)很多時(shí)間，對性能也會產(chǎn)生不好的影響。

三、干擾效應(yīng)案例

1. 斯特魯普干擾

斯特魯普干擾（Stroop Interference）：刺激物不相干的一面引發(fā)了思考過程，因而干擾了刺激物相關(guān)方面的思考。

圖標(biāo)協(xié)同文字可以準(zhǔn)確的向用戶傳遞所要表達(dá)的內(nèi)容，二手在常用的 App 中截出了一些圖標(biāo)，卻發(fā)現(xiàn)現(xiàn)在很多的圖標(biāo)在信息傳達(dá)方面有所欠缺。

舉四個(gè)例子：

下面這組圖標(biāo)，「地方菜系、美食、晚餐、大牌簡餐」幾個(gè)圖標(biāo)沒有表達(dá)出所要傳達(dá)的信息，還有幾個(gè)圖標(biāo)要借助文字才能表達(dá)出其含義。即使圖標(biāo)設(shè)計(jì)的非常精美，但是圖標(biāo)功能卻存在缺失，而且這幾個(gè)圖標(biāo)不能刺激用戶對信息的理解，反倒是讓用戶更加迷惑。設(shè)計(jì)師也注意到了這個(gè)情況，所以最近改版后，信息傳達(dá)變的更加直接，減少了干擾。

接下來的這組圖標(biāo)也存在同樣的問題，這組圖標(biāo)想借助圖標(biāo)上產(chǎn)品本身的含義來傳達(dá)給用戶要表達(dá)的信息，但是這需要用戶對這些產(chǎn)品本身的定位非常明確，如果不明確的話只能干擾用戶的行為，例如，用戶需要知道「呂」是個(gè)韓國洗發(fā)水之后才能拐彎抹角的聯(lián)想到「全球超市」，再例如：中間「輕奢」圖標(biāo)，用的是勞力士綠水鬼，一款70000+還要靠等才能買到的奢華手表，二手認(rèn)為跟輕奢的定義有矛盾，除非這并不是勞力士。

米家這套圖標(biāo)二手認(rèn)為可以準(zhǔn)確傳達(dá)所描述的信息，因?yàn)槊准矣蟹N類繁多的 loT 產(chǎn)品，有時(shí)候一款產(chǎn)品更是分為不同的版本，如果用戶只是根據(jù)名稱選擇的話不僅繁瑣而且十分耗時(shí)，所以在選擇產(chǎn)品時(shí)，米家把所有產(chǎn)品外形準(zhǔn)確刻畫成圖標(biāo)，用戶可以先根據(jù)自己產(chǎn)品的外形大致選擇型號，再根據(jù)文字提示準(zhǔn)確的選擇自己產(chǎn)品的版本。

△ 米家App圖標(biāo)

滴滴這套圖標(biāo)表達(dá)也很準(zhǔn)確，不同的服務(wù)通過不同的圖標(biāo)可以準(zhǔn)確傳達(dá)。

△ 滴滴圖標(biāo)

2. 加納干擾

加納干擾（Garner Interference）：刺激物一個(gè)無關(guān)的變化，引發(fā)了思考過程，干擾到跟刺激物相關(guān)的思考過程。

舉個(gè)例子：如下圖，指出單獨(dú)一排的形狀，比指出兩排其中一排的形狀要簡單。兩排形狀緊靠在一起，激發(fā)了想說出旁邊形狀的思考程序，造成干擾。

根據(jù)上面這個(gè)案例，二手聯(lián)想到了「個(gè)人中心」頁面，大部分「個(gè)人中心」頁面都選擇了豎排列表布局。列表布局就是以列表的形式展示具體內(nèi)容，并且能夠根據(jù)數(shù)據(jù)的長度自適應(yīng)顯示，Material Design 建議列表是「可快速掃描」，適合顯示類似的重復(fù)的內(nèi)容。列表布局也是最快速的 app 布局方式。這種排列在某方面上就是降低了干擾。相比于列表布局，宮格導(dǎo)航是將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時(shí)間看到內(nèi)容，選擇壓力較大，采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少，往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。

△ 列表布局和宮格導(dǎo)航

3. 前向干擾

前向干擾（Proactive Interference）：現(xiàn)存記憶干擾了學(xué)習(xí)。

舉個(gè)例子：手淘的最近改版中，店鋪首頁頂部導(dǎo)航和底部自定義菜單結(jié)構(gòu)化調(diào)整，但是有一個(gè)細(xì)節(jié)的變化讓二手不斷的犯錯(cuò)——返回按鈕改成了關(guān)閉按鈕，二手習(xí)慣點(diǎn)擊左上角返回按鈕來返回上一級菜單，改版后依舊習(xí)慣點(diǎn)擊左上角，但是打開的是店鋪印象，僅僅是圖標(biāo)左右位置簡單的調(diào)換，已經(jīng)讓二手在使用的過程中挫敗感強(qiáng)烈。這就是現(xiàn)在的使用記憶已經(jīng)嚴(yán)重干擾了學(xué)習(xí)。所以產(chǎn)品在改版迭代的時(shí)候，盡量不要干擾用戶已經(jīng)熟悉的路徑或是破壞用戶使用習(xí)慣。

△ 手淘的店鋪首頁改版

4. 后向干擾

后向干擾（Retrosctive Interference）：學(xué)習(xí)干擾了現(xiàn)存記憶。

這個(gè)正好跟上面相反，二手不斷培養(yǎng)現(xiàn)在的使用習(xí)慣，漸漸的就忘記了上一版的路徑。

四、怎樣預(yù)防干擾

要想預(yù)防干擾，就要避免輸出思考過程中相互沖突的設(shè)計(jì)。知覺的干擾效應(yīng)，通常是因?yàn)樾畔⒌膫鬟_(dá)過程中有歧義，或是因?yàn)榘鸦ハ喔蓴_的元素結(jié)合在一起。要把干擾效應(yīng)降到，首先要求設(shè)計(jì)師用準(zhǔn)確的設(shè)計(jì)語言傳達(dá)信息，如果這樣還是無法讓用戶很好的理解，其次可以考慮利用文字或者引導(dǎo)來告知用戶。

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

香港理工大學(xué)教授John Heskett認(rèn)為，作為設(shè)計(jì)師有三個(gè)階段性的價(jià)值：修飾者，區(qū)分者，設(shè)計(jì)驅(qū)動。在信息爆炸的今天，設(shè)計(jì)師每天閱讀大量的設(shè)計(jì)文章、作品，但卻依然提升緩慢。一個(gè)優(yōu)秀的設(shè)計(jì)作品：到底好在那里？背后思考是什么？品牌價(jià)值有哪些？…

為了幫助設(shè)計(jì)師提升基礎(chǔ)審美。每周我們會挑選全球優(yōu)秀拔尖的設(shè)計(jì)，幫你解讀每個(gè)設(shè)計(jì)背后的思考！讓基礎(chǔ)審美養(yǎng)成設(shè)計(jì)好習(xí)慣的第一步。

------------------任何設(shè)計(jì)問題添加微信：uiskyss---------------------------

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。