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