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

01-

肖形圖形-構(gòu)成規(guī)律：A組成B

肖形圖形就是以單一元素或多個元素的外形共同變化來進(jìn)行一個新形象的創(chuàng)造并使兩者之間的含義得以連接。如果兩個物體同時改變了原先的形態(tài)，并在這兩種形態(tài)間產(chǎn)生了一種全新且嚴(yán)謹(jǐn)?shù)钠鹾详P(guān)系，一個新形象也就誕生了。

還記得08年奧運(yùn)期間的各地景觀嗎？你去看城市市民廣場的花壇，從南到北，無不例外，用鮮花組成一個大大的奧運(yùn)五環(huán)的圖形，要不然就是京的印章標(biāo)志，或者就是北京歡迎你的字樣。印象最深刻的就是開幕式用擊缶來形成倒計時的數(shù)字。

肖形圖形概念是運(yùn)用十分廣泛的一種創(chuàng)意概念，它好理解，上手快。但不能理解成一個簡單的重復(fù)羅列的過程，哪些圖形可以結(jié)合構(gòu)成新的意向？怎么組合更加有趣？怎么控制好元素之間的疏密關(guān)系？

當(dāng)我們面對兩個形態(tài)上看似沒有什么關(guān)聯(lián)的物件時，不妨先從點(diǎn)、線、面、空間這些角度來解析一下，或是再換個角度看，每個物件都可分解成基本的方形、圓形和三角形，這些隱秘的關(guān)系都為它們的解析重組提供了可塑的條件。

點(diǎn)的創(chuàng)意表現(xiàn)

在圖形中，任何一個單獨(dú)而細(xì)小的形象都可以稱為點(diǎn)。點(diǎn)是以視覺中面積大小的感受來確定的，所以點(diǎn)的形狀并不一定是圓，也可以是其他的幾何形體，點(diǎn)是相對于線和面而存在的視覺元素。在設(shè)計中，點(diǎn)的排列的形狀、方向、大小、位置、聚焦、發(fā)散，能夠給人帶來不同的心理感受和視覺沖擊。點(diǎn)的構(gòu)成可分為密集和分散兩種不同的視覺類型。

線的創(chuàng)意表現(xiàn)

線是創(chuàng)意圖形的基本要素之一，線可以串聯(lián)各種視覺要素，可以分割畫面和圖像文字，可以使畫面充滿動感，也可以在上穩(wěn)定畫面。線與線之間的排列可以使畫面具有節(jié)奏感，線的放射、粗細(xì)、漸變排列可以體現(xiàn)三維空間的感覺。

線的編排構(gòu)成分為有節(jié)奏、有情感、有空間關(guān)系等的線。每條線都有自己獨(dú)特的情感存在，將不同的線有節(jié)奏地編排在板式中就能形成各種不同的效果。作品通過線的空間處理，利用獨(dú)特的視覺效果，能表現(xiàn)強(qiáng)烈的整體感和形式感。

面的創(chuàng)意表現(xiàn)

圖形設(shè)計中的面由于輪廓的作用，使形態(tài)從周圍空間中突顯出來，從而比點(diǎn)、線的視覺沖擊力更大。在進(jìn)行面的創(chuàng)意表現(xiàn)時，要考慮形狀與面積的對比、間隔與面積的對比、面積與面積的對比等因素。面是視覺元素創(chuàng)意的基礎(chǔ)，可以運(yùn)用不同的方式來表現(xiàn)。

02-

同構(gòu)圖形-構(gòu)成規(guī)律：A+B組合

同構(gòu)圖形更注重于體現(xiàn)視覺意義上的藝術(shù)性和完整性，通過變形、錯位、結(jié)合等種種手段來制造出虛擬的物象。同構(gòu)可以理解為是一種形態(tài)上的置換行為，即是將組成某物件的其中一部分特定元素與另一種本不屬于其自身卻具備形態(tài)上相似之處的元素進(jìn)行巧妙替換，相互借用，同生共榮，形成新的異象，產(chǎn)生出新的寓意和獨(dú)特的視覺趣味。

同構(gòu)圖形在設(shè)計運(yùn)用中最為廣泛的一種圖形概念，但在運(yùn)用時我們必須注意做到自然巧妙而不生硬。如果總是一味的將一堆相關(guān)元素胡亂堆砌在畫面中，這樣的畫面，細(xì)看之下實(shí)在是索然無味啊。

(一半寫實(shí)一半創(chuàng)意)

一個完整的元素一分為二，一半保持元素原來的固有形態(tài)讓用戶保持認(rèn)知，另一半就可以進(jìn)行創(chuàng)意設(shè)計。案例一中是用直白的文案直接進(jìn)入主體，使用手寫字體切近用戶的同時也彰寫了格調(diào)；案例二中為了體現(xiàn)科技感，運(yùn)用了電路板進(jìn)行內(nèi)部重新構(gòu)造，增加科技感的同時也不失可愛。

(圖形加文字)

圖形加文字，通過提取文案，在圖形設(shè)計中保留主要的重點(diǎn)文案，很明確的傳達(dá)品牌的內(nèi)涵，文字在圖形中也盡量按照圖形的走勢進(jìn)行排列。案例中的文案都傳達(dá)了一種積極向上永不服輸?shù)膽B(tài)度，運(yùn)動員們也為了勝利而拼搏，體現(xiàn)的耐克的品牌文化。

(雙重曝光)

雙重曝光從嚴(yán)格意義上講不屬于同構(gòu)圖形的一種，但是它也是同構(gòu)兩張圖片兩兩相合成形成的一種特有的風(fēng)格，由于這種風(fēng)格也算大熱的風(fēng)格。我們在制作雙重曝光的時候盡可能的保證人物形態(tài)的完整性，如上圖的案例中雙重曝光的畫面很清晰，主次也很分明，很好的保留了人物的五官的完整性。

(APP節(jié)日閃屏)

(點(diǎn))

(線)

(面)

(創(chuàng)意)

(插畫)

作為UI或者產(chǎn)品設(shè)計師，我們在設(shè)計界面中會很少運(yùn)用肖形圖形和同構(gòu)圖形進(jìn)行區(qū)創(chuàng)意。但是在APP閃屏頁中，我們就可以很好的運(yùn)用的肖形圖形和同構(gòu)圖形?？梢院芎玫呐c品牌LOGO圖形相結(jié)合，更好的為品牌宣傳去服務(wù)。在這方面做的最好的當(dāng)屬Q(mào)Q音樂這款產(chǎn)品，它很好的利用品牌圖形與點(diǎn)、線、面、插畫相結(jié)合進(jìn)行創(chuàng)意，很好的體現(xiàn)了節(jié)日的主題和氛圍。

總結(jié)-

肖形圖形和同構(gòu)圖形在設(shè)計中運(yùn)用廣泛，通過圖形創(chuàng)意練習(xí)可以增加我們創(chuàng)意思維，也可以鍛煉設(shè)計總的主次層級、疏密遠(yuǎn)近的關(guān)系。相對復(fù)雜的視覺圖形元素能處理得當(dāng)，相信在界面排版中也能很好的分析出層級和層次之間的關(guān)系。

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

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

