如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
01-
肖形圖形-構(gòu)成規(guī)律：A組成B
肖形圖形就是以單一元素或多個(gè)元素的外形共同變化來(lái)進(jìn)行一個(gè)新形象的創(chuàng)造并使兩者之間的含義得以連接。如果兩個(gè)物體同時(shí)改變了原先的形態(tài)，并在這兩種形態(tài)間產(chǎn)生了一種全新且嚴(yán)謹(jǐn)?shù)钠鹾详P(guān)系，一個(gè)新形象也就誕生了。
還記得08年奧運(yùn)期間的各地景觀嗎？你去看城市市民廣場(chǎng)的花壇，從南到北，無(wú)不例外，用鮮花組成一個(gè)大大的奧運(yùn)五環(huán)的圖形，要不然就是京的印章標(biāo)志，或者就是北京歡迎你的字樣。印象最深刻的就是開(kāi)幕式用擊缶來(lái)形成倒計(jì)時(shí)的數(shù)字。
肖形圖形概念是運(yùn)用十分廣泛的一種創(chuàng)意概念，它好理解，上手快。但不能理解成一個(gè)簡(jiǎn)單的重復(fù)羅列的過(guò)程，哪些圖形可以結(jié)合構(gòu)成新的意向？怎么組合更加有趣？怎么控制好元素之間的疏密關(guān)系？
當(dāng)我們面對(duì)兩個(gè)形態(tài)上看似沒(méi)有什么關(guān)聯(lián)的物件時(shí)，不妨先從點(diǎn)、線、面、空間這些角度來(lái)解析一下，或是再換個(gè)角度看，每個(gè)物件都可分解成基本的方形、圓形和三角形，這些隱秘的關(guān)系都為它們的解析重組提供了可塑的條件。
點(diǎn)的創(chuàng)意表現(xiàn)
在圖形中，任何一個(gè)單獨(dú)而細(xì)小的形象都可以稱為點(diǎn)。點(diǎn)是以視覺(jué)中面積大小的感受來(lái)確定的，所以點(diǎn)的形狀并不一定是圓，也可以是其他的幾何形體，點(diǎn)是相對(duì)于線和面而存在的視覺(jué)元素。在設(shè)計(jì)中，點(diǎn)的排列的形狀、方向、大小、位置、聚焦、發(fā)散，能夠給人帶來(lái)不同的心理感受和視覺(jué)沖擊。點(diǎn)的構(gòu)成可分為密集和分散兩種不同的視覺(jué)類(lèi)型。
線的創(chuàng)意表現(xiàn)
線是創(chuàng)意圖形的基本要素之一，線可以串聯(lián)各種視覺(jué)要素，可以分割畫(huà)面和圖像文字，可以使畫(huà)面充滿動(dòng)感，也可以在上穩(wěn)定畫(huà)面。線與線之間的排列可以使畫(huà)面具有節(jié)奏感，線的放射、粗細(xì)、漸變排列可以體現(xiàn)三維空間的感覺(jué)。
線的編排構(gòu)成分為有節(jié)奏、有情感、有空間關(guān)系等的線。每條線都有自己獨(dú)特的情感存在，將不同的線有節(jié)奏地編排在板式中就能形成各種不同的效果。作品通過(guò)線的空間處理，利用獨(dú)特的視覺(jué)效果，能表現(xiàn)強(qiáng)烈的整體感和形式感。
面的創(chuàng)意表現(xiàn)
圖形設(shè)計(jì)中的面由于輪廓的作用，使形態(tài)從周?chē)臻g中突顯出來(lái)，從而比點(diǎn)、線的視覺(jué)沖擊力更大。在進(jìn)行面的創(chuàng)意表現(xiàn)時(shí)，要考慮形狀與面積的對(duì)比、間隔與面積的對(duì)比、面積與面積的對(duì)比等因素。面是視覺(jué)元素創(chuàng)意的基礎(chǔ)，可以運(yùn)用不同的方式來(lái)表現(xiàn)。
02-
同構(gòu)圖形-構(gòu)成規(guī)律：A+B組合
同構(gòu)圖形更注重于體現(xiàn)視覺(jué)意義上的藝術(shù)性和完整性，通過(guò)變形、錯(cuò)位、結(jié)合等種種手段來(lái)制造出虛擬的物象。同構(gòu)可以理解為是一種形態(tài)上的置換行為，即是將組成某物件的其中一部分特定元素與另一種本不屬于其自身卻具備形態(tài)上相似之處的元素進(jìn)行巧妙替換，相互借用，同生共榮，形成新的異象，產(chǎn)生出新的寓意和獨(dú)特的視覺(jué)趣味。
同構(gòu)圖形在設(shè)計(jì)運(yùn)用中最為廣泛的一種圖形概念，但在運(yùn)用時(shí)我們必須注意做到自然巧妙而不生硬。如果總是一味的將一堆相關(guān)元素胡亂堆砌在畫(huà)面中，這樣的畫(huà)面，細(xì)看之下實(shí)在是索然無(wú)味啊。
(一半寫(xiě)實(shí)一半創(chuàng)意)
一個(gè)完整的元素一分為二，一半保持元素原來(lái)的固有形態(tài)讓用戶保持認(rèn)知，另一半就可以進(jìn)行創(chuàng)意設(shè)計(jì)。案例一中是用直白的文案直接進(jìn)入主體，使用手寫(xiě)字體切近用戶的同時(shí)也彰寫(xiě)了格調(diào)；案例二中為了體現(xiàn)科技感，運(yùn)用了電路板進(jìn)行內(nèi)部重新構(gòu)造，增加科技感的同時(shí)也不失可愛(ài)。
(圖形加文字)
圖形加文字，通過(guò)提取文案，在圖形設(shè)計(jì)中保留主要的重點(diǎn)文案，很明確的傳達(dá)品牌的內(nèi)涵，文字在圖形中也盡量按照?qǐng)D形的走勢(shì)進(jìn)行排列。案例中的文案都傳達(dá)了一種積極向上永不服輸?shù)膽B(tài)度，運(yùn)動(dòng)員們也為了勝利而拼搏，體現(xiàn)的耐克的品牌文化。
(雙重曝光)
雙重曝光從嚴(yán)格意義上講不屬于同構(gòu)圖形的一種，但是它也是同構(gòu)兩張圖片兩兩相合成形成的一種特有的風(fēng)格，由于這種風(fēng)格也算大熱的風(fēng)格。我們?cè)谥谱麟p重曝光的時(shí)候盡可能的保證人物形態(tài)的完整性，如上圖的案例中雙重曝光的畫(huà)面很清晰，主次也很分明，很好的保留了人物的五官的完整性。
(APP節(jié)日閃屏)
(點(diǎn))
(線)
(面)
(創(chuàng)意)
(插畫(huà))
作為UI或者產(chǎn)品設(shè)計(jì)師，我們?cè)谠O(shè)計(jì)界面中會(huì)很少運(yùn)用肖形圖形和同構(gòu)圖形進(jìn)行區(qū)創(chuàng)意。但是在APP閃屏頁(yè)中，我們就可以很好的運(yùn)用的肖形圖形和同構(gòu)圖形。可以很好的與品牌LOGO圖形相結(jié)合，更好的為品牌宣傳去服務(wù)。在這方面做的最好的當(dāng)屬Q(mào)Q音樂(lè)這款產(chǎn)品，它很好的利用品牌圖形與點(diǎn)、線、面、插畫(huà)相結(jié)合進(jìn)行創(chuàng)意，很好的體現(xiàn)了節(jié)日的主題和氛圍。
總結(jié)-
肖形圖形和同構(gòu)圖形在設(shè)計(jì)中運(yùn)用廣泛，通過(guò)圖形創(chuàng)意練習(xí)可以增加我們創(chuàng)意思維，也可以鍛煉設(shè)計(jì)總的主次層級(jí)、疏密遠(yuǎn)近的關(guān)系。相對(duì)復(fù)雜的視覺(jué)圖形元素能處理得當(dāng)，相信在界面排版中也能很好的分析出層級(jí)和層次之間的關(guān)系。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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)這里
“解密細(xì)膩制作的關(guān)鍵點(diǎn)。深度剖析了色理知識(shí)”
之前說(shuō)過(guò)我要出一個(gè)吉祥物制作的教程，但是其實(shí)這種教程很多，上百度隨便搜一個(gè)就能知道個(gè)大概?，F(xiàn)在是教程泛濫的時(shí)代，今天看一篇明天看一篇，發(fā)現(xiàn)很多換湯不換藥，有種不看可惜看了又很雞肋的感覺(jué)。所以我在想我要怎么出這篇教程才會(huì)讓大家有所收獲。
設(shè)計(jì)的進(jìn)階道路，大概分為借鑒，實(shí)操，駕馭，引領(lǐng)。從借鑒到引領(lǐng)這個(gè)過(guò)程學(xué)習(xí)、思考、總結(jié)是貫穿的，多實(shí)踐，多總結(jié)才能飛速進(jìn)步，不然有可能你干了5年的設(shè)計(jì)還不如人家干一年來(lái)得出色。我總結(jié)了一些原理性的東西給大家一個(gè)啟發(fā)，做東西掌握實(shí)質(zhì)才能一生二，二生n多，然后你就羽化成“大神”、“大濕”了哈。
關(guān)于吉祥物，詳細(xì)步驟教程大家可以看看其他大神的總結(jié)，不過(guò)大概步驟是要知道，用些什么關(guān)鍵性的工具也需要爛熟于心。
一、吉祥物制作過(guò)程
1、鋼筆勾輪廓（描邊成線稿）
用鋼筆的形狀工具，勾出輪廓，描邊成線稿。要領(lǐng)是需要每個(gè)部分都要畫(huà)全，圖層都分好，詳細(xì)命名。
2、面稿上色（隱藏描邊）
隱藏描邊，形狀上色，即成面稿。各自部分需要單獨(dú)做蒙版，然后整體需要建組加一個(gè)形狀蒙版，便于上色，不超出身體部位。
3、剖析光影（這個(gè)可以找一些實(shí)物，或者大神的吉祥物觀察）
常用圖層樣式：眉毛（斜面浮雕）；眼睛（眼白漸變加內(nèi)陰影，眼眶漸變加羽化）；嘴（加兩個(gè)內(nèi)陰影，一亮一暗，內(nèi)部光影用鋼筆勾，羽化）；身體（漸變，暗部正片疊底一個(gè)內(nèi)陰影強(qiáng)化陰影，再內(nèi)陰影一個(gè)細(xì)的環(huán)境光）；衣服（內(nèi)陰影+漸變，加上明暗交界線和衣服袖口的厚度）。
4、靈活應(yīng)用筆刷，不好畫(huà)的圓弧用鋼筆勾然后羽化
吉祥物細(xì)膩制作過(guò)程中，剖析光影是很關(guān)鍵的。光影細(xì)膩了才能立體生動(dòng)。
二、光影效果總結(jié)
光有明度、方向、色彩等特征。光的反射形成了物體的形象，光讓我們辨別事物，認(rèn)識(shí)材質(zhì)、尺寸和透視。
1、三大面：黑（背光面）、白（受光面）、灰（側(cè)光面）
2、五大調(diào)子：
（1）高光（最亮部分）
不同材質(zhì)的高光強(qiáng)度也不一樣。同樣強(qiáng)度光線的情況下，越是光滑的物體的高光部分越是強(qiáng)；棉、毛、粗糙物體的表面則會(huì)相對(duì)柔和。
（2）中間調(diào)、亮部（本色部分）
一般是物體本身的顏色。
（3）明暗交界線（是最深的部分，刻畫(huà)結(jié)構(gòu)）
它深淺的程度跟光線和物體的材質(zhì)都有關(guān)系。光線越強(qiáng)硬度越高明暗交界線越是明顯。比如光滑的金屬對(duì)比是很強(qiáng)烈的。如果是棉毛制品則相對(duì)柔和。
（4）暗部+反光（暗部本色偏暗，反光受環(huán)境光影響，反光強(qiáng)烈時(shí)暗部和明暗交界線重疊）
反光跟光線強(qiáng)弱和材質(zhì)也有關(guān)系，反光同時(shí)也受環(huán)境色的影響。越是光滑的表面受環(huán)境色影響越是大。
（5）投影
同樣投影跟光線強(qiáng)弱和材質(zhì)也一樣有密切的聯(lián)系。靠近物體的部分通常最深。透明物體投影相對(duì)也弱。
明暗五調(diào)子在深淺變化上有規(guī)律，以明暗交界線為界，在背光部是逐漸亮起來(lái)到反光；在受光部是逐漸亮來(lái)到高光（輝點(diǎn)）。這被稱為漸變規(guī)律。
光有一個(gè)灰色的球還是不夠的，我們還要了解色彩的基本知識(shí)。插畫(huà)中很多插畫(huà)師為了先定好精準(zhǔn)的型和光影效果，一般會(huì)先畫(huà)黑白稿然后用混合模式疊加顏色上去。混合模式在圖片合成和濾鏡中也應(yīng)用廣泛。下面是我的一些總結(jié)，有點(diǎn)類(lèi)似理工科的筆記哈，一張表格弄懂混合模式和色彩模式，大家隨便看看。
三、了解混合模式
知識(shí)體系的連接起來(lái)有助于我們理解，沒(méi)必要去背，理解一下大概心里有個(gè)底，能鎖定自己要用模式的區(qū)域就行。理論是基礎(chǔ)，一切的產(chǎn)出源于實(shí)踐，所以大家一定要好好去實(shí)踐嘗試一下，各種疊加一下，就能弄懂這些模式，就會(huì)覺(jué)得這個(gè)神奇而不神秘了。
四、用HSB模式分析色彩
用HSB是基于人眼的色彩模式，是我們最容易理解的，所以我著重在這塊進(jìn)行分析。色相即色彩，只要不是色盲都能看清楚；明暗也一目了然，素描稿可以理解為只有明暗對(duì)比，色相飽和度為0。 但是飽和度夾雜色彩和明暗的時(shí)候就難以分辨。 畫(huà)畫(huà)用色上中也會(huì)受到一定的干擾。從小畫(huà)畫(huà)， 基本功扎實(shí)的小伙伴有時(shí)候憑感覺(jué)就可以畫(huà)出美麗的色彩， 但是現(xiàn)在很多半路出家的同學(xué)就會(huì)發(fā)現(xiàn)難以入手， 所以搞懂我們吉祥物中色彩飽和度的原理就會(huì)順手很多，就可以比較好的應(yīng)用HSB模式。
我的習(xí)慣是用拾色器的色相版面,橫向從左向右，明度一樣，飽和度變高，縱向從從下往上，飽和度一樣，明度變高，所以右上角的點(diǎn)是明度和飽和度同時(shí)最高的點(diǎn)，所以想要取飽和度高的盡量右，想要亮的盡量往上。
在拾色器中還可以總結(jié)出很多用色技巧，以這個(gè)灰度球?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。說(shuō)明顏色疊加上去，可以改變一些明度值，但是整體趨勢(shì)是一致的。所以在疊加顏色值考慮色相和飽和度即可。
疊加高飽和混色后（球2）五大調(diào)子飽和度為：13 62 76 64 68 可以得出結(jié)論就是光照越強(qiáng)（越趨白）飽和度越低，明暗交接線上飽和值較高。
高光一般都是飽和度的，透明材質(zhì)和反光材質(zhì)，明暗交界線飽和度高，反光強(qiáng)，給人一種通透感。（球3）上我用飽和度模式提高了明暗交界線和反光區(qū)域的飽和度，整個(gè)球看起來(lái)通透了很多。所以要增加通透感可以增加明暗交接線的飽和度，提亮高光（明度）。
下面是我給灰度球上色的過(guò)程。
說(shuō)了這么多，感覺(jué)是不是跟沒(méi)看一樣，有點(diǎn)懵。而且大部分吉祥物上色也是直接上色。我講灰度球上色過(guò)程你幫助深度理解光影和色彩，而且球會(huì)畫(huà)了，其他也不在話下。那我來(lái)總結(jié)一些更實(shí)用的要點(diǎn)。
五、吉祥物細(xì)膩刻畫(huà)的要點(diǎn)
1、鮮明的對(duì)比,整體的飽和度高
（1）吉祥物彌漫著色彩絢爛的卡通色彩，所以一般采用飽和度較高的顏色。
（2）配色方案可以用對(duì)比色。需要注意的是，背景明度不能太高，否則反光發(fā)揮不出作用，就像我們高光也不會(huì)用純白的，這樣畫(huà)面才有張弛。
以下是我對(duì)自己三張吉祥物海報(bào)的色彩分析（除去吉祥物原本的顏色）：
從色盤(pán)構(gòu)成的三角形中看每組配色中都有對(duì)比色。除了對(duì)比色還用到了中差色和相似色。在吉祥物中為了拉開(kāi)顏色的對(duì)比，一般鄰近色作為一個(gè)物體的過(guò)度，不會(huì)作為一個(gè)配色方案?；パa(bǔ)色是對(duì)比最強(qiáng)的色組，放在一起，會(huì)給人強(qiáng)烈的排斥感。若混合在一起，會(huì)調(diào)出渾濁的顏色。但是也不是不能用，可以調(diào)節(jié)明度對(duì)比和飽和度對(duì)比來(lái)減弱這種排斥感。
對(duì)比色中還包含了一種冷暖對(duì)比，第三張海報(bào)“藍(lán)黃”搭配就是對(duì)比中的冷暖對(duì)比，黃色在藍(lán)色中使整個(gè)畫(huà)面更加活潑。
紅色、橙色、黃色--為暖色，象征著：太陽(yáng)、火焰。
綠色、藍(lán)色、黑色--為冷色，象征著：森林、大海、藍(lán)天。
灰色、紫色、白色--為中間色。
總結(jié)：想要顏色豐富又沒(méi)有排斥感，可以用對(duì)比色（包含冷暖對(duì)比），再配合調(diào)節(jié)明度對(duì)比和飽和度對(duì)比。
2、假象光源要定好，再加環(huán)境光
（1 ) 在未加入環(huán)境中，一般假象光是左上和正前光相結(jié)合。整體光源源要一致。（2）為了讓吉祥物更加融入場(chǎng)景，應(yīng)該疊加一些環(huán)境光。
（3）環(huán)境光可以加多個(gè)，一般常用的是兩個(gè)一個(gè)高光一個(gè)反光。
（4）光需要有強(qiáng)度對(duì)比，不要兩個(gè)一樣強(qiáng)弱，沒(méi)有主次。
3、細(xì)膩度的體現(xiàn)
4、用不慣筆刷可以用鋼筆+羽化
要做一個(gè)柔和的吉祥物，就像c4d做出來(lái)的，用“鋼筆+羽化+圖層樣式+蒙版”就夠用了。
如下圖給水滴加環(huán)境色，我們可以用鋼筆畫(huà)出輪廓然后根據(jù)實(shí)際情況調(diào)整羽化程度。
同樣的效果，也可以用內(nèi)陰影做出，還可以多加幾個(gè)光?！颁摴P+羽化”比圖層樣式好用的地方是：受限制少，不依靠物體的輪廓，可以隨機(jī)調(diào)節(jié)區(qū)域。
感覺(jué)差不多了，我們下次再見(jiàn)！
有人會(huì)問(wèn)：好幾點(diǎn)沒(méi)看懂？
答：評(píng)論問(wèn)唄。
有人會(huì)說(shuō)：看了等于沒(méi)看！
答：還是謝謝你看了，寶寶會(huì)繼續(xù)走自己的風(fēng)格。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ì)可以說(shuō)是設(shè)計(jì)界一個(gè)老生常談的話題，針對(duì)它的重要性自不必多言。本文結(jié)合自身經(jīng)驗(yàn)和所看所學(xué)所得總結(jié)，希望能幫助到大家。
從「因子（構(gòu)成要件）」的角度，將表單逐一拆分，從而能夠全面的看待。
如下，大卸八塊，一一道來(lái)：
字段的順序、節(jié)奏、外觀和組織。
1. 只問(wèn)所需
必要而不是全部，簡(jiǎn)化表單，或許是優(yōu)化表單的最大建議。簡(jiǎn)化的辦法之一就是追溯每個(gè)字段為什么需要，是否是當(dāng)前最相關(guān)的信息，如果它是可選的，最好不要顯示。
2. 有理排序
先問(wèn)什么，再問(wèn)什么，前后字段根據(jù)相關(guān)性循循漸進(jìn)。
3. 從易到難
從用戶相對(duì)無(wú)抵觸的信息開(kāi)始逐漸到隱私的信息，而不是一開(kāi)始就讓用戶萌生退意。
4. 組織相關(guān)
在繁多字段的情況下，將相關(guān)字段按照順序進(jìn)行分類(lèi)組合，并通過(guò)增加一些額外的空間或者主標(biāo)題將它們分成語(yǔ)義組，增加了頁(yè)面呼吸和節(jié)奏感，從而幫助用戶更加輕松完成表單。
5. 單列呈現(xiàn)
單列，只需眼睛沿著自然的方向從上至下，便于用戶理解操作。多列，眼睛需要按照「之」形進(jìn)行瀏覽，從而增加瀏覽和理解認(rèn)知的時(shí)間。
當(dāng)然單列呈現(xiàn)還是多列，并非絕對(duì)，需根據(jù)頁(yè)面空間，表單內(nèi)容及性質(zhì)共同決定。
6. 提高對(duì)比度
提高顏色的對(duì)比度，你的用戶群體可不是高清屏，飛行員。
標(biāo)簽告訴用戶需要輸入什么。
1. 名詞標(biāo)簽
名詞具有很好的描述性且簡(jiǎn)潔明了。常用的字段可以使用大家熟悉的圖標(biāo)代替文本。
2. 標(biāo)簽位置
左對(duì)齊、右對(duì)齊、頂部對(duì)齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動(dòng)標(biāo)簽。
多數(shù)情況下，謹(jǐn)慎使用內(nèi)聯(lián)標(biāo)簽，在用戶輸入后，內(nèi)聯(lián)標(biāo)簽會(huì)消失，用戶無(wú)法判斷輸入的內(nèi)容是否符合，當(dāng)然在用戶熟悉且簡(jiǎn)單的字段下可采用（例如登錄中只有賬號(hào)和密碼）。針對(duì)以上問(wèn)題，你可以采用內(nèi)聯(lián)浮動(dòng)標(biāo)簽解決內(nèi)聯(lián)標(biāo)簽在輸入后標(biāo)簽消失的弊端。
承載用戶輸入的區(qū)域。
1. 自動(dòng)對(duì)焦（PC端）
進(jìn)行表單頁(yè)面，自動(dòng)對(duì)焦第一個(gè)輸入字段可以引導(dǎo)用戶開(kāi)始進(jìn)行輸入。
2. 提供默認(rèn)值
可根據(jù)已知信息，幫助用戶預(yù)判內(nèi)容。例如可以通過(guò) IP 檢測(cè)出用戶的地理位置。
3. 保存輸入的數(shù)據(jù)
記住用戶已經(jīng)填寫(xiě)的內(nèi)容，以防萬(wàn)一（例如頁(yè)面刷新），從而避免用戶需要再次輸入而放棄。
4. 字段約束
為有要求的字段設(shè)置限制。例如，最大字符數(shù)，電話中數(shù)字、字母符號(hào)等要求，從而有效的避免臟數(shù)據(jù)。
5. 格式化（掩碼）輸入
提供輸入格式，幫助用戶理解所填內(nèi)容且減少錯(cuò)誤發(fā)生。常用于手機(jī)號(hào)碼、日期、銀行卡和郵編等。
6. 匹配鍵盤(pán)（移動(dòng)端）
提供合適的鍵盤(pán)，幫助用戶快速完成。
7. 區(qū)分可填
如上所述，盡量避免可填字段。如果不可避免，應(yīng)該做明確區(qū)分。根據(jù)經(jīng)驗(yàn)，可填和必填的數(shù)量少的做標(biāo)記說(shuō)明。
常規(guī)做法：必填，使用「*」星號(hào)符；可填，使用「（選填）」。
標(biāo)簽的額外描述，幫助用戶了解可輸入的數(shù)據(jù)類(lèi)型和格式提示。
1. 顏色區(qū)分
它是內(nèi)容提示，而不是內(nèi)容。
2. 不是所有輸入框都需要占位符
占位符是對(duì)輸入內(nèi)容有特殊要求的提示或提醒，也可理解為對(duì)標(biāo)簽的補(bǔ)充，并不是所有的輸入框都需要占位符。
3. 輸入后消失
不要在鼠標(biāo)鍵入后消失，而是在輸入內(nèi)容后消失，這樣可以在用戶還未輸入的時(shí)候，依然幫助到用戶。
如果提示特別復(fù)雜或者重要，請(qǐng)使用幫助，它會(huì)一直顯示在那里。
說(shuō)明要求，解釋原因，甚至幫助回憶。
1. 三種方式
常駐、按需提供、偶爾需要。
2. 給予解釋
當(dāng)前需要用戶填寫(xiě)相對(duì)隱私的信息時(shí)，請(qǐng)給予解釋這么做的原因及目的。
對(duì)當(dāng)前用戶輸入數(shù)據(jù)的提交等動(dòng)作。
1. 區(qū)分主次
主操作，是我們期望用戶的使用途徑，應(yīng)該在視覺(jué)上與次操作做出明顯的區(qū)分，以突顯號(hào)召用戶點(diǎn)擊。
2. 合理放置
合理放置操作的位置，可根據(jù)表單的排列方式合理擺放，避免居中。例如表單采用的是頂部對(duì)齊，你可以將操作與輸入字段左對(duì)齊，這樣用戶在完成輸入的時(shí)候，輕松地看到操作按鈕。
3. 準(zhǔn)確命名
清晰可預(yù)測(cè)。應(yīng)該準(zhǔn)確地描述用戶點(diǎn)擊按鈕后會(huì)發(fā)生什么。
4. 行動(dòng)號(hào)召
按鈕應(yīng)始終帶有強(qiáng)烈的動(dòng)詞，鼓勵(lì)用戶行動(dòng)。
為了給用戶提供足夠的上下文，在按鈕上使用「動(dòng)詞」 +「名詞」格式，除了保存，關(guān)閉，取消或確定等常用操作。
5. 禁用操作
在未完成必填字段，禁用操作按鈕，通過(guò)直觀的視覺(jué)上告訴用戶是否完成了要求，并在恰當(dāng)?shù)臅r(shí)刻（表單填寫(xiě)完成，按鈕被激活）將用戶的視線吸引到按鈕上。
對(duì)用戶輸入數(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ī)注冊(cè)輸入效驗(yàn)碼，通過(guò)后才注冊(cè)成功，需要通過(guò)服務(wù)器判斷，才知道用戶輸入的是否正確。
2. 錯(cuò)在哪里，顯示在哪里
就近原則，方便用戶發(fā)現(xiàn)并修改操作。
3. 結(jié)合顏色、圖標(biāo)和文字
我們不僅僅需要視覺(jué)上的區(qū)別（請(qǐng)考慮色盲用戶），還需要文字說(shuō)明并告知原因和解決辦法，而不是簡(jiǎn)單的「輸入錯(cuò)誤」。
4. 請(qǐng)勿清除
錯(cuò)誤的字段，請(qǐng)勿在鍵入后直接清除，請(qǐng)給用戶在此基礎(chǔ)上修改的機(jī)會(huì)，記住用戶才是決定者。
對(duì)用戶行為的反饋，告知當(dāng)前狀態(tài)。
1. 操作前：光標(biāo)狀態(tài)
鼠標(biāo)在屏幕上的映射，我們稱之為光標(biāo)（指針），它會(huì)隨著操作對(duì)象及系統(tǒng)狀態(tài)而呈現(xiàn)出不同形狀，讓用戶對(duì)操作的行為及結(jié)果有預(yù)先的心理感知。
2. 操作中：操作反饋
如 default，disabled，hover，fouce，pressed，active，error，success 等。例如輸入框的懸停和鍵入的視覺(jué)反饋，從而幫助用戶聚焦。
3. 操作后：按鈕加載
呈現(xiàn)按鈕的加載過(guò)程，而不是禁止不動(dòng)，用戶會(huì)以為系統(tǒng)沒(méi)有執(zhí)行操作，從而進(jìn)行多次點(diǎn)擊，呈現(xiàn)加載并禁止用戶的后續(xù)點(diǎn)擊操作。
以上便是對(duì)表單設(shè)計(jì)的一些總結(jié)，更多的是提供一種分析問(wèn)題的框架，從結(jié)構(gòu)化的思維分析設(shè)計(jì)問(wèn)題，從而能夠全面的認(rèn)識(shí)一個(gè)事物并進(jìn)行了解掌握，愿對(duì)你有所幫助。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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)這里
系列位置效應(yīng)大家可能有點(diǎn)陌生，因?yàn)樗幌窀袷剿菢颖淮蠹沂熘?，但是?dāng)我看了它的概念之后，我決定和大家分享一下。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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)這里
日常工作中，有很多看似平凡的小細(xì)節(jié)，常被大家忽視，卻影響著用戶的真實(shí)體驗(yàn)。比如，前幾天跟同事們針對(duì)產(chǎn)品設(shè)計(jì)中“+”功能所運(yùn)用的場(chǎng)景、展開(kāi)形式進(jìn)行討論，發(fā)現(xiàn)這是一個(gè)挺有意思的話題。
所以跟大家分享下，我的一些相關(guān)思考。
1. “+”的運(yùn)用場(chǎng)景
我們常見(jiàn)的產(chǎn)品中，采用“+”功能的場(chǎng)景，大致分為兩種：a.（上傳）內(nèi)容選項(xiàng)；b.（聚合）快捷功能。
a.（上傳）內(nèi)容選項(xiàng)
根據(jù)“+”的直觀表意，大致也能猜到它的運(yùn)用跟“添加”、“上傳”某個(gè)東西相關(guān)。
比如：微博，點(diǎn)擊“+”入口后，是選擇所要上傳的內(nèi)容類(lèi)型。（可以曬自己精修X小時(shí)后媽都認(rèn)不出來(lái)的自拍、也可以曬逗比的小視頻、或者老子就想搞一場(chǎng)直播）。
比如：下廚房左上角的“+”，點(diǎn)擊后，是選擇上傳作品，或者創(chuàng)建菜譜的選項(xiàng)。
再比如：工具類(lèi)產(chǎn)品：Google drive，dropbox、百度網(wǎng)盤(pán)、微云，點(diǎn)擊“+”后，同樣是選擇上傳不同文件的入口。
可以看出，這種情況下的“+”功能，多指“添加”、“上傳”的含義，所承載的內(nèi)容，是同一緯度下的不同選項(xiàng)。
b.（聚合）快捷功能。
眾所周知，產(chǎn)品為了節(jié)省界面空間，同時(shí)避免過(guò)多功能給用戶不必要的干擾，會(huì)選擇把一些不常用的快捷功能收到二級(jí)展示。常見(jiàn)的產(chǎn)品中，他們選擇把這些快捷功能塞進(jìn)“+”里。
那么，你是不是覺(jué)得“+”功能跟“…”功能承載的內(nèi)容是一樣的？比如：樂(lè)趣首頁(yè)右上角“...”，同樣是對(duì)頻率較低的功能的集合。
那為什么有的產(chǎn)品不直接用“...”，還是選擇用“+”呢？
通過(guò)分析發(fā)現(xiàn)，“+”雖然也是聚合快捷功能的入口，但承載的功能有一個(gè)共性：都是圍繞著用戶主動(dòng)打開(kāi)、發(fā)起、新建...等操作進(jìn)行的，因此用“+”更貼切。
比如：微信里的“+”，包含著：“發(fā)起群聊”，“添加朋友”，“掃一掃”，“收付款”，其實(shí)都跟“添加”有關(guān)。
比如：淘寶也是類(lèi)似的處理方式。
再比如：愛(ài)奇藝的“+”，里面包含的也是跟“添加”，“上傳”相關(guān)，像上傳視頻、掃一掃、我要直播….
反過(guò)來(lái)看“...”，它聚合的功能，大多是相互關(guān)聯(lián)較弱，且沒(méi)有主動(dòng)添加、上傳等含義的。因此，用一個(gè)相對(duì)模糊，沒(méi)有指向性的符號(hào)詮釋，更為合適。
由上可以看出，在這種情況下，“+”作為聚合快捷功能的入口，包含的是頻率較低，且跟主動(dòng)“新建”、“發(fā)起”、“掃描”等相關(guān)的功能。
2. “+”的展開(kāi)方式
當(dāng)用戶觸發(fā)界面中的“+”時(shí)，常見(jiàn)的展開(kāi)方式有3種，分別是：a.氣泡彈出框；b.動(dòng)態(tài)欄；c.沉浸模式。
a.氣泡彈出框
氣泡彈出框，這個(gè)控件又常被稱為Popover，一般是由一個(gè)矩形和三角箭頭組成的彈出窗口，通過(guò)點(diǎn)擊Popover內(nèi)的按鈕或者非Popover的屏幕其他區(qū)域可關(guān)閉。
比如,以微信為代表的“+”的展開(kāi)方式，采用的就是Popover。一般用于聚合快捷功能。優(yōu)點(diǎn)是觸發(fā)“+”到Popover的距離很近，操作順手，效率高（更像是導(dǎo)航的延伸）。
b.動(dòng)作欄
動(dòng)作欄，這個(gè)控件官方稱之為Action Sheet，是用戶觸發(fā)“+”后，出現(xiàn)的一種模態(tài)彈出框，里面包含一組與當(dāng)前情景相關(guān)的選項(xiàng)，一般用于上傳內(nèi)容選項(xiàng)。
在iPhone屏幕上，為了便于單手持握時(shí)操作，Action Sheet通常占據(jù)屏幕底部區(qū)域。
比如：以Google drive、Dropbox為代表的產(chǎn)品，需要選擇上傳文件類(lèi)型的選項(xiàng)。
在這個(gè)部分，同事們討論有些爭(zhēng)議點(diǎn)，在于：google drive 和 Dropbox或者微博，它們的加號(hào)本來(lái)就在底部，所以彈窗讓用戶感覺(jué)視線統(tǒng)一。
而有的產(chǎn)品“+”在上面，彈窗從底部出來(lái)，擔(dān)心注意力切換和手指移動(dòng)的路徑比較長(zhǎng)，顯得割裂。
帶著這個(gè)問(wèn)題，我調(diào)研了下有類(lèi)似情況的產(chǎn)品，會(huì)不會(huì)讓人覺(jué)得不舒服。
后來(lái)發(fā)現(xiàn)，不會(huì)的。原因在于我們常用的、擁有10億+用戶的微信，發(fā)朋友圈時(shí)操作就是這樣，而我們并沒(méi)有感覺(jué)很割裂，反而已經(jīng)習(xí)慣。
同樣，iPhone自帶的“提醒事項(xiàng)”App，也是這樣處理。
后來(lái)看了規(guī)范發(fā)現(xiàn)，iOS確實(shí)意識(shí)到在iPad上，如果繼續(xù)將Action Sheet顯示在屏幕底部，如果頻繁操作使用會(huì)比較累。因此，做了特殊處理。而手機(jī)屏幕上以底部為主，同時(shí)點(diǎn)擊空白區(qū)域取消的操作，也是系統(tǒng)用戶所熟知的。
總的來(lái)說(shuō)，操作欄適合承載同一緯度下的內(nèi)容選項(xiàng)，同時(shí)，就算“+”在頂部，采用底部動(dòng)態(tài)欄，體驗(yàn)上也是沒(méi)問(wèn)題的。
c.沉浸模式
沉浸模式，指的是當(dāng)觸發(fā)“+”時(shí)，用戶在全局蒙層上進(jìn)行功能操作，同樣適用于上傳內(nèi)容選項(xiàng)。
優(yōu)點(diǎn)是拓展性更強(qiáng)，體現(xiàn)在：1.提升收益；2.品牌認(rèn)知；3.內(nèi)容運(yùn)營(yíng)。
1.提升收益
比如：微博，采用沉浸模式，下面是上傳不同狀態(tài)類(lèi)型的入口，上面可以增加廣告收入。
再比如：微云，在沉浸模式下，可以植入自己的“會(huì)員”廣告，從而提升會(huì)員轉(zhuǎn)化。
2.品牌認(rèn)知
比如：有道云筆記，在頂部的空間內(nèi)，宣傳自己的品牌slogn：“記錄，成為更好的自己”，是一種品牌情感化的傳遞。
3.內(nèi)容運(yùn)營(yíng)
像“好好住”，它們?cè)谶@個(gè)頁(yè)面加入“話題”運(yùn)營(yíng)推廣。從而給UGC內(nèi)容模塊帶節(jié)奏。
大多數(shù)產(chǎn)品都想營(yíng)造社區(qū)氛圍，建立用戶關(guān)系，從而增加用戶粘性，提升產(chǎn)品留存。
但要想擁有濃厚的社區(qū)氛圍，首先要有內(nèi)容、才有人愿意看、才有人在里面互動(dòng)。
現(xiàn)實(shí)問(wèn)題是，有很多用戶有想發(fā)狀態(tài)的心，但不知道發(fā)啥，從而放棄。因此，我們應(yīng)該作出相應(yīng)的引導(dǎo)。
比如，“好好住”在發(fā)布環(huán)節(jié)，增加話題運(yùn)營(yíng)“#每天一張生活日常#”入口，就是解決剛才說(shuō)的“用戶不知道發(fā)什么”的問(wèn)題。運(yùn)營(yíng)同學(xué)想點(diǎn)子、造話題、帶節(jié)奏，從而提升用戶的發(fā)布量。
因此可以看出，“沉浸模式”，對(duì)于那些有拓展需求（收益、品牌、運(yùn)營(yíng)）的產(chǎn)品更適用。
不知道你有沒(méi)有發(fā)現(xiàn)，相比國(guó)外，國(guó)內(nèi)采用這種“沉浸模式”的產(chǎn)品偏多。或許在中國(guó)這個(gè)互聯(lián)網(wǎng)競(jìng)爭(zhēng)如此激烈的大環(huán)境下，大家不愿意放棄任何一個(gè)能夠運(yùn)營(yíng)或留住用戶的機(jī)會(huì)。
總結(jié)
總的來(lái)說(shuō)，在常見(jiàn)的產(chǎn)品中“+”功能的運(yùn)用場(chǎng)景有：（上傳）內(nèi)容選項(xiàng)、（聚合）快捷功能；它的展開(kāi)方式可分為：氣泡彈出框（適合承載快捷功能）、操作欄（適合容納內(nèi)容選項(xiàng)）、沉浸模式（容納內(nèi)容選項(xiàng)的同時(shí)，拓展性更強(qiáng)）。其實(shí)，交互形式?jīng)]有好壞之分，只有哪個(gè)更適合自己的內(nèi)容需求和產(chǎn)品目標(biāo)，正如Louis Sullivan所說(shuō)：“形式追隨功能”。
小tips：日常工作中有太多類(lèi)似“+”這種，看似一個(gè)不起眼的小功能，被大家忽略。我們習(xí)慣性看一下競(jìng)品，拍腦袋決定方案。
但是，慢慢你會(huì)發(fā)現(xiàn)，只有深挖和分析這些所謂的“小細(xì)節(jié)”，才能知道別人這么做背后的原因、才能舉一反三的去運(yùn)用、才能更好的兼顧統(tǒng)一性和拓展性，而不是停留在浮于表面的模仿。
希望這篇文章對(duì)你有所幫助。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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)這里
在 MIUI 10 的內(nèi)測(cè)反饋中，設(shè)計(jì)上的耳目一新是眾口稱贊的部分。近日，MIUI設(shè)計(jì)總監(jiān) Gary 和幾位核心設(shè)計(jì)師一起接受了我們的采訪，開(kāi)誠(chéng)布公地介紹了 MIUI10 設(shè)計(jì)背后的故事。這次的采訪我們聊得很細(xì)，細(xì)到某一個(gè)交互的設(shè)計(jì)思路的變遷，以及為什么最終是以那種方式呈現(xiàn)在 MIUI 10 之上。我相信，無(wú)論你是對(duì)設(shè)計(jì)還是對(duì)手機(jī)系統(tǒng)存在好奇，一定都可以從這次訪談里得到一些有益的啟發(fā)。因?yàn)槲覀儧](méi)聊虛的。
△ MIUI設(shè)計(jì)團(tuán)隊(duì)
△ 虛擬鍵不該存在
是不是太激進(jìn)我們還是根據(jù)用戶反饋來(lái)判斷，這套手勢(shì)因?yàn)闆](méi)有任何虛擬鍵的提示，剛開(kāi)始確實(shí)需要一兩分鐘來(lái)學(xué)習(xí)，但大部分的用戶反饋是：用了就回不去了。目前從客觀上來(lái)講，安卓手機(jī)里的全面屏手勢(shì)，MIUI 確實(shí)是最好用的，不是我們自己說(shuō)，而是從各種用戶反饋，包括微博上很多專業(yè)數(shù)碼博主的反饋得來(lái)的結(jié)論，很多人在主動(dòng)地說(shuō)這件事。
但是在手勢(shì)的設(shè)計(jì)上，我們是踩過(guò)很多坑的。
我們嘗試過(guò)很多版本的全面屏手勢(shì)，最初還沒(méi)有大膽到想干掉所有虛擬鍵，而是想在虛擬鍵上做文章。開(kāi)始我們覺(jué)得那個(gè)區(qū)域很多時(shí)候3個(gè) button 可能用不上，比如看書(shū)的時(shí)候，你可能只需要一個(gè)返回鍵，所以我們考慮的是在某些特定的應(yīng)用場(chǎng)景里把一些用不到的虛擬鍵收起來(lái)，這是做減法，減法做完之后，原來(lái)虛擬鍵的位置就空出來(lái)了，我們覺(jué)得這個(gè)空間是浪費(fèi)的，又在想應(yīng)該怎么利用起來(lái)，這是早期一個(gè)很復(fù)雜的思路。
△ 早期帶橫桿的產(chǎn)品
后來(lái)我們又想是不是可以把3個(gè)鍵整合成一個(gè)虛擬鍵，當(dāng)初做了一個(gè) Demo，把3個(gè)鍵集合成一個(gè)橫桿，那個(gè)時(shí)候還沒(méi)有看到 iPhone 的模型，在 iOS 的全面屏手勢(shì)出來(lái)之前，我們就做了一個(gè)橫桿子，其實(shí)是受 Palm 的啟發(fā)，這根桿子很早之前 Palm 就有了，蘋(píng)果可能也是受 Palm 啟發(fā)。我們?cè)O(shè)計(jì)的是在那個(gè)桿子上橫滑返回，然后上滑回桌面，很接近蘋(píng)果目前的處理方式。但最終還是把這個(gè)設(shè)計(jì)給放棄了，去掉的原因是：提示桿一開(kāi)始是有比較好的引導(dǎo)操作作用，但一段時(shí)間后，用戶就不需要了，另外就是視覺(jué)感官上橫桿并不好看，工業(yè)設(shè)計(jì)上好不容易才能把手機(jī)下巴縮短幾毫米，你一根橫桿又全給它加回來(lái)了，這其實(shí)背離了「全面屏」的初衷，在設(shè)計(jì)上是一種不得已而為之的妥協(xié)。
否定橫桿之后，我們才真正全心考慮干掉所有虛擬鍵的方案。但沒(méi)有虛擬鍵，就對(duì)我們的交互設(shè)計(jì)提出了很高的要求，首先，這個(gè)手勢(shì)的出發(fā)點(diǎn)一定得非常符合直覺(jué)，所以不管是返回上一級(jí)菜單也好，回到桌面也好，這必須是兩個(gè)最基礎(chǔ)的操作（橫滑、上滑），在這兩個(gè)基礎(chǔ)操作上略做停頓，我們就可以進(jìn)入應(yīng)用間的快切和多任務(wù)管理，我們用一種非常輕的設(shè)計(jì)把它附著在兩個(gè)基礎(chǔ)交互上。徹底干掉虛擬鍵這件事最早我們沒(méi)有太大的勇氣去做，最后做出來(lái)反倒更貼近用戶操作手機(jī)的直覺(jué)，有一種柳暗花明的感覺(jué)。
△ 簡(jiǎn)潔易用的MIUI全面屏手勢(shì)
△ 為全面屏而重新設(shè)計(jì)
在天氣、日歷、安全中心等等 MIUI 10 的各個(gè)角落里，其實(shí)都把原來(lái)分段式的畫(huà)面結(jié)構(gòu)做了一個(gè)全面屏化的設(shè)計(jì)，讓頁(yè)面不要有很強(qiáng)的割裂感。讓內(nèi)容直接浮在屏幕上，用戶第一時(shí)間得到信息，去掉干擾元素。
在非全面屏?xí)r代，手機(jī)有上下兩個(gè)比較大的黑色邊框，在視覺(jué)上天然是分段式的，之前屏幕內(nèi)的多色塊設(shè)計(jì)其實(shí)是對(duì)應(yīng)了手機(jī)外觀的這種「分段」，它還是和諧的，但原樣搬到全面屏手機(jī)上，就顯得是把一整塊完整的屏幕生生分割成了幾段。
另外就是原來(lái)有一些插畫(huà)類(lèi)型的風(fēng)格和表達(dá)手法，想讓整個(gè)畫(huà)面有一些親和力。但是因?yàn)槲覀兊挠脩舾采w面很大，兩三億用戶，會(huì)有一些年齡層的用戶覺(jué)得原先插畫(huà)形式有些稚嫩感。所以我們覺(jué)得到10這一代，整個(gè)系統(tǒng)應(yīng)該更成熟、更普適一些，我們更傾向于做一個(gè)對(duì)任何人來(lái)說(shuō)都很舒服的視覺(jué)設(shè)計(jì)。
舉個(gè)特別細(xì)節(jié)的例子。MIUI 10 的時(shí)鐘，有一部分用戶會(huì)有疑問(wèn)：在 MIUI 10 里，可見(jiàn)的大多數(shù)頁(yè)面是亮色，為什么進(jìn)入時(shí)鐘時(shí)卻是黑色的？我們其實(shí)也在白色和黑色反復(fù)了很多次，調(diào)研也做了很多次。最終我們認(rèn)為更重要的是時(shí)鐘的使用場(chǎng)景問(wèn)題，比如說(shuō)你晚上在睡覺(jué)前拿起手機(jī)定個(gè)鬧鐘，在夜晚或者室內(nèi)，從手機(jī)桌面進(jìn)來(lái)打開(kāi)時(shí)鐘，如果進(jìn)入一個(gè)很亮的頁(yè)面，它即便是好看的，也可能會(huì)刺眼。所以我們還是選擇了黑色，當(dāng)然那個(gè)對(duì)比度到現(xiàn)在還在調(diào)整，我們想把視覺(jué)上的美觀和使用的舒服統(tǒng)一進(jìn)來(lái)。
我明白你這個(gè)問(wèn)題的意思，大部分人的手機(jī)是長(zhǎng)期靜音的，音效這個(gè)東西，好像已經(jīng)被完全忽略了。但是我們覺(jué)得，哪怕只有1%的用戶打開(kāi)了手機(jī)鈴聲，他也應(yīng)該感受到悅耳而不是打擾和膩煩。如果我沒(méi)記錯(cuò)的話，我們是手機(jī)廠商里第一個(gè)針對(duì)音效做系統(tǒng)性設(shè)計(jì)和優(yōu)化的，我們從「百聽(tīng)不厭」的自然系音效出發(fā)，和得過(guò)格萊美獎(jiǎng)的頂尖音樂(lè)人合作，還針對(duì)手機(jī)音腔的特性對(duì)音效做了特別的優(yōu)化。
發(fā)布會(huì)上洪鋒把自然音效系統(tǒng)作為一個(gè)彩蛋來(lái)講，這是我們送給小米手機(jī)用戶的一個(gè)禮物，是讓我們驕傲的產(chǎn)品。我不確定有多少用戶會(huì)發(fā)現(xiàn)這個(gè)產(chǎn)品，有些人可能因?yàn)殚L(zhǎng)期靜音他沒(méi)有機(jī)會(huì)接觸到這個(gè)新設(shè)計(jì)，但它是一個(gè)能帶給人驚喜和溫暖的東西。
有些人可能會(huì)覺(jué)得設(shè)計(jì)是一個(gè)偏感性的、依賴審美的東西，但是對(duì)于一個(gè)好的系統(tǒng)設(shè)計(jì)，我會(huì)從視覺(jué)、動(dòng)效、交互、字體、音效，五個(gè)維度的去衡量它的完善程度。
我們用一個(gè)人來(lái)做類(lèi)比。視覺(jué)，就是感官層面的，比如說(shuō)你見(jiàn)到一個(gè)人會(huì)說(shuō)：這個(gè)人很帥；第二就是交互層面的整體邏輯，就好比你跟他說(shuō)話，發(fā)現(xiàn)他的腦子清楚；第三就是整個(gè)動(dòng)效的層面，這個(gè)人的肢體語(yǔ)言很優(yōu)雅；還有字體，我們是從 MIUI8 的時(shí)候就開(kāi)始做了，為了讓大家有更好的閱讀體驗(yàn)，讓人覺(jué)得你這個(gè)人很有涵養(yǎng)，這已經(jīng)深入到非常細(xì)節(jié)的層面了；最后，我們加了一個(gè)聲音的系統(tǒng)，就是你說(shuō)話的時(shí)候，聲音還要好聽(tīng)。MIUI 在設(shè)計(jì)上一直是往多個(gè)方面進(jìn)化，我們并不滿足于做出某個(gè)漂亮的頁(yè)面或者交互，而是追求整個(gè)體驗(yàn)層面的飽滿。
做設(shè)計(jì)過(guò)程中，我們可能會(huì)嘗試各種各樣的方案，也有靈光乍現(xiàn)的時(shí)刻，但我們會(huì)從多個(gè)維度完整地去考量這個(gè)設(shè)計(jì)成果，避免做出一些只是「看上去很美」的自嗨的東西。實(shí)際看起來(lái)、用起來(lái)、聽(tīng)起來(lái)怎么樣，我們想從這幾個(gè)大的感官維度上都能達(dá)到體驗(yàn)層面的滿足。
舉一個(gè)例子：比如說(shuō)之前我們?yōu)榱丝烊サ袅艘恍┙怄i的動(dòng)畫(huà)，用戶一按指紋解鎖，直接進(jìn)到桌面，這種確實(shí)是非常的快，但這種感覺(jué)就像什么呢？就像你一按電梯，門(mén)就消失了，你進(jìn)了電梯，它咔一聲又關(guān)上了，是很快，但是這種觀感是不太好的。它沒(méi)有一種歡迎的意識(shí)，就只是把東西呈現(xiàn)給你。這一次我們希望把這個(gè)東西改回來(lái)，當(dāng)你進(jìn)入手機(jī)桌面的時(shí)候，圖標(biāo)應(yīng)該有個(gè)簡(jiǎn)短的優(yōu)雅的動(dòng)態(tài)，有一個(gè)進(jìn)場(chǎng)亮相的過(guò)程。
△ MIUI動(dòng)態(tài)圖標(biāo)
MIUI 其實(shí)已經(jīng)非常流暢了，在這種地方去掉應(yīng)有的動(dòng)畫(huà)，是可以快100毫秒，但這種快是沒(méi)有意義的。讓用戶舒服的看到這個(gè)東西，這才是整個(gè)體驗(yàn)的核心。所以我們這次就定下一個(gè)目標(biāo)，和工程團(tuán)隊(duì)一起，把這種為快而快的東西給它削弱，用戶要的是更優(yōu)雅的體驗(yàn)，而不是那種無(wú)感知的快100毫秒。
這個(gè)事情說(shuō)起來(lái)不大，但其實(shí)是一種理念層面的進(jìn)步，大家已經(jīng)從那種無(wú)意義的純數(shù)據(jù)比拼里解脫出來(lái)，更注意到整個(gè)體驗(yàn)層面。我們這次會(huì)把上面說(shuō)的進(jìn)場(chǎng)動(dòng)畫(huà)加進(jìn)來(lái)，能讓用戶點(diǎn)亮屏幕的時(shí)候感覺(jué)到更加的舒服，能夠感覺(jué)整個(gè)系統(tǒng)的「肢體語(yǔ)言」更加優(yōu)雅。
之前的非全面屏?xí)r代，手機(jī)屏幕在16:9的形態(tài)下，UX設(shè)計(jì)上其實(shí)已經(jīng)極度成熟。手機(jī)的很多功能和設(shè)計(jì)的出新，很大程度上都是在迎合一些小眾的需求，可能一部分人覺(jué)得很喜歡這個(gè)設(shè)計(jì)，但它并不普適。
全面屏手機(jī)的出現(xiàn)又將設(shè)計(jì)師的注意力從這些小眾需求拉回到了一個(gè)大眾需求：怎么在全面屏手機(jī)上做出更好的體驗(yàn)。因?yàn)橹悄苁謾C(jī)用戶遲早會(huì)將手中的設(shè)備換成全面屏設(shè)備，手機(jī)廠商如果只是簡(jiǎn)單地把原來(lái)16:9的畫(huà)面改成18:9，而不根據(jù)硬件特點(diǎn)做真正的深度定制，那就會(huì)離用戶體驗(yàn)越來(lái)越遠(yuǎn)。
手機(jī)系統(tǒng)的未來(lái)我們認(rèn)為也會(huì)是這樣的趨勢(shì)，軟硬件的結(jié)合會(huì)更加的緊密。在這一點(diǎn)上，MIUI 有這個(gè)意識(shí)，也有行動(dòng)，目前是走在比較前面的。
MIUI10 落版后，我們也在考慮往這個(gè)方向去深化。我們不會(huì)特意去考慮11跟10之間非得做出什么大的區(qū)別來(lái)，相比這個(gè)，我們更關(guān)心的問(wèn)題是：什么是用戶真正需要的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)。
“有什么好處，Phaedrus，還有什么不好 - 需要我們讓任何人告訴我們這些事情嗎？” Robert M. Pirsig，Zen和摩托車(chē)維修藝術(shù)：對(duì)價(jià)值觀的探討
上周，我的一位英雄（@johnmaeda）發(fā)推文說(shuō)“設(shè)計(jì)一直是關(guān)于膚淺和實(shí)質(zhì)的?！蔽艺J(rèn)為這是一個(gè)很好的引用。出于某種原因，我們需要時(shí)刻提醒我們，設(shè)計(jì)不僅僅是花哨的造型。但為什么？為什么物質(zhì)需要防御？如果你看看像Dribbble這樣的網(wǎng)站，設(shè)計(jì)的表面看起來(lái)真的很吸引人。膚淺的品質(zhì)不需要解釋。但這不是設(shè)計(jì)。在他的“ 設(shè)計(jì)形狀”一書(shū)中，交互設(shè)計(jì)師Frank Chimero正確地說(shuō)“如果我們留在表面并且不深入研究為什么我們不是真正的設(shè)計(jì)”。如果問(wèn)為什么是設(shè)計(jì)的本質(zhì)，設(shè)計(jì)真的是哲學(xué)的一個(gè)分支。
目前我們有一位來(lái)自馬斯特里赫特大學(xué)的教授，他們?cè)谖覀兊脑O(shè)計(jì)工作室中。他正在研究野外設(shè)計(jì)師，就像人類(lèi)學(xué)家在非洲研究一個(gè)不知名的部落一樣。他研究的主題之一是設(shè)計(jì)過(guò)程。我總是覺(jué)得這是一個(gè)有趣的話題，這就是我對(duì)Chimero的書(shū)的原因：它從設(shè)計(jì)師的角度講述了設(shè)計(jì)過(guò)程。他的內(nèi)部人士認(rèn)為這是一場(chǎng)認(rèn)可的盛宴。關(guān)于他對(duì)設(shè)計(jì)過(guò)程的描述最讓我困惑的是清晰思考的想法。奇美羅對(duì)他的工作方式有一個(gè)有趣的描述：他只是“出現(xiàn)”并讓“語(yǔ)境說(shuō)出它需要的東西”。他說(shuō)“設(shè)計(jì)師的工作就是找出一種方法讓問(wèn)題表明它是真實(shí)的自我，這樣他才能回應(yīng)已經(jīng)出現(xiàn)的真相。
設(shè)計(jì)師通過(guò)詢問(wèn)原因來(lái)工作。問(wèn)為什么“更高水平的研究，一個(gè)調(diào)查所使用的動(dòng)機(jī)和思維過(guò)程，以便它們可以應(yīng)用于我們自己的情況?！睘槭裁纯雌饋?lái)更深。它將目前的解決方案與用戶的需求相結(jié)合，以設(shè)想更好的解決方案。
當(dāng)我們開(kāi)始問(wèn)為什么并開(kāi)始思考真理時(shí)，我們就進(jìn)入了哲學(xué)領(lǐng)域。我一直將設(shè)計(jì)（和其他藝術(shù)）視為哲學(xué)的視覺(jué)形式。比傳統(tǒng)哲學(xué)更精細(xì)的一個(gè)，因?yàn)樗粌H通過(guò)文字而且通過(guò)圖像進(jìn)行思考。有些人可能會(huì)稱這種特殊形式的哲學(xué)設(shè)計(jì)思維。當(dāng)我們將設(shè)計(jì)定義為哲學(xué)的一個(gè)分支時(shí)，下一步就是質(zhì)疑這個(gè)世界上一些偉大的思想家，看看他們對(duì)設(shè)計(jì)的看法。對(duì)我來(lái)說(shuō)，Martin Heidegger有兩個(gè)哲學(xué)文本定義了良好的設(shè)計(jì)。
第一部是Der Ursprung des Kunstwerkes（藝術(shù)作品的起源），其中海德格爾思考什么使藝術(shù)品成為藝術(shù)品。簡(jiǎn)而言之，他認(rèn)為，為了使藝術(shù)作品成為一件好作品，它必須揭示我們存在的真相。他用梵高的一雙農(nóng)夫鞋作為例子。這幅畫(huà)是一件藝術(shù)品，因?yàn)樗蛭覀冋故玖诵樱r(nóng)業(yè)，生活的真相，也展示了梵高繪畫(huà)時(shí)的繪畫(huà)媒介和藝術(shù)現(xiàn)狀。它很漂亮，根據(jù)海德格爾的說(shuō)法，美麗是表達(dá)真相的最好方式。
如果我們將網(wǎng)頁(yè)設(shè)計(jì)視為一門(mén)藝術(shù)，我們可以將海德格爾的藝術(shù)思想轉(zhuǎn)化為網(wǎng)站，并得出一個(gè)有用的網(wǎng)站定義。首先（和Chimero在他的書(shū)中所說(shuō)的相似），一個(gè)好的網(wǎng)站揭示了用戶與您為其建立網(wǎng)站的組織的互動(dòng)的真相。當(dāng)然，美麗很重要，因?yàn)樗钦嫦嗾故咀约旱淖罴逊绞健?/span>Beauty以直接方式連接到用戶。它比單詞更快更有效。但海德格爾增加了另一個(gè)重要方面。一件好的藝術(shù)品，即一個(gè)網(wǎng)站也定義了媒體，即互聯(lián)網(wǎng)。因此，良好網(wǎng)站的問(wèn)題與互聯(lián)網(wǎng)的問(wèn)題緊密相關(guān)。一個(gè)好的網(wǎng)站向我們展示了互聯(lián)網(wǎng)是什么或可以是什么。
因此，與您正在設(shè)計(jì)的介質(zhì)建立深層連接至關(guān)重要。這是海德格爾第二篇文章的主題，它定義了良好的設(shè)計(jì)。在他的文本Bauen，wohnen，denken（建筑，生活，思考）他說(shuō)，在你建造之前，你首先必須學(xué)會(huì)生活。在這篇關(guān)于建筑的文章中，他將設(shè)計(jì)與對(duì)人類(lèi)基本條件的理解聯(lián)系起來(lái)。他敦促設(shè)計(jì)師與他們的主題聯(lián)系，實(shí)現(xiàn)他們的主題，而不是以抽象的方式看待它。對(duì)于建筑師來(lái)說(shuō)，很容易愛(ài)上圖紙，抽象概念和模型。但是如果沒(méi)有與你設(shè)計(jì)的生活有真正的聯(lián)系，它就會(huì)變得毫無(wú)用處。就像建筑一樣，互聯(lián)網(wǎng)也是人類(lèi)的基本需求。我們將互聯(lián)網(wǎng)視為能夠讓您做新事物的東西。但是人們只想做他們一直做的事情。 人們的經(jīng)驗(yàn)和廣泛的興趣促進(jìn)了設(shè)計(jì)師的理解和想象力。
通過(guò)哲學(xué)分析生活 - 問(wèn)為什么 - 是良好設(shè)計(jì)的基礎(chǔ)。哲學(xué)是生活與設(shè)計(jì)之間缺失的紐帶。
就像藝術(shù)一樣，設(shè)計(jì)一直需要定義。我認(rèn)為好的設(shè)計(jì)問(wèn)題的答案定義了設(shè)計(jì)師。所以：
- 設(shè)計(jì)就是問(wèn)為什么（所以它基本上是哲學(xué)）
- 網(wǎng)頁(yè)設(shè)計(jì)的目的是找到關(guān)于客戶，用戶和互聯(lián)網(wǎng)
的真相 - 真相最好通過(guò)美容傳達(dá)
- 找到關(guān)于你的媒介的真相必須與之建立深厚的聯(lián)系
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
隨著設(shè)計(jì)工具和設(shè)計(jì)素材越來(lái)越豐富，設(shè)計(jì)師開(kāi)始更加靈活地在網(wǎng)頁(yè)中使用氣泡、斑點(diǎn)和流體這樣的元素，那么要怎么在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候用好這些元素呢？今天結(jié)合9個(gè)網(wǎng)頁(yè)實(shí)例，來(lái)分享幾個(gè)實(shí)用的技巧~
在簡(jiǎn)約清爽的背景之下，使用色彩鮮艷，形體自然隨性的氣泡元素來(lái)創(chuàng)造視覺(jué)焦點(diǎn)，氣泡和需要凸顯的圖片素材結(jié)合到一起，有目的地將用戶的視線吸引到關(guān)鍵的元素上，最終起到提升轉(zhuǎn)化率的目的。
使用幾何特征的簡(jiǎn)約氣泡元素來(lái)構(gòu)造動(dòng)畫(huà)，是一種成本比較低的做法，動(dòng)畫(huà)會(huì)隨著用戶滾動(dòng)頁(yè)面，而有趨向地發(fā)生轉(zhuǎn)變，從而促使用戶不斷地滾動(dòng)，向下瀏覽查看更多內(nèi)容，這種設(shè)計(jì)同樣能夠提升網(wǎng)頁(yè)的參與度。
斑斕的背景和強(qiáng)對(duì)比的涂鴉斑點(diǎn)，同樣是一種引導(dǎo)視覺(jué)的策略，但是它更重要地是通過(guò)這種風(fēng)格來(lái)營(yíng)造狂野粗糲的品牌氣質(zhì)，幫助用戶更快更直接地 Get 到品牌的獨(dú)特氛圍和神髓。
充滿流動(dòng)感的色塊和斑點(diǎn)元素類(lèi)似，同樣充滿了不受控制的自然氣場(chǎng)，充滿對(duì)比度的多彩配色則賦予了這些液態(tài)感十足的色彩拼貼以時(shí)尚的氣質(zhì)，從而營(yíng)造出獨(dú)樹(shù)一幟的視覺(jué)體驗(yàn)。
微妙的漸變色常常能夠賦予元素以一定的3D立體感，多變的氣泡元素如果擁有漸變色會(huì)仿佛擁有景深和層次一般，讓頁(yè)面更加立體。當(dāng)然，如果一開(kāi)始使用動(dòng)畫(huà)軟件來(lái)建模，渲染生成動(dòng)畫(huà)，那么就更加到位了。
扁平化設(shè)計(jì)依然是目前的主流，在許多純粹扁平化的頁(yè)面中，氣泡類(lèi)的元素能夠起到很好的點(diǎn)綴作用，讓背景不再單調(diào)，幾何感十足的氣泡邊緣和清爽的色彩，能夠很好的賦予頁(yè)面足夠的現(xiàn)代感，干凈而具有當(dāng)下的時(shí)代感。
氣泡類(lèi)元素本身的形體都是非常規(guī)的幾何元素，因此它們相比于常見(jiàn)的圓形、矩形、三角形，出現(xiàn)的機(jī)率更低，當(dāng)它作為圖片的載體的時(shí)候，這種獨(dú)特的視覺(jué)體驗(yàn)更容易給用戶留下印象，四兩撥千斤。
氣泡動(dòng)畫(huà)可以擁有冷淡的科技感，也可以軟萌可愛(ài)充滿趣味感，這取決于動(dòng)畫(huà)的設(shè)計(jì)者怎么做。在頁(yè)面中使用有趣的氣泡動(dòng)畫(huà)能夠讓頁(yè)面更加令人親近，讓用戶在加載和轉(zhuǎn)場(chǎng)的時(shí)候會(huì)心一笑，記住你的設(shè)計(jì)。
這同樣是一種巧妙地吸引用戶同時(shí)宣傳品牌的手法，當(dāng)然，前提是你的品牌 LOGO 適合使用這樣的表現(xiàn)方式。氣泡動(dòng)畫(huà)富有活力，有生命力，這一點(diǎn)最終能夠加持在品牌上，同時(shí)能夠給用戶留下更加深刻的記憶。
有機(jī)感是近兩年來(lái)比較熱的一個(gè)設(shè)計(jì)方向，但是它的呈現(xiàn)方式并沒(méi)有那么具體，而諸如斑點(diǎn)和氣泡這樣的元素是呈現(xiàn)有機(jī)感最常用的方式，加上新的設(shè)計(jì)工具的普及，設(shè)計(jì)師開(kāi)始使用這些元素來(lái)創(chuàng)造富有有機(jī)感的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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.bouu.cn