“解密細(xì)膩制作的關(guān)鍵點(diǎn)。深度剖析了色理知識”

       

      之前說過我要出一個吉祥物制作的教程，但是其實(shí)這種教程很多，上百度隨便搜一個就能知道個大概。現(xiàn)在是教程泛濫的時代，今天看一篇明天看一篇，發(fā)現(xiàn)很多換湯不換藥，有種不看可惜看了又很雞肋的感覺。所以我在想我要怎么出這篇教程才會讓大家有所收獲。

        設(shè)計的進(jìn)階道路，大概分為借鑒，實(shí)操，駕馭，引領(lǐng)。從借鑒到引領(lǐng)這個過程學(xué)習(xí)、思考、總結(jié)是貫穿的，多實(shí)踐，多總結(jié)才能飛速進(jìn)步，不然有可能你干了5年的設(shè)計還不如人家干一年來得出色。我總結(jié)了一些原理性的東西給大家一個啟發(fā)，做東西掌握實(shí)質(zhì)才能一生二，二生n多，然后你就羽化成“大神”、“大濕”了哈。

       關(guān)于吉祥物，詳細(xì)步驟教程大家可以看看其他大神的總結(jié)，不過大概步驟是要知道，用些什么關(guān)鍵性的工具也需要爛熟于心。 

 

一、吉祥物制作過程

1、鋼筆勾輪廓（描邊成線稿）

用鋼筆的形狀工具，勾出輪廓，描邊成線稿。要領(lǐng)是需要每個部分都要畫全，圖層都分好，詳細(xì)命名。

2、面稿上色（隱藏描邊）

隱藏描邊，形狀上色，即成面稿。各自部分需要單獨(dú)做蒙版，然后整體需要建組加一個形狀蒙版，便于上色，不超出身體部位。

3、剖析光影（這個可以找一些實(shí)物，或者大神的吉祥物觀察） 
常用圖層樣式：眉毛（斜面浮雕）；眼睛（眼白漸變加內(nèi)陰影，眼眶漸變加羽化）；嘴（加兩個內(nèi)陰影，一亮一暗，內(nèi)部光影用鋼筆勾，羽化）；身體（漸變，暗部正片疊底一個內(nèi)陰影強(qiáng)化陰影，再內(nèi)陰影一個細(xì)的環(huán)境光）；衣服（內(nèi)陰影+漸變，加上明暗交界線和衣服袖口的厚度）。 

4、靈活應(yīng)用筆刷，不好畫的圓弧用鋼筆勾然后羽化

吉祥物細(xì)膩制作過程中，剖析光影是很關(guān)鍵的。光影細(xì)膩了才能立體生動。

二、光影效果總結(jié)

光有明度、方向、色彩等特征。光的反射形成了物體的形象，光讓我們辨別事物，認(rèn)識材質(zhì)、尺寸和透視。

1、三大面：黑（背光面）、白（受光面）、灰（側(cè)光面）

2、五大調(diào)子：

（1）高光（最亮部分）

不同材質(zhì)的高光強(qiáng)度也不一樣。同樣強(qiáng)度光線的情況下，越是光滑的物體的高光部分越是強(qiáng)；棉、毛、粗糙物體的表面則會相對柔和。

（2）中間調(diào)、亮部（本色部分）

一般是物體本身的顏色。

（3）明暗交界線（是最深的部分，刻畫結(jié)構(gòu)）

它深淺的程度跟光線和物體的材質(zhì)都有關(guān)系。光線越強(qiáng)硬度越高明暗交界線越是明顯。比如光滑的金屬對比是很強(qiáng)烈的。如果是棉毛制品則相對柔和。

（4）暗部+反光（暗部本色偏暗，反光受環(huán)境光影響，反光強(qiáng)烈時暗部和明暗交界線重疊）

反光跟光線強(qiáng)弱和材質(zhì)也有關(guān)系，反光同時也受環(huán)境色的影響。越是光滑的表面受環(huán)境色影響越是大。

（5）投影

同樣投影跟光線強(qiáng)弱和材質(zhì)也一樣有密切的聯(lián)系?？拷矬w的部分通常最深。透明物體投影相對也弱。

明暗五調(diào)子在深淺變化上有規(guī)律，以明暗交界線為界，在背光部是逐漸亮起來到反光；在受光部是逐漸亮來到高光（輝點(diǎn)）。這被稱為漸變規(guī)律。

       光有一個灰色的球還是不夠的，我們還要了解色彩的基本知識。插畫中很多插畫師為了先定好精準(zhǔn)的型和光影效果，一般會先畫黑白稿然后用混合模式疊加顏色上去。混合模式在圖片合成和濾鏡中也應(yīng)用廣泛。下面是我的一些總結(jié)，有點(diǎn)類似理工科的筆記哈，一張表格弄懂混合模式和色彩模式，大家隨便看看。

三、了解混合模式

       知識體系的連接起來有助于我們理解，沒必要去背，理解一下大概心里有個底，能鎖定自己要用模式的區(qū)域就行。理論是基礎(chǔ)，一切的產(chǎn)出源于實(shí)踐，所以大家一定要好好去實(shí)踐嘗試一下，各種疊加一下，就能弄懂這些模式，就會覺得這個神奇而不神秘了。 

四、用HSB模式分析色彩

       用HSB是基于人眼的色彩模式，是我們最容易理解的，所以我著重在這塊進(jìn)行分析。色相即色彩，只要不是色盲都能看清楚；明暗也一目了然，素描稿可以理解為只有明暗對比，色相飽和度為0。 但是飽和度夾雜色彩和明暗的時候就難以分辨。 畫畫用色上中也會受到一定的干擾。從小畫畫， 基本功扎實(shí)的小伙伴有時候憑感覺就可以畫出美麗的色彩， 但是現(xiàn)在很多半路出家的同學(xué)就會發(fā)現(xiàn)難以入手， 所以搞懂我們吉祥物中色彩飽和度的原理就會順手很多，就可以比較好的應(yīng)用HSB模式。

       我的習(xí)慣是用拾色器的色相版面,橫向從左向右，明度一樣，飽和度變高，縱向從從下往上，飽和度一樣，明度變高，所以右上角的點(diǎn)是明度和飽和度同時最高的點(diǎn)，所以想要取飽和度高的盡量右，想要亮的盡量往上。

       在拾色器中還可以總結(jié)出很多用色技巧，以這個灰度球?yàn)槔?，五大調(diào)子明暗度分別是：92 60 40 62 43 。疊加高飽和混色后（球1）五大調(diào)子明暗度分別是:100  91 73 95 67。疊加高飽和混色后（球2），五大調(diào)子明暗度分別是:100  82 76 100 67。說明顏色疊加上去，可以改變一些明度值，但是整體趨勢是一致的。所以在疊加顏色值考慮色相和飽和度即可。 
       疊加高飽和混色后（球2）五大調(diào)子飽和度為：13 62 76 64 68 可以得出結(jié)論就是光照越強(qiáng)（越趨白）飽和度越低，明暗交接線上飽和值較高。 
       高光一般都是飽和度的，透明材質(zhì)和反光材質(zhì)，明暗交界線飽和度高，反光強(qiáng)，給人一種通透感。（球3）上我用飽和度模式提高了明暗交界線和反光區(qū)域的飽和度，整個球看起來通透了很多。所以要增加通透感可以增加明暗交接線的飽和度，提亮高光（明度）。

     下面是我給灰度球上色的過程。

       說了這么多，感覺是不是跟沒看一樣，有點(diǎn)懵。而且大部分吉祥物上色也是直接上色。我講灰度球上色過程你幫助深度理解光影和色彩，而且球會畫了，其他也不在話下。那我來總結(jié)一些更實(shí)用的要點(diǎn)。

五、吉祥物細(xì)膩刻畫的要點(diǎn)

1、鮮明的對比,整體的飽和度高

（1）吉祥物彌漫著色彩絢爛的卡通色彩，所以一般采用飽和度較高的顏色。

（2）配色方案可以用對比色。需要注意的是，背景明度不能太高，否則反光發(fā)揮不出作用，就像我們高光也不會用純白的，這樣畫面才有張弛。

         以下是我對自己三張吉祥物海報的色彩分析（除去吉祥物原本的顏色）： 

       從色盤構(gòu)成的三角形中看每組配色中都有對比色。除了對比色還用到了中差色和相似色。在吉祥物中為了拉開顏色的對比，一般鄰近色作為一個物體的過度，不會作為一個配色方案?；パa(bǔ)色是對比最強(qiáng)的色組，放在一起，會給人強(qiáng)烈的排斥感。若混合在一起，會調(diào)出渾濁的顏色。但是也不是不能用，可以調(diào)節(jié)明度對比和飽和度對比來減弱這種排斥感。

       對比色中還包含了一種冷暖對比，第三張海報“藍(lán)黃”搭配就是對比中的冷暖對比，黃色在藍(lán)色中使整個畫面更加活潑。

        紅色、橙色、黃色--為暖色，象征著：太陽、火焰。

        綠色、藍(lán)色、黑色--為冷色，象征著：森林、大海、藍(lán)天。

        灰色、紫色、白色--為中間色。

總結(jié)：想要顏色豐富又沒有排斥感，可以用對比色（包含冷暖對比），再配合調(diào)節(jié)明度對比和飽和度對比。

2、假象光源要定好，再加環(huán)境光

（1 ) 在未加入環(huán)境中，一般假象光是左上和正前光相結(jié)合。整體光源源要一致。（2）為了讓吉祥物更加融入場景，應(yīng)該疊加一些環(huán)境光。

（3）環(huán)境光可以加多個，一般常用的是兩個一個高光一個反光。

（4）光需要有強(qiáng)度對比，不要兩個一樣強(qiáng)弱，沒有主次。

3、細(xì)膩度的體現(xiàn)

4、用不慣筆刷可以用鋼筆+羽化

       要做一個柔和的吉祥物，就像c4d做出來的，用“鋼筆+羽化+圖層樣式+蒙版”就夠用了。

       如下圖給水滴加環(huán)境色，我們可以用鋼筆畫出輪廓然后根據(jù)實(shí)際情況調(diào)整羽化程度。

       同樣的效果，也可以用內(nèi)陰影做出，還可以多加幾個光?！颁摴P+羽化”比圖層樣式好用的地方是：受限制少，不依靠物體的輪廓，可以隨機(jī)調(diào)節(jié)區(qū)域。

感覺差不多了，我們下次再見！

有人會問：好幾點(diǎn)沒看懂？

答：評論問唄。

有人會說：看了等于沒看！

答：還是謝謝你看了，寶寶會繼續(xù)走自己的風(fēng)格。

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

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

表單設(shè)計可以說是設(shè)計界一個老生常談的話題，針對它的重要性自不必多言。本文結(jié)合自身經(jīng)驗(yàn)和所看所學(xué)所得總結(jié)，希望能幫助到大家。

從「因子（構(gòu)成要件）」的角度，將表單逐一拆分，從而能夠全面的看待。

如下，大卸八塊，一一道來：

• 結(jié)構(gòu)
• 標(biāo)簽
• 輸入字段
• 占位符
• 幫助
• 操作
• 驗(yàn)證
• 反饋

一、結(jié)構(gòu) Structure

字段的順序、節(jié)奏、外觀和組織。

1. 只問所需

必要而不是全部，簡化表單，或許是優(yōu)化表單的最大建議。簡化的辦法之一就是追溯每個字段為什么需要，是否是當(dāng)前最相關(guān)的信息，如果它是可選的，最好不要顯示。

2. 有理排序

先問什么，再問什么，前后字段根據(jù)相關(guān)性循循漸進(jìn)。

3. 從易到難

從用戶相對無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意。

4. 組織相關(guān)

在繁多字段的情況下，將相關(guān)字段按照順序進(jìn)行分類組合，并通過增加一些額外的空間或者主標(biāo)題將它們分成語義組，增加了頁面呼吸和節(jié)奏感，從而幫助用戶更加輕松完成表單。

5. 單列呈現(xiàn)

單列，只需眼睛沿著自然的方向從上至下，便于用戶理解操作。多列，眼睛需要按照「之」形進(jìn)行瀏覽，從而增加瀏覽和理解認(rèn)知的時間。

當(dāng)然單列呈現(xiàn)還是多列，并非絕對，需根據(jù)頁面空間，表單內(nèi)容及性質(zhì)共同決定。

6. 提高對比度

提高顏色的對比度，你的用戶群體可不是高清屏，飛行員。

二、標(biāo)簽 label

標(biāo)簽告訴用戶需要輸入什么。

1. 名詞標(biāo)簽

名詞具有很好的描述性且簡潔明了。常用的字段可以使用大家熟悉的圖標(biāo)代替文本。

2. 標(biāo)簽位置

左對齊、右對齊、頂部對齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動標(biāo)簽。

多數(shù)情況下，謹(jǐn)慎使用內(nèi)聯(lián)標(biāo)簽，在用戶輸入后，內(nèi)聯(lián)標(biāo)簽會消失，用戶無法判斷輸入的內(nèi)容是否符合，當(dāng)然在用戶熟悉且簡單的字段下可采用（例如登錄中只有賬號和密碼）。針對以上問題，你可以采用內(nèi)聯(lián)浮動標(biāo)簽解決內(nèi)聯(lián)標(biāo)簽在輸入后標(biāo)簽消失的弊端。

三、輸入字段 Input

承載用戶輸入的區(qū)域。

1. 自動對焦（PC端）

進(jìn)行表單頁面，自動對焦第一個輸入字段可以引導(dǎo)用戶開始進(jìn)行輸入。

2. 提供默認(rèn)值

可根據(jù)已知信息，幫助用戶預(yù)判內(nèi)容。例如可以通過 IP 檢測出用戶的地理位置。

3. 保存輸入的數(shù)據(jù)

記住用戶已經(jīng)填寫的內(nèi)容，以防萬一（例如頁面刷新），從而避免用戶需要再次輸入而放棄。

4. 字段約束

為有要求的字段設(shè)置限制。例如，最大字符數(shù)，電話中數(shù)字、字母符號等要求，從而有效的避免臟數(shù)據(jù)。

5. 格式化（掩碼）輸入

提供輸入格式，幫助用戶理解所填內(nèi)容且減少錯誤發(fā)生。常用于手機(jī)號碼、日期、銀行卡和郵編等。

6. 匹配鍵盤（移動端）

提供合適的鍵盤，幫助用戶快速完成。

7. 區(qū)分可填

如上所述，盡量避免可填字段。如果不可避免，應(yīng)該做明確區(qū)分。根據(jù)經(jīng)驗(yàn)，可填和必填的數(shù)量少的做標(biāo)記說明。

常規(guī)做法：必填，使用「*」星號符；可填，使用「（選填）」。

四、占位符 Placeholder

標(biāo)簽的額外描述，幫助用戶了解可輸入的數(shù)據(jù)類型和格式提示。

1. 顏色區(qū)分

它是內(nèi)容提示，而不是內(nèi)容。

2. 不是所有輸入框都需要占位符

占位符是對輸入內(nèi)容有特殊要求的提示或提醒，也可理解為對標(biāo)簽的補(bǔ)充，并不是所有的輸入框都需要占位符。

3. 輸入后消失

不要在鼠標(biāo)鍵入后消失，而是在輸入內(nèi)容后消失，這樣可以在用戶還未輸入的時候，依然幫助到用戶。

如果提示特別復(fù)雜或者重要，請使用幫助，它會一直顯示在那里。

五、幫助提示 Tips

說明要求，解釋原因，甚至幫助回憶。

1. 三種方式

常駐、按需提供、偶爾需要。

2. 給予解釋

當(dāng)前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

六、操作 Submit

對當(dāng)前用戶輸入數(shù)據(jù)的提交等動作。

1. 區(qū)分主次

主操作，是我們期望用戶的使用途徑，應(yīng)該在視覺上與次操作做出明顯的區(qū)分，以突顯號召用戶點(diǎn)擊。

2. 合理放置

合理放置操作的位置，可根據(jù)表單的排列方式合理擺放，避免居中。例如表單采用的是頂部對齊，你可以將操作與輸入字段左對齊，這樣用戶在完成輸入的時候，輕松地看到操作按鈕。

3. 準(zhǔn)確命名

清晰可預(yù)測。應(yīng)該準(zhǔn)確地描述用戶點(diǎn)擊按鈕后會發(fā)生什么。

4. 行動號召

按鈕應(yīng)始終帶有強(qiáng)烈的動詞，鼓勵用戶行動。

為了給用戶提供足夠的上下文，在按鈕上使用「動詞」 +「名詞」格式，除了保存，關(guān)閉，取消或確定等常用操作。

5. 禁用操作

在未完成必填字段，禁用操作按鈕，通過直觀的視覺上告訴用戶是否完成了要求，并在恰當(dāng)?shù)臅r刻（表單填寫完成，按鈕被激活）將用戶的視線吸引到按鈕上。

七、驗(yàn)證 Required

對用戶輸入數(shù)據(jù)的驗(yàn)證反饋。

1. 前端驗(yàn)證和后端驗(yàn)證

前端驗(yàn)證不需要服務(wù)器上傳驗(yàn)證的數(shù)據(jù)，就可以判斷，例如手機(jī)格式等；但是要記住在用戶輸入后才進(jìn)行驗(yàn)證，為空不驗(yàn)證；

后端驗(yàn)證，例如手機(jī)注冊輸入效驗(yàn)碼，通過后才注冊成功，需要通過服務(wù)器判斷，才知道用戶輸入的是否正確。

2. 錯在哪里，顯示在哪里

就近原則，方便用戶發(fā)現(xiàn)并修改操作。

3. 結(jié)合顏色、圖標(biāo)和文字

我們不僅僅需要視覺上的區(qū)別（請考慮色盲用戶），還需要文字說明并告知原因和解決辦法，而不是簡單的「輸入錯誤」。

4. 請勿清除

錯誤的字段，請勿在鍵入后直接清除，請給用戶在此基礎(chǔ)上修改的機(jī)會，記住用戶才是決定者。

八、反饋 Feedback

對用戶行為的反饋，告知當(dāng)前狀態(tài)。

1. 操作前：光標(biāo)狀態(tài)

鼠標(biāo)在屏幕上的映射，我們稱之為光標(biāo)（指針），它會隨著操作對象及系統(tǒng)狀態(tài)而呈現(xiàn)出不同形狀，讓用戶對操作的行為及結(jié)果有預(yù)先的心理感知。

2. 操作中：操作反饋

如 default，disabled，hover，fouce，pressed，active，error，success 等。例如輸入框的懸停和鍵入的視覺反饋，從而幫助用戶聚焦。

3. 操作后：按鈕加載

呈現(xiàn)按鈕的加載過程，而不是禁止不動，用戶會以為系統(tǒng)沒有執(zhí)行操作，從而進(jìn)行多次點(diǎn)擊，呈現(xiàn)加載并禁止用戶的后續(xù)點(diǎn)擊操作。

總結(jié)

以上便是對表單設(shè)計的一些總結(jié)，更多的是提供一種分析問題的框架，從結(jié)構(gòu)化的思維分析設(shè)計問題，從而能夠全面的認(rèn)識一個事物并進(jìn)行了解掌握，愿對你有所幫助。

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

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

系列位置效應(yīng)大家可能有點(diǎn)陌生，因?yàn)樗幌窀袷剿菢颖淮蠹沂熘钱?dāng)我看了它的概念之后，我決定和大家分享一下。

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

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

日常工作中，有很多看似平凡的小細(xì)節(jié)，常被大家忽視，卻影響著用戶的真實(shí)體驗(yàn)。比如，前幾天跟同事們針對產(chǎn)品設(shè)計中“+”功能所運(yùn)用的場景、展開形式進(jìn)行討論，發(fā)現(xiàn)這是一個挺有意思的話題。

所以跟大家分享下，我的一些相關(guān)思考。

 1. “+”的運(yùn)用場景 

我們常見的產(chǎn)品中，采用“+”功能的場景，大致分為兩種：a.（上傳）內(nèi)容選項(xiàng)；b.（聚合）快捷功能。

a.（上傳）內(nèi)容選項(xiàng)

根據(jù)“+”的直觀表意，大致也能猜到它的運(yùn)用跟“添加”、“上傳”某個東西相關(guān)。

比如：微博，點(diǎn)擊“+”入口后，是選擇所要上傳的內(nèi)容類型。（可以曬自己精修X小時后媽都認(rèn)不出來的自拍、也可以曬逗比的小視頻、或者老子就想搞一場直播）。

比如：下廚房左上角的“+”，點(diǎn)擊后，是選擇上傳作品，或者創(chuàng)建菜譜的選項(xiàng)。

再比如：工具類產(chǎn)品：Google drive，dropbox、百度網(wǎng)盤、微云，點(diǎn)擊“+”后，同樣是選擇上傳不同文件的入口。 

可以看出，這種情況下的“+”功能，多指“添加”、“上傳”的含義，所承載的內(nèi)容，是同一緯度下的不同選項(xiàng)。

b.（聚合）快捷功能。

眾所周知，產(chǎn)品為了節(jié)省界面空間，同時避免過多功能給用戶不必要的干擾，會選擇把一些不常用的快捷功能收到二級展示。常見的產(chǎn)品中，他們選擇把這些快捷功能塞進(jìn)“+”里。

那么，你是不是覺得“+”功能跟“…”功能承載的內(nèi)容是一樣的？比如：樂趣首頁右上角“...”，同樣是對頻率較低的功能的集合。

那為什么有的產(chǎn)品不直接用“...”，還是選擇用“+”呢？

通過分析發(fā)現(xiàn)，“+”雖然也是聚合快捷功能的入口，但承載的功能有一個共性：都是圍繞著用戶主動打開、發(fā)起、新建...等操作進(jìn)行的，因此用“+”更貼切。

比如：微信里的“+”，包含著：“發(fā)起群聊”，“添加朋友”，“掃一掃”，“收付款”，其實(shí)都跟“添加”有關(guān)。 

比如：淘寶也是類似的處理方式。

 

再比如：愛奇藝的“+”，里面包含的也是跟“添加”，“上傳”相關(guān)，像上傳視頻、掃一掃、我要直播….

反過來看“...”，它聚合的功能，大多是相互關(guān)聯(lián)較弱，且沒有主動添加、上傳等含義的。因此，用一個相對模糊，沒有指向性的符號詮釋，更為合適。

由上可以看出，在這種情況下，“+”作為聚合快捷功能的入口，包含的是頻率較低，且跟主動“新建”、“發(fā)起”、“掃描”等相關(guān)的功能。

 2. “+”的展開方式 

當(dāng)用戶觸發(fā)界面中的“+”時，常見的展開方式有3種，分別是：a.氣泡彈出框；b.動態(tài)欄；c.沉浸模式。

a.氣泡彈出框

氣泡彈出框，這個控件又常被稱為Popover，一般是由一個矩形和三角箭頭組成的彈出窗口，通過點(diǎn)擊Popover內(nèi)的按鈕或者非Popover的屏幕其他區(qū)域可關(guān)閉。 

比如,以微信為代表的“+”的展開方式，采用的就是Popover。一般用于聚合快捷功能。優(yōu)點(diǎn)是觸發(fā)“+”到Popover的距離很近，操作順手，效率高（更像是導(dǎo)航的延伸）。

b.動作欄

動作欄，這個控件官方稱之為Action Sheet，是用戶觸發(fā)“+”后，出現(xiàn)的一種模態(tài)彈出框，里面包含一組與當(dāng)前情景相關(guān)的選項(xiàng)，一般用于上傳內(nèi)容選項(xiàng)。 

在iPhone屏幕上，為了便于單手持握時操作，Action Sheet通常占據(jù)屏幕底部區(qū)域。

比如：以Google drive、Dropbox為代表的產(chǎn)品，需要選擇上傳文件類型的選項(xiàng)。

在這個部分，同事們討論有些爭議點(diǎn)，在于：google drive 和 Dropbox或者微博，它們的加號本來就在底部，所以彈窗讓用戶感覺視線統(tǒng)一。

而有的產(chǎn)品“+”在上面，彈窗從底部出來，擔(dān)心注意力切換和手指移動的路徑比較長，顯得割裂。

帶著這個問題，我調(diào)研了下有類似情況的產(chǎn)品，會不會讓人覺得不舒服。

后來發(fā)現(xiàn)，不會的。原因在于我們常用的、擁有10億+用戶的微信，發(fā)朋友圈時操作就是這樣，而我們并沒有感覺很割裂，反而已經(jīng)習(xí)慣。

同樣，iPhone自帶的“提醒事項(xiàng)”App，也是這樣處理。

后來看了規(guī)范發(fā)現(xiàn)，iOS確實(shí)意識到在iPad上，如果繼續(xù)將Action Sheet顯示在屏幕底部，如果頻繁操作使用會比較累。因此，做了特殊處理。而手機(jī)屏幕上以底部為主，同時點(diǎn)擊空白區(qū)域取消的操作，也是系統(tǒng)用戶所熟知的。

總的來說，操作欄適合承載同一緯度下的內(nèi)容選項(xiàng)，同時，就算“+”在頂部，采用底部動態(tài)欄，體驗(yàn)上也是沒問題的。

c.沉浸模式

沉浸模式，指的是當(dāng)觸發(fā)“+”時，用戶在全局蒙層上進(jìn)行功能操作，同樣適用于上傳內(nèi)容選項(xiàng)。

優(yōu)點(diǎn)是拓展性更強(qiáng)，體現(xiàn)在：1.提升收益；2.品牌認(rèn)知；3.內(nèi)容運(yùn)營。

1.提升收益

比如：微博，采用沉浸模式，下面是上傳不同狀態(tài)類型的入口，上面可以增加廣告收入。

再比如：微云，在沉浸模式下，可以植入自己的“會員”廣告，從而提升會員轉(zhuǎn)化。

2.品牌認(rèn)知

比如：有道云筆記，在頂部的空間內(nèi)，宣傳自己的品牌slogn：“記錄，成為更好的自己”，是一種品牌情感化的傳遞。  

 

3.內(nèi)容運(yùn)營

像“好好住”，它們在這個頁面加入“話題”運(yùn)營推廣。從而給UGC內(nèi)容模塊帶節(jié)奏。

大多數(shù)產(chǎn)品都想營造社區(qū)氛圍，建立用戶關(guān)系，從而增加用戶粘性，提升產(chǎn)品留存。

但要想擁有濃厚的社區(qū)氛圍，首先要有內(nèi)容、才有人愿意看、才有人在里面互動。

現(xiàn)實(shí)問題是，有很多用戶有想發(fā)狀態(tài)的心，但不知道發(fā)啥，從而放棄。因此，我們應(yīng)該作出相應(yīng)的引導(dǎo)。

比如，“好好住”在發(fā)布環(huán)節(jié)，增加話題運(yùn)營“#每天一張生活日常#”入口，就是解決剛才說的“用戶不知道發(fā)什么”的問題。運(yùn)營同學(xué)想點(diǎn)子、造話題、帶節(jié)奏，從而提升用戶的發(fā)布量。

因此可以看出，“沉浸模式”，對于那些有拓展需求（收益、品牌、運(yùn)營）的產(chǎn)品更適用。

不知道你有沒有發(fā)現(xiàn)，相比國外，國內(nèi)采用這種“沉浸模式”的產(chǎn)品偏多。或許在中國這個互聯(lián)網(wǎng)競爭如此激烈的大環(huán)境下，大家不愿意放棄任何一個能夠運(yùn)營或留住用戶的機(jī)會。 

總結(jié) 

總的來說，在常見的產(chǎn)品中“+”功能的運(yùn)用場景有：（上傳）內(nèi)容選項(xiàng)、（聚合）快捷功能；它的展開方式可分為：氣泡彈出框（適合承載快捷功能）、操作欄（適合容納內(nèi)容選項(xiàng)）、沉浸模式（容納內(nèi)容選項(xiàng)的同時，拓展性更強(qiáng)）。其實(shí)，交互形式?jīng)]有好壞之分，只有哪個更適合自己的內(nèi)容需求和產(chǎn)品目標(biāo)，正如Louis Sullivan所說：“形式追隨功能”。

小tips：日常工作中有太多類似“+”這種，看似一個不起眼的小功能，被大家忽略。我們習(xí)慣性看一下競品，拍腦袋決定方案。

但是，慢慢你會發(fā)現(xiàn)，只有深挖和分析這些所謂的“小細(xì)節(jié)”，才能知道別人這么做背后的原因、才能舉一反三的去運(yùn)用、才能更好的兼顧統(tǒng)一性和拓展性，而不是停留在浮于表面的模仿。

希望這篇文章對你有所幫助。 

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

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

在 MIUI 10 的內(nèi)測反饋中，設(shè)計上的耳目一新是眾口稱贊的部分。近日，MIUI設(shè)計總監(jiān) Gary 和幾位核心設(shè)計師一起接受了我們的采訪，開誠布公地介紹了 MIUI10 設(shè)計背后的故事。

這次的采訪我們聊得很細(xì)，細(xì)到某一個交互的設(shè)計思路的變遷，以及為什么最終是以那種方式呈現(xiàn)在 MIUI 10 之上。我相信，無論你是對設(shè)計還是對手機(jī)系統(tǒng)存在好奇，一定都可以從這次訪談里得到一些有益的啟發(fā)。因?yàn)槲覀儧]聊虛的。

△ MIUI設(shè)計團(tuán)隊(duì)

一、徹底干掉虛擬鍵的全面屏手勢是不是太激進(jìn)了？

△ 虛擬鍵不該存在

是不是太激進(jìn)我們還是根據(jù)用戶反饋來判斷，這套手勢因?yàn)闆]有任何虛擬鍵的提示，剛開始確實(shí)需要一兩分鐘來學(xué)習(xí)，但大部分的用戶反饋是：用了就回不去了。目前從客觀上來講，安卓手機(jī)里的全面屏手勢，MIUI 確實(shí)是最好用的，不是我們自己說，而是從各種用戶反饋，包括微博上很多專業(yè)數(shù)碼博主的反饋得來的結(jié)論，很多人在主動地說這件事。

但是在手勢的設(shè)計上，我們是踩過很多坑的。

我們嘗試過很多版本的全面屏手勢，最初還沒有大膽到想干掉所有虛擬鍵，而是想在虛擬鍵上做文章。開始我們覺得那個區(qū)域很多時候3個 button 可能用不上，比如看書的時候，你可能只需要一個返回鍵，所以我們考慮的是在某些特定的應(yīng)用場景里把一些用不到的虛擬鍵收起來，這是做減法，減法做完之后，原來虛擬鍵的位置就空出來了，我們覺得這個空間是浪費(fèi)的，又在想應(yīng)該怎么利用起來，這是早期一個很復(fù)雜的思路。

△ 早期帶橫桿的產(chǎn)品

后來我們又想是不是可以把3個鍵整合成一個虛擬鍵，當(dāng)初做了一個 Demo，把3個鍵集合成一個橫桿，那個時候還沒有看到 iPhone 的模型，在 iOS 的全面屏手勢出來之前，我們就做了一個橫桿子，其實(shí)是受 Palm 的啟發(fā)，這根桿子很早之前 Palm 就有了，蘋果可能也是受 Palm 啟發(fā)。我們設(shè)計的是在那個桿子上橫滑返回，然后上滑回桌面，很接近蘋果目前的處理方式。但最終還是把這個設(shè)計給放棄了，去掉的原因是：提示桿一開始是有比較好的引導(dǎo)操作作用，但一段時間后，用戶就不需要了，另外就是視覺感官上橫桿并不好看，工業(yè)設(shè)計上好不容易才能把手機(jī)下巴縮短幾毫米，你一根橫桿又全給它加回來了，這其實(shí)背離了「全面屏」的初衷，在設(shè)計上是一種不得已而為之的妥協(xié)。

否定橫桿之后，我們才真正全心考慮干掉所有虛擬鍵的方案。但沒有虛擬鍵，就對我們的交互設(shè)計提出了很高的要求，首先，這個手勢的出發(fā)點(diǎn)一定得非常符合直覺，所以不管是返回上一級菜單也好，回到桌面也好，這必須是兩個最基礎(chǔ)的操作（橫滑、上滑），在這兩個基礎(chǔ)操作上略做停頓，我們就可以進(jìn)入應(yīng)用間的快切和多任務(wù)管理，我們用一種非常輕的設(shè)計把它附著在兩個基礎(chǔ)交互上。徹底干掉虛擬鍵這件事最早我們沒有太大的勇氣去做，最后做出來反倒更貼近用戶操作手機(jī)的直覺，有一種柳暗花明的感覺。

△ 簡潔易用的MIUI全面屏手勢

二、MIUI 10的整體視覺設(shè)計遵循了什么思路？

△ 為全面屏而重新設(shè)計

在天氣、日歷、安全中心等等 MIUI 10 的各個角落里，其實(shí)都把原來分段式的畫面結(jié)構(gòu)做了一個全面屏化的設(shè)計，讓頁面不要有很強(qiáng)的割裂感。讓內(nèi)容直接浮在屏幕上，用戶第一時間得到信息，去掉干擾元素。

在非全面屏?xí)r代，手機(jī)有上下兩個比較大的黑色邊框，在視覺上天然是分段式的，之前屏幕內(nèi)的多色塊設(shè)計其實(shí)是對應(yīng)了手機(jī)外觀的這種「分段」，它還是和諧的，但原樣搬到全面屏手機(jī)上，就顯得是把一整塊完整的屏幕生生分割成了幾段。

另外就是原來有一些插畫類型的風(fēng)格和表達(dá)手法，想讓整個畫面有一些親和力。但是因?yàn)槲覀兊挠脩舾采w面很大，兩三億用戶，會有一些年齡層的用戶覺得原先插畫形式有些稚嫩感。所以我們覺得到10這一代，整個系統(tǒng)應(yīng)該更成熟、更普適一些，我們更傾向于做一個對任何人來說都很舒服的視覺設(shè)計。

三、這次整體視覺風(fēng)格有比較大的變動，有沒有什么地方特別花費(fèi)精力的？

舉個特別細(xì)節(jié)的例子。MIUI 10 的時鐘，有一部分用戶會有疑問：在 MIUI 10 里，可見的大多數(shù)頁面是亮色，為什么進(jìn)入時鐘時卻是黑色的？我們其實(shí)也在白色和黑色反復(fù)了很多次，調(diào)研也做了很多次。最終我們認(rèn)為更重要的是時鐘的使用場景問題，比如說你晚上在睡覺前拿起手機(jī)定個鬧鐘，在夜晚或者室內(nèi)，從手機(jī)桌面進(jìn)來打開時鐘，如果進(jìn)入一個很亮的頁面，它即便是好看的，也可能會刺眼。所以我們還是選擇了黑色，當(dāng)然那個對比度到現(xiàn)在還在調(diào)整，我們想把視覺上的美觀和使用的舒服統(tǒng)一進(jìn)來。

四、MIUI 10的自然音效系統(tǒng)是發(fā)布會上的一個驚喜，你們?yōu)槭裁磿氲饺プ鲆粜В?

我明白你這個問題的意思，大部分人的手機(jī)是長期靜音的，音效這個東西，好像已經(jīng)被完全忽略了。但是我們覺得，哪怕只有1%的用戶打開了手機(jī)鈴聲，他也應(yīng)該感受到悅耳而不是打擾和膩煩。如果我沒記錯的話，我們是手機(jī)廠商里第一個針對音效做系統(tǒng)性設(shè)計和優(yōu)化的，我們從「百聽不厭」的自然系音效出發(fā)，和得過格萊美獎的頂尖音樂人合作，還針對手機(jī)音腔的特性對音效做了特別的優(yōu)化。

發(fā)布會上洪鋒把自然音效系統(tǒng)作為一個彩蛋來講，這是我們送給小米手機(jī)用戶的一個禮物，是讓我們驕傲的產(chǎn)品。我不確定有多少用戶會發(fā)現(xiàn)這個產(chǎn)品，有些人可能因?yàn)殚L期靜音他沒有機(jī)會接觸到這個新設(shè)計，但它是一個能帶給人驚喜和溫暖的東西。

五、MIUI的設(shè)計理念是什么？

有些人可能會覺得設(shè)計是一個偏感性的、依賴審美的東西，但是對于一個好的系統(tǒng)設(shè)計，我會從視覺、動效、交互、字體、音效，五個維度的去衡量它的完善程度。

我們用一個人來做類比。視覺，就是感官層面的，比如說你見到一個人會說：這個人很帥；第二就是交互層面的整體邏輯，就好比你跟他說話，發(fā)現(xiàn)他的腦子清楚；第三就是整個動效的層面，這個人的肢體語言很優(yōu)雅；還有字體，我們是從 MIUI8 的時候就開始做了，為了讓大家有更好的閱讀體驗(yàn)，讓人覺得你這個人很有涵養(yǎng)，這已經(jīng)深入到非常細(xì)節(jié)的層面了；最后，我們加了一個聲音的系統(tǒng)，就是你說話的時候，聲音還要好聽。MIUI 在設(shè)計上一直是往多個方面進(jìn)化，我們并不滿足于做出某個漂亮的頁面或者交互，而是追求整個體驗(yàn)層面的飽滿。

做設(shè)計過程中，我們可能會嘗試各種各樣的方案，也有靈光乍現(xiàn)的時刻，但我們會從多個維度完整地去考量這個設(shè)計成果，避免做出一些只是「看上去很美」的自嗨的東西。實(shí)際看起來、用起來、聽起來怎么樣，我們想從這幾個大的感官維度上都能達(dá)到體驗(yàn)層面的滿足。

舉一個例子：比如說之前我們?yōu)榱丝烊サ袅艘恍┙怄i的動畫，用戶一按指紋解鎖，直接進(jìn)到桌面，這種確實(shí)是非常的快，但這種感覺就像什么呢？就像你一按電梯，門就消失了，你進(jìn)了電梯，它咔一聲又關(guān)上了，是很快，但是這種觀感是不太好的。它沒有一種歡迎的意識，就只是把東西呈現(xiàn)給你。這一次我們希望把這個東西改回來，當(dāng)你進(jìn)入手機(jī)桌面的時候，圖標(biāo)應(yīng)該有個簡短的優(yōu)雅的動態(tài)，有一個進(jìn)場亮相的過程。

△ MIUI動態(tài)圖標(biāo)

MIUI 其實(shí)已經(jīng)非常流暢了，在這種地方去掉應(yīng)有的動畫，是可以快100毫秒，但這種快是沒有意義的。讓用戶舒服的看到這個東西，這才是整個體驗(yàn)的核心。所以我們這次就定下一個目標(biāo)，和工程團(tuán)隊(duì)一起，把這種為快而快的東西給它削弱，用戶要的是更優(yōu)雅的體驗(yàn)，而不是那種無感知的快100毫秒。

這個事情說起來不大，但其實(shí)是一種理念層面的進(jìn)步，大家已經(jīng)從那種無意義的純數(shù)據(jù)比拼里解脫出來，更注意到整個體驗(yàn)層面。我們這次會把上面說的進(jìn)場動畫加進(jìn)來，能讓用戶點(diǎn)亮屏幕的時候感覺到更加的舒服，能夠感覺整個系統(tǒng)的「肢體語言」更加優(yōu)雅。

六、對于MIUI 11的展望？

之前的非全面屏?xí)r代，手機(jī)屏幕在16:9的形態(tài)下，UX設(shè)計上其實(shí)已經(jīng)極度成熟。手機(jī)的很多功能和設(shè)計的出新，很大程度上都是在迎合一些小眾的需求，可能一部分人覺得很喜歡這個設(shè)計，但它并不普適。

全面屏手機(jī)的出現(xiàn)又將設(shè)計師的注意力從這些小眾需求拉回到了一個大眾需求：怎么在全面屏手機(jī)上做出更好的體驗(yàn)。因?yàn)橹悄苁謾C(jī)用戶遲早會將手中的設(shè)備換成全面屏設(shè)備，手機(jī)廠商如果只是簡單地把原來16:9的畫面改成18:9，而不根據(jù)硬件特點(diǎn)做真正的深度定制，那就會離用戶體驗(yàn)越來越遠(yuǎn)。

手機(jī)系統(tǒng)的未來我們認(rèn)為也會是這樣的趨勢，軟硬件的結(jié)合會更加的緊密。在這一點(diǎn)上，MIUI 有這個意識，也有行動，目前是走在比較前面的。

MIUI10 落版后，我們也在考慮往這個方向去深化。我們不會特意去考慮11跟10之間非得做出什么大的區(qū)別來，相比這個，我們更關(guān)心的問題是：什么是用戶真正需要的設(shè)計。

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

關(guān)于什么是好設(shè)計的問題的答案，定義了設(shè)計師。

“有什么好處，Phaedrus，還有什么不好 - 需要我們讓任何人告訴我們這些事情嗎？” Robert M. Pirsig，Zen和摩托車維修藝術(shù)：對價值觀的探討

上周，我的一位英雄（@johnmaeda）發(fā)推文說“設(shè)計一直是關(guān)于膚淺和實(shí)質(zhì)的?！蔽艺J(rèn)為這是一個很好的引用。出于某種原因，我們需要時刻提醒我們，設(shè)計不僅僅是花哨的造型。但為什么？為什么物質(zhì)需要防御？如果你看看像Dribbble這樣的網(wǎng)站，設(shè)計的表面看起來真的很吸引人。膚淺的品質(zhì)不需要解釋。但這不是設(shè)計。在他的“ 設(shè)計形狀”一書中，交互設(shè)計師Frank Chimero正確地說“如果我們留在表面并且不深入研究為什么我們不是真正的設(shè)計”。如果問為什么是設(shè)計的本質(zhì)，設(shè)計真的是哲學(xué)的一個分支。

清晰思考

目前我們有一位來自馬斯特里赫特大學(xué)的教授，他們在我們的設(shè)計工作室中。他正在研究野外設(shè)計師，就像人類學(xué)家在非洲研究一個不知名的部落一樣。他研究的主題之一是設(shè)計過程。我總是覺得這是一個有趣的話題，這就是我對Chimero的書的原因：它從設(shè)計師的角度講述了設(shè)計過程。他的內(nèi)部人士認(rèn)為這是一場認(rèn)可的盛宴。關(guān)于他對設(shè)計過程的描述最讓我困惑的是清晰思考的想法。奇美羅對他的工作方式有一個有趣的描述：他只是“出現(xiàn)”并讓“語境說出它需要的東西”。他說“設(shè)計師的工作就是找出一種方法讓問題表明它是真實(shí)的自我，這樣他才能回應(yīng)已經(jīng)出現(xiàn)的真相。

設(shè)計師通過詢問原因來工作。問為什么“更高水平的研究，一個調(diào)查所使用的動機(jī)和思維過程，以便它們可以應(yīng)用于我們自己的情況?！睘槭裁纯雌饋砀?。它將目前的解決方案與用戶的需求相結(jié)合，以設(shè)想更好的解決方案。

哲學(xué)

當(dāng)我們開始問為什么并開始思考真理時，我們就進(jìn)入了哲學(xué)領(lǐng)域。我一直將設(shè)計（和其他藝術(shù)）視為哲學(xué)的視覺形式。比傳統(tǒng)哲學(xué)更精細(xì)的一個，因?yàn)樗粌H通過文字而且通過圖像進(jìn)行思考。有些人可能會稱這種特殊形式的哲學(xué)設(shè)計思維。當(dāng)我們將設(shè)計定義為哲學(xué)的一個分支時，下一步就是質(zhì)疑這個世界上一些偉大的思想家，看看他們對設(shè)計的看法。對我來說，Martin Heidegger有兩個哲學(xué)文本定義了良好的設(shè)計。

關(guān)于您的客戶和互聯(lián)網(wǎng)的真相

第一部是Der Ursprung des Kunstwerkes（藝術(shù)作品的起源），其中海德格爾思考什么使藝術(shù)品成為藝術(shù)品。簡而言之，他認(rèn)為，為了使藝術(shù)作品成為一件好作品，它必須揭示我們存在的真相。他用梵高的一雙農(nóng)夫鞋作為例子。這幅畫是一件藝術(shù)品，因?yàn)樗蛭覀冋故玖诵?，農(nóng)業(yè)，生活的真相，也展示了梵高繪畫時的繪畫媒介和藝術(shù)現(xiàn)狀。它很漂亮，根據(jù)海德格爾的說法，美麗是表達(dá)真相的最好方式。

如果我們將網(wǎng)頁設(shè)計視為一門藝術(shù)，我們可以將海德格爾的藝術(shù)思想轉(zhuǎn)化為網(wǎng)站，并得出一個有用的網(wǎng)站定義。首先（和Chimero在他的書中所說的相似），一個好的網(wǎng)站揭示了用戶與您為其建立網(wǎng)站的組織的互動的真相。當(dāng)然，美麗很重要，因?yàn)樗钦嫦嗾故咀约旱淖罴逊绞健?/span>Beauty以直接方式連接到用戶。它比單詞更快更有效。但海德格爾增加了另一個重要方面。一件好的藝術(shù)品，即一個網(wǎng)站也定義了媒體，即互聯(lián)網(wǎng)。因此，良好網(wǎng)站的問題與互聯(lián)網(wǎng)的問題緊密相關(guān)。一個好的網(wǎng)站向我們展示了互聯(lián)網(wǎng)是什么或可以是什么。

與媒體的深層聯(lián)系

因此，與您正在設(shè)計的介質(zhì)建立深層連接至關(guān)重要。這是海德格爾第二篇文章的主題，它定義了良好的設(shè)計。在他的文本Bauen，wohnen，denken（建筑，生活，思考）他說，在你建造之前，你首先必須學(xué)會生活。在這篇關(guān)于建筑的文章中，他將設(shè)計與對人類基本條件的理解聯(lián)系起來。他敦促設(shè)計師與他們的主題聯(lián)系，實(shí)現(xiàn)他們的主題，而不是以抽象的方式看待它。對于建筑師來說，很容易愛上圖紙，抽象概念和模型。但是如果沒有與你設(shè)計的生活有真正的聯(lián)系，它就會變得毫無用處。就像建筑一樣，互聯(lián)網(wǎng)也是人類的基本需求。我們將互聯(lián)網(wǎng)視為能夠讓您做新事物的東西。但是人們只想做他們一直做的事情。 人們的經(jīng)驗(yàn)和廣泛的興趣促進(jìn)了設(shè)計師的理解和想象力。

通過哲學(xué)分析生活 - 問為什么 - 是良好設(shè)計的基礎(chǔ)。哲學(xué)是生活與設(shè)計之間缺失的紐帶。

一個好網(wǎng)站的定義

就像藝術(shù)一樣，設(shè)計一直需要定義。我認(rèn)為好的設(shè)計問題的答案定義了設(shè)計師。所以：
- 設(shè)計就是問為什么（所以它基本上是哲學(xué)）
- 網(wǎng)頁設(shè)計的目的是找到關(guān)于客戶，用戶和互聯(lián)網(wǎng)
的真相 - 真相最好通過美容傳達(dá)
- 找到關(guān)于你的媒介的真相必須與之建立深厚的聯(lián)系

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

隨著設(shè)計工具和設(shè)計素材越來越豐富，設(shè)計師開始更加靈活地在網(wǎng)頁中使用氣泡、斑點(diǎn)和流體這樣的元素，那么要怎么在網(wǎng)頁設(shè)計的時候用好這些元素呢？今天結(jié)合9個網(wǎng)頁實(shí)例，來分享幾個實(shí)用的技巧~

1. 用氣泡元素營造視覺焦點(diǎn)

在簡約清爽的背景之下，使用色彩鮮艷，形體自然隨性的氣泡元素來創(chuàng)造視覺焦點(diǎn)，氣泡和需要凸顯的圖片素材結(jié)合到一起，有目的地將用戶的視線吸引到關(guān)鍵的元素上，最終起到提升轉(zhuǎn)化率的目的。

2. 用簡約線性的氣泡動畫來驅(qū)動交互

使用幾何特征的簡約氣泡元素來構(gòu)造動畫，是一種成本比較低的做法，動畫會隨著用戶滾動頁面，而有趨向地發(fā)生轉(zhuǎn)變，從而促使用戶不斷地滾動，向下瀏覽查看更多內(nèi)容，這種設(shè)計同樣能夠提升網(wǎng)頁的參與度。

3. 用不規(guī)則的涂鴉斑點(diǎn)強(qiáng)化品牌

斑斕的背景和強(qiáng)對比的涂鴉斑點(diǎn)，同樣是一種引導(dǎo)視覺的策略，但是它更重要地是通過這種風(fēng)格來營造狂野粗糲的品牌氣質(zhì)，幫助用戶更快更直接地 Get 到品牌的獨(dú)特氛圍和神髓。

4. 用液態(tài)色塊拼貼來傳達(dá)時尚感

充滿流動感的色塊和斑點(diǎn)元素類似，同樣充滿了不受控制的自然氣場，充滿對比度的多彩配色則賦予了這些液態(tài)感十足的色彩拼貼以時尚的氣質(zhì)，從而營造出獨(dú)樹一幟的視覺體驗(yàn)。

5. 用漸變色氣泡來營造立體感

微妙的漸變色常常能夠賦予元素以一定的3D立體感，多變的氣泡元素如果擁有漸變色會仿佛擁有景深和層次一般，讓頁面更加立體。當(dāng)然，如果一開始使用動畫軟件來建模，渲染生成動畫，那么就更加到位了。

6. 使用扁平化氣泡元素渲染現(xiàn)代感

扁平化設(shè)計依然是目前的主流，在許多純粹扁平化的頁面中，氣泡類的元素能夠起到很好的點(diǎn)綴作用，讓背景不再單調(diào)，幾何感十足的氣泡邊緣和清爽的色彩，能夠很好的賦予頁面足夠的現(xiàn)代感，干凈而具有當(dāng)下的時代感。

7. 作為圖片載體給人獨(dú)特的印象

氣泡類元素本身的形體都是非常規(guī)的幾何元素，因此它們相比于常見的圓形、矩形、三角形，出現(xiàn)的機(jī)率更低，當(dāng)它作為圖片的載體的時候，這種獨(dú)特的視覺體驗(yàn)更容易給用戶留下印象，四兩撥千斤。

8. 用氣泡動畫來創(chuàng)造趣味性

氣泡動畫可以擁有冷淡的科技感，也可以軟萌可愛充滿趣味感，這取決于動畫的設(shè)計者怎么做。在頁面中使用有趣的氣泡動畫能夠讓頁面更加令人親近，讓用戶在加載和轉(zhuǎn)場的時候會心一笑，記住你的設(shè)計。

9. 用氣泡動畫來構(gòu)建品牌LOGO

這同樣是一種巧妙地吸引用戶同時宣傳品牌的手法，當(dāng)然，前提是你的品牌 LOGO 適合使用這樣的表現(xiàn)方式。氣泡動畫富有活力，有生命力，這一點(diǎn)最終能夠加持在品牌上，同時能夠給用戶留下更加深刻的記憶。

結(jié)語

有機(jī)感是近兩年來比較熱的一個設(shè)計方向，但是它的呈現(xiàn)方式并沒有那么具體，而諸如斑點(diǎn)和氣泡這樣的元素是呈現(xiàn)有機(jī)感最常用的方式，加上新的設(shè)計工具的普及，設(shè)計師開始使用這些元素來創(chuàng)造富有有機(jī)感的設(shè)計。

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