如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
排版就是要將版面中必要的元素進行有序組織、擺放，在空空如也的畫板里把一堆雜亂無章的東西排得好看并不容易，簡單的對齊排列？結果可能是既單調又呆板，如果全憑感覺加些幾何大色塊，又覺得太大眾，且跟自己的品牌和主題沒有直接的關聯，怎么辦？今天蔥爺給大家分享一個實用的排版方法：圖形排版法。
什么是圖形排版法？說白了其實就是用圖形來承載文字或者圖片。
1、更易排版：在圖形里排版，可選擇性更少，所以更容易。
2、更有趣：用與內容或品牌相關的圖形排版，本身就是個有趣的創意。
3、更整體：把設計元素聚集于圖形內排列，自然顯得更整體。
4、更有助于：信息傳達圖形本身也可以傳達出一部分信息。
常用于電商設計和海報設計中：
▲用電視機圖形排列主播頭像和介紹文字
▲用膠片圖形排列圖片和文字
▲用展示架圖形排列游戲裝備和文字
▲用紅包和單據圖形排列促銷信息
▲用房屋的形式排列信息
▲用購物券的形式排列促銷文字
▲用蒸籠圖形排列圖文
▲用廣告牌的形式排列文字和圖標
那么，像上面這種采用圖形排版法的設計是怎么操作的呢？可以簡單分為四步：
觀察版面上需要排列元素的多少與形式。舉個例子，以下是一本農產品小冊子其中1P的文案，冊子的成品尺寸為w110x200mm。
客戶只提供了這些文字，從上圖可以看到，字數并不少，且都是關于企業介紹的段落文字，顯然這些文字要集中排版，不過如果只是像上圖那樣簡單的對齊，未免有點單調，最好引入圖片或者圖形加以豐富，由于沒有合適的圖片，所以我決定采用圖形排版法。
用什么樣的圖形才能把現有的元素組合起來呢？圖形的提取和選擇有三個方向：
1.根據文字的屬性來選擇圖形，比如下圖需要排版的內文是一些優惠信息，所以設計師選擇用優惠券的圖形來承載文字。
2.根據圖片來選擇圖形，比如下圖需要排列的元素中有很多產品，所以設計師用盒子與展示臺的圖形來承載它們。
3.根據設計（品牌）調性來選擇圖形，下圖是一個春節期間的電商側欄，所以設計師用燈籠圖形來作為排版的載體。
現在，我們再回過頭來看看前面說的這個畫冊設計例子，這里需要排版的元素并無圖片，而企業簡介類的文字也提取不出合適的圖形，所以依據品牌調性來選擇圖形是最靠譜的，哪些圖形可以使用呢？
由于這是一個主打天然、健康的農產品品牌，所以很容易想到太陽、山、白云、樹、葉子、花等圖形，在這些圖形中，哪一個最合適呢？
我們可以根據以下幾條標準來選擇：
1.圖形與品牌調性要相符；
2.圖形的造型要盡量簡單；
3.圖形要美觀；
4.要適合承載內容；
5.圖形的形態要適合版面尺寸。
由此可見，葉子圖形是最合適的。因為其造型最簡單比較好承載文字信息，不會影響到閱讀性，并且也更便于在狹長版面中運用。
即使確定了采用什么圖形來排版也還有很多要注意的地方，比如同樣一個元素，可以設計成很多不同的圖形，它們所產生的效果也會有很大差別。一般來說，抽象的、幾何化的圖形會比具像化的圖形更合適，因為前者更簡潔、更適合排版、更有設計感，下圖是樹葉圖形的兩個不同設計方向。
顯然右邊簡化后的效果比左圖效果更合適。圖形設計好后當然就要把文字排上去了，文字排版的方式有兩種，一種是沿著圖形的內輪廓繞排（如左圖），一種是在圖形輪廓內自由排版（如右圖）。
使用第一種排版方式能使文字與圖形結合得更自然，適合字數比較多且呈段式的文字；使用第二種排版方式的優點是不需要完全受限于輪廓，更靈活，適合字數比較少的文案，很顯然，在本例中更適合采用輪廓繞排。
提示：在AI中，把文字工具移動到圖形的路徑處，當出現如下圖標時，單擊鼠標左鍵便可以輸入文字了，而且每一行文字的起始都會沿著圖形的內輪廓排列。
在菜單欄文字選項中點擊區域文字選項，即可調出參數框，如下圖：
當然，如過版面中只是光禿禿的一個圖形加上其中的文字，還是會有些單調，所以需要再加以補充、優化，首先要在輪廓之外也放一些文字，比如頁碼和標題等，然后背景也可以與圖形呼應，比如這里用了與葉子呼應的森林圖片（背景做了高斯模糊處理）。
現在我們可以看到，版面的右上角明顯有點空，而且整體上還缺少一些對比關系，于是我把葉子的圖形復制出兩片，分別排列在主體右上角和左下角作為點綴，到這里這個小頁面的設計就完成了。
圖形排版法可以使版面變得更有趣、更有創意，但是用不好也容易造成呆板、生硬的感覺，所以，最好不要把所有文字都限制在圖形范圍內，上面的例子雖然簡單，但基本上回答了運用圖形排版會遇到的主要問題。最后請大家記住，版面中沒有哪一個元素是獨立的，要始終站在整體的角度來設計每一個局部。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
不懂手繪，但又想做插畫風格的Banner？那就必須看看今天分享給大家的 humaaans 人物插畫素材庫，它由 Pablo Stanley 設計師設計，是一套符合現代扁平化設計風格插畫素材，而它最大的特色是組件化繪制，用戶可通過素材庫的元素自行 DIY 成不同形象的插畫，適用于網頁、移動UI、以及 PPT 等用途。
目前該素材包含有人物及場景元素，但最多的是以人物為主，包含有不同的頭像、服飾、襪子，讓用戶能自由 DIY，就像下面演示圖一樣：
如果你是 Sketch 的用戶，還可能利用 Sketch Symol 功能來款式，更加方便。
沒有 Sketch 軟件也不用擔心，設計師將每個元素導出成 PNG/SVG 格式以及@2X大小版本，SVG 也是矢量格式，所以用 Photoshop 或 Ai 去自己 DIY 就行。
注：如果 Sketch 版打不開，通常是因為你的版本過低造成的，只要更新新版本就可以了。
還有幾個場景可以切換：
humaaans 的設計元素包含男女生頭像和服飾，個個都是年輕貌美啊，穿著都非常時尚呢……
網頁 Banner：
這么漂亮的時尚的插畫，不用在網頁上就是浪費啊，但不建議直接使用，要要學會怎么去 DIY，通過設置大小、比例、旋轉以及更改成和你界面一致的配色，讓 UI 統一這樣才算完美哦。
APP 啟動界面：
做移動端的引導頁也很好看。
插畫海報：
做一個這樣的賀卡、海報是不是也很 Nice?
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
插畫在中國被俗稱為插圖，有著非常悠久的歷史，最早在佛教文化中出現，以「變相」圖解宣傳佛教教義，如今一般指為企業、產品、服務所繪制的圖畫的一種藝術形式。作為現代設計的一種重要的視覺傳達手法，插畫以其直觀的形象性，真實的生活感和美的感染力，廣泛應用于現代設計的多個領域，涉及到企業宣傳、社會文化活動、影視文化等諸多領域。插畫一方面富于靈活表現，可根據設計師思維和想法進行各類創意，適用于各類視覺主題，另一方面又與嚴選簡約、精致的品牌形象契合度較高，因而是嚴選專題設計的一個主要表達方向，經常在嚴選各類專題設計中得到應用，受到廣大用戶的喜愛與推崇。
許多剛入行的視覺設計師認為插畫風格專題設計需要非常專業的插畫功底才能完成，因而盡管覺得插畫風格專題唯美、形象卻敬而遠之不敢輕易嘗試，今天個人從以下五個步驟去解構插畫風格專題設計，通過相對簡單易學的基本操作，讓沒接觸過插畫風格的設計師也能輕松駕馭與運用。
和所有風格的視覺設計一樣，插畫風格設計首先也需要進行整體的需求分析，主要進行以下方面工作。
首先需要對專題的受眾進行簡單的社會化分析，通過分析大體了解受眾的年齡層次、收入水平、審美品味、興趣愛好等，根據社會化特征信息建立用戶畫像，有利于設計方向與基調的確定。比如嚴選的目標用戶定位于20-35歲，具有穩定的工作與收入，追求高品質生活的都市白領。
其次需要深入分析專題所需要表達的目標和信息，通過色調、版式、字體、元素等設計手法準確傳達信息內容的同時，帶給用戶更多美的感受，升華主題思想，強化品牌概念與服務。
所謂情感關鍵詞，就是我們產品的視覺所要表達的情感感受，比如情人節專題確定的「浪漫」、「溫馨」、「甜蜜」，新年專題的「喜慶」、「歡快」、「熱烈」，父親節的「責任」、「擔當」、「感恩」等等。確定好專題活動的關鍵詞后，將有助于我們進行整體風格的把握與塑造。
確定好專題的方向后，接下來就可以構思整體的意境以及挑選合適的素材，如新年專題我們會想到用大面積紅色作為主色調的布局，結合鞭炮、春聯、燈籠、年畫等中國傳統元素，通過合理的組織和編排，加上中國風的字體設計與適當的細節完善，共同勾勒營造一派喜慶祥和的氣象。
基于前一步驟的構思的整體意境，我們需要對挑選的現實素材進行插畫化改造。通常我們通過鼠標勾選的形式，將素材的輪廓勾勒出來并填充相應的顏色，使寫實的風格形象化、概括化和扁平化。
插畫風格相對實物風格，去掉了大量的寫實細節，只保留主要的特征信息因而顯得扁平簡約但不失形象生動。因此在這個步驟我們需要將勾勒好的圖形進行簡化操作，以簡單圖形代替寫實描繪、多以面和色塊去代替原有的細節，簡化后的圖形具有高度的概括性。
除了保證插畫的形象性與直觀性外，我們需要進一步對素材進行細節上的完善，以滿足進一步的審美性與趣味性，同時賦予元素一些創造性，可以嘗試通過以下方法進一步完善。
移花接木指將現實中不同時間和空間各類元素進行解構和重組，創造出一些妙趣橫生的新事物，增加插畫內容的趣味性。
將重要的、核心的元素進行強調刻畫、次要的元素進行弱化處理，從而拉開主次元素的層次關系，使畫面更加具有層次感和空間感。
通過調整元素間的比例關系，夸張的創造現實中并不存在的事物，更加容易吸引用戶的目光焦點。
經過以上的步驟，我們的素材基本已完成插畫風格的改造，但插畫素材在整體專題界面中并非孤立的存在，而是和整體色調風格、版式、字體設計形成一套有機和諧的整體，共同去呈現專題需要表達的信息與目標。
整體構思
情感關鍵詞：清新、唯美
整體意境構思：以嫩綠色作為主色調，結合桃花、陽光、汽車、風箏營造輕松出游踏青的歡快意境。
提取輪廓
從田野、桃花等幾張現實圖片中將頁面需求的主體元素進行提取，作為背影進行主體頁面的大面積輔色，將整體的色調感覺搭建出來。
簡化圖形
初步提取的輪廓由于過于具象，與唯美的主題風格不太協調，在這一步我們將主體元素進行簡化處理，用圓潤、可愛的幾何圖形加上明快的色塊去代替樹木，整體更加扁平、卡通化，營造更加輕松、自由的氛圍。
完善細節
為了更好的體現春天外出郊游的意境，我們對細節進行完善，增加了汽車、風箏等小元素，將桃花進行樹枝刻畫、太陽光芒的刻畫等處理，同時將遠處山景進行虛化，形成層巒疊障的連綿山脈，拉開了畫面的層次空間。
優化整體
最后我們根據主題進行專題的字體設計，將常規的宋體進行變形處理，部分筆劃好似春風輕撫而飄逸，又加上了象征春天生機勃勃的嫩芽，富有生活趣味。通過一片桃花作為主體分別呈放若遇到新歡、若重拾舊愛的對應專題好禮，使頁面整體和諧統一。
目標：呈現出情人節情侶間的愛情的甜蜜與浪漫。
情感關鍵詞：浪漫、甜蜜
整體意境構思：以甜美暖色作為主色調，通過主體元素禮物盒與情侶間夸張的比例關系抓住用戶眼球，浪漫甜美同時不失趣味性。
目標：呈現出春節喜慶熱鬧與琳瑯滿目的商品。
情感關鍵詞：喜慶、熱鬧
整體意境構思：以中國傳統舞獅、牌樓、鞭炮等作為主體元素，谷倉作為次要元素，前后對比主次分明、空間感強，呈現了新春集市的縱深與五谷豐登的產品，整體氛圍熱烈喜慶，激發用戶的購買欲望。
插畫風格的表達，既遵循著藝術設計的通用規則，又具備自身獨特的審核特征，需要設計師更多去發現生活中的美，通過以上五部曲將生活中各類元素進行不斷的重組、創造，在專題中進行特有的形象性、生動性、趣味性、創造性的藝術表達，從而豐富專題內容，更好傳達專題思想。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
本期給大家帶來的內容是關于視覺張力的應用技巧，聽到這個詞也許會給人一種云里霧里的感覺，我們在日常工作中也總會聽到這些「視覺張力」「視覺沖擊力」「視覺重力」等等專業詞匯。那么這些帶有視覺前綴的力學詞到底是什么意思呢？今天我們來一起分析一下這其中的「視覺張力」，看它在版式設計中都起著哪些作用。接下來讓我們一起學習今天的內容吧。
首先我們來了解一下張力的概念，從百科中的解釋可以初步了解到，張力是物體受到拉力而產生的牽引力，這么說是不是還有點暈？
通俗一些解釋，可以將它理解成在拔河時繩子兩端受到的左右拉力，我們看整個畫面在視覺心理上產生了一種向左右擴張的感覺。
就像上圖中的氣球一樣，內部充氣后產生了向外膨脹的擴張力。外部的包裹部分也同時向內產生收縮的力，從而產生了一種相互制約的緊張感。
在藝術和設計以及文學領域中，視覺張力這個詞也經常用來形容和諧與沖突之間的強烈對比，它是一種經過美學經驗與審美傾向后的主觀評價。
今天我們不講那么深奧的直覺式感受，而是從平面構成的角度來深度解析視覺張力在版式設計中的作用，客觀的了解康定斯基在其著作《點線面》中所提及到的視覺張力理論。
支撐起我們身體外形的是藏在內部的骨骼部分。而在版式設計中也同樣需要支撐起整個版面的骨骼元素。
新人設計師經常會出現的問題就是會把整個版面填充的很滿，他們認為這樣能讓版面變得飽滿。但事實上這樣并不能解決什么問題。
我們需要轉換思維模式，客觀的重新認識版面中元素起到的作用。
從構成的角度說，版面中只要出現一個很小的點就已經足夠吸引觀者的注意力了。點是視覺力量的中心，它在版面中能夠產生占據空間的作用。
當版面中出現兩個點元素時，我們的視線會下意識的在他們之間形成一條隱形的線，即使他們離的很遠。正是由于存在著這條無形的線段連接，才讓兩個點之間產生了關聯。包括兩點之間的空白區域在內，它們都會被看做一個整體。
當版面中出現三個點時，我們在心理上便會自然形成一個負形的三角形，它與背景之間會形成圖底關系，點與點之間的距離決定了這個三角形的大小。
同樣的道理，當版面中出現四個點時，矩形的負空間與版面形狀產生了呼應。四個點之間的內部會形成一個假想的視覺面積，點與邊界的距離也為我們定義的版心的大小，這也是版面中張力的主要來源。
點具有相互連接的屬性，當很多個距離相等的點占著水平方向排列會產生線段的印象。
而一個陣列的點相互連接就成了一個面。
舉個比較常見的例子，段落文字就是由許多個點組合而成的面。
古人為了記憶天空中的星象，會將相鄰的星星連接起來，就像圖中的北斗七星，通過同形聯想，它就像是一個勺子。人們就是通過記憶勺子形狀來找到北斗七星的。
西方的星座也是同樣的道理，將相鄰的點連接形成對應的圖案，最終形成我們現在看到的星座圖形。
當版面中只有兩個點時，我們可以得到的信息只有版心的寬度距離，而想要得到一個完整的版面。我們還需要一個確定高度的點才行，通過這三個點的位置來腦補出整個版心的張力大小。
也就是說，想要達到支撐起整個版心的目的，版面內最少需要三個支撐點。
這種腦補的原因來自于視覺的閉合心理，我們會將那些區域閉合的圖形自動視為一個完整的內容，就像圖中的圖形。通常人們會認為他們是三個完整的組，因為括號內的距離更接近，那么事實上真的是這樣嗎？
實際上六組圖形的物理距離是完全相等的，之所以會產生括號外大于括號內的錯覺完全是因為視覺心理在作怪。
到此我們可以大致總結一下版面中的張力是怎樣產生的，以版面的四角作為支撐點，在這一基礎上，如果還有剩余的元素可以編排在垂直與水平的位置上。這樣整個版面就被支撐起來了，形成了一個完整的面積，給人傳達出了飽滿的視覺印象。在實際編排中由于層級的介入，版面中的元素并不一定都是等大的，同時隨著主體輪廓的不同，也會形成繞排等不同位置的結果。但萬變不離其宗，版面中每個元素的聚散離合都會影響到整個版面的張力大小。
這個版面主要運用了點的分散和連接作用，點與點之間雖然面積較遠但是依然在視覺上會被看成一個整體，其余層級的內容則是以線的形態出現在版面中。經過解構我們可以看出，版面中的張力主要來源于版心四角的位置，這個版面是通過四個點支撐起來的。
接下來看這個版面，首先我們標示出人物的面積，隨后是山峰的面積，文字以點的形式分散于版面中。由于點與點之間的連接作用，我們可以將其看做四條豎線。而線與線之間相連就成了一個面，這個版面主要起到支撐作用的是邊緣的三個點。
對于這個版面來說，與之前的版面相比，版面中元素并不是等大的。它的元素分布情況大概是這樣的，接下來我們標出它的版心大小，可以明顯看出這個版面中起到張力作用元素主要有三個，而其余的元素則分布在版心的內部空白位置。
從元素的排布上看就基本可以得出版心的大小了，元素之間通過對齊與擴張，形成了一個方形的面積，版心的四個角落都有支撐點。
我們再看這個版面，它由一個主體，和兩個文字組以及 logo 構成，這是一個典型的由三點支撐起來的版面。
這個同樣是由三個點支撐起來的。
這個版面經過結構可以很明顯的看到，元素分散到版面的四角，形成向外擴張的結構，其余信息放置在空白位置。
這個版面較之前就要更復雜一些了，來看一下它的結構，標出版心后可以看出元素基本上是圍繞著版心的大小進行排布的，左下角為了增加元素的張力作用，依然采用了三點的分布方式來占據更大的空間面積，從宏觀角度來說版面依然采用了三個點的骨骼結構。
這個版面，可以看出版心采用了四個點來支撐，剩余兩個文字信息分布在版面的水平方向，就是圖中標注成藍色的位置。
這個版面中出現了帶有出血的元素，看一下它的版心和元素的構成情況，采用了四個點的出血結構。
這個版面的變化性相對難度更大，我們來看它的構成結構，可以看到整個版面大致分為兩欄，左側小欄和右側大欄內的元素編排都采用了三大支撐點來產生版心的張力效果。從整體的角度觀看版面，也會得出同樣的三點支撐版心的印象。
這個版面中，主體的形狀變化較強。除編排在四角的元素外，其余元素都采用了繞排的呼應形式安排在了空白位置上，整體看去采用了四個點來產生張力作用。
這個也是一樣，采用純文字的版面編排，占據四個角落，其余元素編排在空白位置。
這個呢，版心的張力主要來源是四個角落的元素位置。
我們來總結一下，當版面底部已經有一個很大的圖像或者文字時，版面頂部只要有一個元素就可以撐起整個版面的張力。
頂部也可以是兩個元素來同時產生張力作用。
對于主體位于中心位置的版面，我們最少需要三個點來起到支撐版心的作用。
這里也可以是四個點來描述版面的張力大小。
此外，如果這時還有其余的元素需要添加，可以添加到垂直和水平的空白位置上。
接下來我們拿這個版面來進行舉例，中心的圓形是版面中最大的元素，被編排到了版面的正中心位置。
隨后出現在版面中的是四個角落的文字元素，它們的出現加大了版心的張力大小。
隨后，其余的文字信息被編排到了版心的垂直和水平的位置并貼近版心的邊緣。
接下來在垂直位置添加裝飾性的點元素來起到占據空間的目的。
最后在版面的空白處繼續添加其余的文字信息，這個版面就基本上變得非常飽滿了。
接下來我們看一下它的元素構成結構。
并不是只有文字的位置才能起到加強版面張力的作用，換成圖形和圖像也是同樣的道理。我們看這個圖，將周圍的元素去除后，版面中原本熱鬧的氛圍消失了，版面占據空間的張力也隨之變小了，但絕對不是說底部的版面就是不對的，一切都是根據項目的定位來判定的。
這個版面同樣具有熱鬧的節日氛圍，去掉周圍的圖像元素后，明顯變得冷清起來，版面的張力也隨之縮小了很多。
這個版面也是同樣的道理，去除周圍的元素后，版面的視覺張力縮小了，與之前相比缺少了沖擊力，變得安靜了。
這個版面因為點元素的出現，整體給人的感受非常飽滿，將點去除后，原本被占據的空間變小了，明顯沒有之前的版面具有視覺張力。
這是廣告牌，投放尺寸主要設定在一個人能夠近距離觀看的大小，也就是說版面中可以出現一些比較細小的文字。
（這里需要特別提醒的是，在實際應用中如果廣告牌掛得比較高，就需要根據實際情況來調整最小的文字字號了。否則說明文字的出現也就沒有實際意義了。）
接下來我們來看一下文案內容，一個航拍無人機的宣傳廣告，含有品牌的標志和文案以及圖片信息。
根據文案信息，我們給項目添加氣質關鍵詞，及表現出科技的領先感，同時因為產品屬于親民定位，我們還需要加入具有輕松與溫情的氣質。主視覺決定采用文字為主強調產品名稱，加入文字并放大成為版面中最大的面積。
這里需要注意的是，這個文字的外形輪廓給人一種濃厚的歷史氣息，就像演員走錯了片場，完全與我們的定位不符。
換成無襯線體后，明顯覺得好多了。但是還是覺得哪里怪怪的。原因在于它的外形沒有給人很特別的印象。從「S」的收口處可以明顯看出切割感很強，缺少一些書寫的痕跡，整體顯得有些平淡無奇。
這個字體大體感覺上還不錯，帶有書寫感的曲線，幾何形的外觀似乎都很符合定位。但作為版面中的主視覺元素似乎還少了點裝飾感。
最后選擇了這個字體，同樣具有書寫感的曲線開口，帶有幾何特征的外形以及類似電路排線一樣的裝飾結構。
色彩方面采用橙紅色作為主色調，烘托親民的色彩氛圍。接下來將產品疊壓在文字之上，加強版面的層次感。
為了繼續加強版面的中層次變化，我們在文字與圖像之間添加陰影，細節決定成敗，一個簡單的陰影也是需要體現出層次變化的。從模糊到清晰，從暗淡到濃重的變化都是塑造細節的關鍵，這里為投影添加三層強中弱的變化，這樣一來，陰影部分的刻畫就完成了。
與之前相比，添加陰影后的畫面在視覺層次上要更豐富一些。在視覺表現上也更立體。
最后我們將文字信息劃分好層級后一次添加到版面中。這個畫面就完成了。主體位于版面的中心位置，其余信息分布在版面四周，形成向外擴散的視覺張力，一共使用了三個點元素來支撐版心的大小，剩余的文字信息則添加在版面底部的空白位置。
我們試著將信息全都集中到一起會怎樣呢？
可以看到，版面中元素全都集中在了版面的中心位置，這使得原本占據整個版面的視覺張力變小，版面的兩端會顯得很空曠，相對于之前的版面來說變得沒有那么飽滿了。這種情況下，也可以采用添加圖形元素的手法來填充版面兩端的空白處，讓畫面變得熱鬧起來，增強版面的動感與活力。
這里我們添加一些抽象的氣泡元素，為版面添加一些概念性的印象。添加元素后，新的問題又出現了，由于兩側的元素僅作為裝飾出現，但是目前的視覺又顯得比較搶眼，這就有些干擾到了主視覺的層級地位了。
那么解決這個問題的方式也很簡單，就是弱化掉兩端的氣泡元素，讓主視覺與裝飾元素之間的層次更分明。經過弱化處理后，這個版面看上去就舒服多了。這里需要注意的是，氣泡的虛化程度也同樣遵循了強中弱的層次變化，這樣的處理也進一步加強了整體的視覺縱深感。
經過圓形氣泡的填充后，版面的張力恢復到了之前的大小。整體給人更加飽滿的視覺印象。
今天我們一起學習了視覺張力在版面中的應用技巧，一起了解到了圖像與文字在版面中不同位置所起到的作用，也講解了版面的骨骼是如何構成的，希望我們的內容依然能夠對你有所幫助。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
其實根據我的從業經驗來看，如果想真正的了解色彩，就需要一套非常完整、系統的訓練方法?？赡芎芏嗳税ㄎ易约海婚_始都對這些訓練不以為意，認為直接學習配色理論或方法不是更好么？為什么還要做這些色彩訓練呢？認為這些訓練沒有意義，甚至有的人會覺得是小孩玩的游戲。
但殊不知其實我們每個人的色感，正是在兒童時期形成的，因為兒童時期的認知更加純粹，對于色彩的想象力以及受到的限制要比成人少得多，所以賦予色彩的深度和廣度也就比成年人更加豐富。
這也是為什么很多人看到小朋友的繪畫，會覺得他們很有配色天賦了。
所以我們要做的就是打破對色彩的固有認知，讓自己回歸到一種單純的狀態，來重新認識色彩。
比如現在給你一個蘋果，可能我們的第一反應就是直接把它吃了，事后要你回憶對蘋果這個物體的印象，也許你體會的并不深刻。
而如果我們改變條件，假設你從未見過蘋果，這一次你不僅要吃掉蘋果，還要說出你的感受。
根據你的五官對其進行認知，這時你對蘋果的體會將和前一次大不相同。
比如通過視覺我們可以看到綠色，通過嗅覺可以聞到果香，通過觸覺可以感受到堅硬，通過味覺可以品嘗到酸甜，通過聽覺可以聽到清脆聲。
而重新認識色彩也是同樣的道理，就像我們從未見過蘋果一樣去體驗一個假設我們從未見過的色彩，然后通過不同的角度去對色彩進行拆解，最后組合在一起形成屬于我們自己的配色體系。
創建個人色彩體系的第一步，就是為色彩命名。
比如我們隨便找一個顏色，就拿這個黃色來舉例。
根據自己對這個色彩的感覺來命名，可以隨意發揮，你想到什么就可以說什么，沒有限制。
比如從最基本的色相角度出發，我們可以叫它鮮黃色。
根據這個顏色我們可以聯想到向日葵，所以也可以命名為向日葵。
我們還可以聯想到月亮，所以也可以起名叫月亮黃。
那我們還可以聯想到《變形金剛》里的大黃蜂，所以也可以給這個顏色起名叫做大黃蜂。
還能聯想到麥當勞的陽光橙，所以也可以命名為陽光橙?？傊斈憧吹竭@個顏色時，腦海中能夠聯想到的詞匯都可以使用，哪怕是跟這個顏色相差很多也沒關系，最重要的是你自己的感受。
對色彩進行命名之后，第二步要做的就是對色彩進行理性分析。
我們還是拿這個顏色來進行練習，先來找出它的色相、明度和飽和度。
首先根據色相環的大致位置，確定這個色彩的色相。
然后通過純度和明度的調整來找到與右側顏色相符的色值，這里我們得到了一個數值。
然后用吸管工具吸取右側的黃色，得到的結果和我們猜測的做比較，只要結果不是相差很大都是可以的，如果相差很多那就說明你對色彩的敏感度還有欠缺。
HSB色值猜想完之后我們再來看看它的RGB色值。
根據RGB原理很明顯黃色是由紅色和綠色混合得到的。
但是我們對比來看很明顯這兩個黃色還是有差別的，所以還需要進一步分析。
我們調出RGB色相環，我們看采樣的這個黃色是偏向紅色多一些還是偏向綠色多一些，很明顯是偏紅一些，因為它比較偏橙色。
所以我們就可以適當的減少綠色的成分。
我們來看一下對比，已經接近了。
最后我們通過RGB色值來對照一下，雖然紅色和綠色的色值相差不多，但是我們采樣的顏色中還有少部分藍色，肉眼其實很難看出來，但是我們可以自己去模擬一下。
這三個成分的三原色混合之后，得到的就是我們采樣的顏色了。
△ http://www.rgbchallenge.com/
如果想提升對RGB的敏感度，可以通過這個小游戲來練習一下。
玩法很簡單，根據畫面中給出的RGB色值來選擇你認為相對應的顏色，選對了繼續下一關，選錯了GAME OVER重來。
接下來我們來看CMYK色值。
黃色是CMY其中的一個原色，所以首先黃色肯定是最多的。
對比來看一下，很明顯采樣的黃色中還有其他顏色成分。
我們調出CMYK色相環，同樣也是看采樣的黃色偏向哪個方向，也是偏紅色多一些。
所以我們得到這個顏色中需要加入紅色，但是應該加多少呢？
這里我們加入了20%的紅，同時將黃色的含量降到80%，這個是根據經驗和感覺來的。
這時將兩個顏色對比來看一下，已經相差不多了。
最后通過數值來比對，可以說幾乎已經很接近了。
只不過采樣的顏色中還帶有少量的青色，但是影響不大。
然后我們再來看看色調。關于色調這種老生常談的問題這里就不多講了，因為之前我專門寫過一篇關于色調的文章《高手的平面課堂！最容易上手的配色方法》，里面已經講的很詳細了。如果你看過這篇文章，那么當你得到了一個顏色的CMYK色值時，就已經可以判斷出是什么色調了。
如果沒看過也沒關系，我帶大家來區分一下，白色和純色之間是明色和淡色，純色和灰色之間是濁色和淡濁色，純色和黑色之間是暗色。
將這些代表性色調提取出來一比對，就可以知道這個色彩的大致色調是什么了。
很明顯我們采樣的這個顏色是介于純色調和明色調之間，你可以叫它純色也可以叫它明色。
色調看完之后我們再來看看它的色彩家族，也就是這五大色相關系。
首先我們來看看它的同類色是什么，如果大家剛開始比較困難可以偷個懶，調出色相環。
這樣找到相應的色相就非常簡單了，但是不建議大家這樣做，除非是新手或剛入門的同學。
然后是近似色，相距45度的顏色。
然后是中差色，距離在90度左右。
接著是對比色，120度左右。
最后是互補色，對比最強烈，也就是相距180度左右的顏色。
這五大色相關系是最基本也是搭配起來最常見的，一般不太容易出問題。這里需要說明一點就是我們在對色值進行猜測的時候，不需要要求太高必須要完全一致，只要差不多就可以。并且大家在看教程的時候可能會覺得有些復雜佷麻煩，我做這些為了給大家演示看上去是花了些時間，但是當你自己在猜想的時候可能只是一瞬間的事情。
下面我們再來看看第三步，對色彩的感性分析，所謂感性分析也就是說這個色彩給你什么感覺。
比如這個黃色給我們的正面意象有：陽光、輕松、幽默、開朗、熱鬧、歡樂、幼兒、開放、快樂；負面意象有吵鬧、廉價、不雅、軟弱、浮躁、輕浮、稚嫩、散漫、不安。注意在提煉感覺的時候不要約束自己，能夠聯想到的都可以記下來。
然后是第四步對色彩進行行業分析，也就是說你認為這個色彩適合哪些行業或者你見過哪些行業使用過這個色彩。
比如最明顯的就是兒童、寵物、游戲、時尚、運動、促銷、餐飲、農業、傳統、汽車等等。
以上這些訓練做完之后就進入到了最后一步，也就是用這個色彩進行任意內容的設計。
這是我們的文案，這里我們要設計的是關于詹姆斯十六代戰靴的三個Banner。
1. 案例一
首先根據尺寸創建版面，找到一張詹姆斯的圖片去底之后放到版面中，然后將主題信息放大并選擇一款具有力量感的字體編排到版面的中上位置，將中文標題和LOGO做重復編排。
將文字信息放置到人物下方，底部信息做描邊和變形處理為畫面增加形式感，最后將其他信息編排到空余的左側。
最后在主標題下方添加色塊來豐富一下版面，版式部分就完成了，接下來開始配色。
因為我們要用到采樣的這個黃色所以主色已經確定了，但是這個畫面只用一個顏色顯然是不夠的，所以我們還需要其他顏色。
因為考慮到設計的內容和風格所以我覺得配色上應該有一些對比，但是又不想使用對比很強的互補色，所以這里我選擇對比色，但是黃色的對比色有兩個應該選擇哪個呢，這里我選擇了紫色。
因為如果了解NBA的話應該知道，湖人隊的球衣本身就是黃色和紫色，也就是人們所謂的紫金戰袍。
但是這個紫色有些偏紅，所以我們可以調整成偏藍一些。這也是我想告訴大家的一點就是配色是靈活的，千萬不要死腦筋。
輔色確定了之后就可以為畫面填充顏色了，但是我們看填充完顏色之后人物圖片的顏色有些不協調，所以人物的顏色也需要調整。
這樣看上去就會好很多，那么第一個案例就完成了。
2. 案例二
第二個案例我們選擇鞋子來當主體，然后編排主標題。
將其余信息圍繞主體鞋子來編排，通過適當的變形角度來為畫面增加靈動。
但是兩側很明顯太空了所以可以添加色塊和文字，版式部分就完成了。
因為我們設計的這三個Banner是一個系列的，所以配色也應該是統一的不需要改動。
3. 案例三
我們再來看看最后一個案例，前兩個案例分別是以人物為主體和以產品為主體，所以第三個案例我就直接用文字編排，將文字信息進行分組給圖片留好位置。
為了增加一些形式感，下方的標題同樣進行描邊處理并進行裁剪。
那么同樣使用這組配色，將圖片放置到預先留好的位置上，這個案例也就完成了。
最后我們來看一下整體效果和效果圖。
本期教程到這里就結束了，我們從幾個不同的角度去對色彩進行拆解，大家回去之后可以自己多加練習，每天解構一個色彩，這樣長期積累下來，你就會在不知不覺中創建了一套屬于你自己的配色體系。
但是我相信肯定會有人有疑問，如果照這樣做那糾錯機制在哪？因為這些都是大家自己去創建的很多內容不一定對，如果你有這樣的疑問那說明你是認真學習的人，但是我這套方法并不是沒有糾錯機制，這個糾錯機制就是你自己，在漫長的時間里你的成長、歷練、感受、學習都會影響你對一個色彩的認知，可能幾個月甚至幾天之后你看待同一個色彩的感覺都是不同的。所以放心大膽的去做吧，只要你肯堅持，火候到的時候自然就會有所收獲。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
平時設計工作中，關于投影，簡單一點的就是一個圖片中的主體摳下來放到畫面中，這個時候就要設置一個投影，讓主體在畫面中更和諧。難一點的就是在合成設計里，涉及到每個物體的投影形狀、顏色、透視等等，根據分析畫出投影，這期教程就給大家普及一下投影的相關知識，以及如何去做投影。
陰影是什么呢？陰影是光帶給這個世界的禮物。
還是正經解釋一下什么是陰影？
在客觀世界中，光線總是從光源沿著直線方向發散。
在光線的照射下，受光部分稱為亮面，僅次于亮面的受光是灰面，而光線無法照射到的部分，稱為暗面；由于被受光面遮擋，物體所在環境中出現的陰暗部分稱為影，陰與影的總和就是陰影。
陰影形成的要素有哪些呢？
首先要有光源，光源就是光點，光點向下的垂線與承接面的焦點就是光足，陽光的光足在地平線上，燈光的光足在照射的基面上，然后是要有物體，光點發出的光線，經過物體上陰點，光足與物體底點也就是陰足連線，與光線相交的點就是影點，陰影就是陰足到影點的部分。
畫陰影時，一般是先定光點和光足，然后是陰點陰足，光點連接陰點，光足連接陰足，這樣陰影自然就畫出來了。
用這張照片來做個簡單說明：
光源的位置，就是太陽，向下垂線交于海平線于一點，這個就是光足。
然后，定出一些椅子上的陰點和陰足。
光點連接陰點，光足連接陰足，這樣就能畫出陰影的大致形狀了。
光源總體上可以分為兩大類，一類是自然光，比如：太陽光、月光。一類是人造光，比如：燈光、燭光。
自然光有兩個特點：光線平行；隨著時間的變化而變化，不會為?的意志所轉移。
光線平行
因為太陽、月亮這樣的發光體離我們太過遙遠，所以可以把它發散的光線視為平行的。
再來說下這張圖片，同樣是自然光，為什么它的光線不是平行的？
這是因為透視的現象，就像這個地板，不也是平行的嗎？但是因為透視的關系，它們會相交于一點，光線也是同樣道理，因為我們以這個角度觀察，所以光線會出現透視現象。
也就是說，當我們從側面觀察的話，就很明顯看到光線是平行的。
隨著時間的變化而變化，不會為人的意志所轉移
日升日落，陰晴圓缺，都是自然的規律，不會為我們的意志所改變。
人造光有兩個特點：光線不平行，呈放射狀；根據需要變換位置。
光線不平行，呈放射狀
用這張圖片來舉例，畫面中光源是路燈，物體是消防栓，我們對它進行一個簡單的分析：
它的光點是路燈，向下的垂線，到地面上的光足，然后是消防栓，光點連接陰點，光足連接陰足，畫出陰影，可以看出，因為與光源距離近，所以光線是不平行的，呈現一種放射狀，并且影子也會呈現放射狀。
根據需要變換位置
為了呈現想要的視覺效果，可以隨意移動光源的位置，甚至調整它的顏色、明暗等，可以人為改變。
燈光屬于電光源，它可以是單一光源或者組合光源，常見的像這樣的白熾燈，還有日光燈等等。
當各個方向都有光源的時候，投影就會消失。在醫學上，用的無影燈就是根據這個原理制成的，因為醫生做手術的時候，手和器械都有可能對手術部位造成干擾的陰影，所以無影燈就能盡量消除陰影。
我們模擬一個太陽移動的軌跡，當太陽位置比較低的時候，光線與地面的夾角就會比較小，影子會很長；升高一些，夾角就稍微大了些，影子縮短了點；再升高一些，夾角更大，影子很短了。然后當太陽在物體正上方的時候，與地面的夾角接近90度，影子基本就是一個點。那另一邊，基本就是相同的情況，所以，光源離照射物體越高、越遠、光線角度越大，陰影越短。
我們再通過幾張圖片來進一步了解陰影規律及特點。
我們看到人物的影子非常的長，光線與地面夾角比較小，說明它的光源在一個比較低的位置上。
這個正俯視的圖片，影子也很長，說明它的光源也在一個較低的位置。
影子的長度也不算短，但是看光線與它的夾角比較大，證明它的光源在相對比較高的位置上。
這張照片比較明顯了，影子比較短，接近中午的陽光。
△ 接近中午的陽光
我們之前在透視的那篇教程里說過，物體的透視線，最終都會消失在視平線上，所以，當畫面中先有一條視平線，我們同樣可以畫出一個立方體。
當物體有一個陰影，我們可以通過影點與陰點和陰足的連線，找到光點和光足。這樣也就找到光源的位置。
這張圖片，我們就可以通過倒推的方式找到光點，如果畫面中再放入其他物體，就可以用光點和光足對其連線，從而做出投影。
正常情況下，物體在光源下的投影，如果在其中出現一個臺階會怎樣？
影子就會隨著階梯的形狀而產生變化，也就是說陰影投在不同的承影面上，會隨著受影面的變化而變化。
這兩張圖片就明顯看出陰影根據地面起伏的形狀而變化。
第一個是接觸陰影，是物體與物體之間接觸所產生的陰影，一般這種我們都可以用圖層樣式當中的陰影來設置。
還有一種接觸陰影，是物體立面與承影面之間的投影關系。
第二種是懸空式投影，這類投影給人很強的空間感，并且大多數情況，投影都會成為畫面中的主角。
第三種是倒影，針對反光較強的面會有，比如鏡面、水面、琉璃臺面等，并且在表現一些高端產品設計時候經常會使用到。
第四種是長投影，也是這幾年扁平化流行起來，帶動的一種投影形式。
第五種合成設計中的投影，和實際照片中的場景是一樣道理的，這也是所有投影當中比較難操作的。
最后一個創意投影，它不會根據物體本身的形態去表現，而是根據文案和設計構思而產生的很有創意的投影形式，當然，這個主要靠大家發散思維的聯想了。
用兩個簡單的小案例，來給大家講解一下如何做投影。
給下面右側的書籍做一個和左邊一樣的投影：
給圖層添加投影圖層樣式，不透明度調整到45，角度137，距離26，擴展10，大小35。
我們把外圍一圈的投影已經設置好，下面就再添加一個投影，也就是最貼近書籍邊緣部分。這個部分投影我們可以稱之為閉塞投影，是近光量最少的地方。
再添加一個投影，不透明度33，角度不變，距離5，擴展10，大小10。
利用圖層樣式的投影就完成了，大家在調整的時候可以邊調整邊觀察，以達到一個自然的效果。
第二個方案，是給畫面中的立方體添加一個投影，要符合光影關系。
第一步要按照透視關系，把立方體看不到的面給畫出來。
根據之前我們學到的知識點和畫面中其他陰影來進行分析：
先連接幾個人物的影點和陰點，我們知道自然光的光線是平行的，并且我們標記出來的也確實近乎平行的光線，既然這樣，我們就不需要找到光點的位置。
只要復制其中一條光線到立方體上的陰點即可，然后我們再去找光足的位置。
為了找光足，可以先把畫面擴展一下，然后連接影點和陰足，三個參照物連線的延長線會相交于一點，這個點就是光足。
從光足往回連線，與陰足的延長線，相交于影點，這里為了區分，三條線我用三個不同的顏色，然后我們把三點連線，就是陰影的區域了。
可以發現綠色和藍色是基本重合了，我們就可以忽略藍色的那條線了。
立方體陰影的范圍與形狀，然后再進一步刻畫。
做個高斯模糊處理，數值2。
在陰影上方新建一個圖層，用鋼筆工具勾勒一個閉塞陰影，不要太大哦，填充深灰色，模式正片疊底。
做高斯模糊，數值1.4。
為了不讓影子邊緣太生硬，選擇濾鏡 – 扭曲 – 波紋 – 41%。
用吸管工具吸一下旁邊影子的顏色，填充到立方體影子。
如果影子太重，可以適當降低不透明度，再統一暗部的色調，這樣陰影就做完了。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
本次分享闡述了我關于理財APP注冊流程的視覺及結構上的改進，分為理論闡述、競品分析、改版實踐三個部分。
主要向大家講解一下當一個UI設計師在做UI設計改版的時候，他在思考什么，他做出這一步設計的原因是什么。同時在大家的討論反饋中，我作為一個UI設計師，也能更好的明白產品看待一個界面設計的角度。
一旦用戶體驗時涉及到資金進出，留言互動以及定制個人信息等內容，那么就會觸發注冊或者登錄環節。
目前，手機已經成了移動互聯網時代的天然身份證，而且可以實時驗證。這也是互聯網金融領域基本都采用的注冊方法。
手機注冊都是通過手機短信獲得驗證碼，注冊效率極高。好的注冊頁，就是“簡約而不簡單”，做到體驗流暢又抓住了核心。
1.WHAT（目標）：
石投金融移動端注冊流程+視覺的優化
現版本石投金融移動端的注冊截圖
其實光從視覺上，我們的APP其實屬于市面較大眾的類型，沒有追求設計趨勢，但是中規中矩，在很多網貸APP中都能見到。但是我們應該思考的是，注冊作為吸引新用戶的重要一環，我們能否做的更好？
2.WHY（優化原因）：
石投金融目標用戶為40歲的中年人，我對此設定其實是不太同意的，使用過程中我注意到其實對于產品的結構流程來說，
3.WHO（目標用戶）：
中凈值用戶（年齡結構為30-45歲之間，對互聯網新事物有開放性心態，對APP的設計水平有一定要求，并且操作流程不可像PC端一樣交互繁瑣死板。產品偏好：安全保障三件套（風險準備經+陽光保險+資金托管）+高收益，運營拉新策略：促銷+再促銷+拉好友+再拉好友）
4.WHERE（使用場景）：
互聯網金融領域方向的移動端APP。用戶、需求和場景是產品設計前必須要考慮的三大核心要素，只有能滿足目標用戶在特定場景下特定需求的產品，才有可能成長為獨角獸產品。
5.WHEN（何時使用）：
用戶體驗時涉及到資金進出及個人信息等內容。
6.HOW：
后文闡述。
定了這個研究主題之后，我著手研究了APP的注冊流程。用戶點擊【我的】icon之后，彈出登錄頁面，注冊按鈕位于次要按鈕區域，用戶需要點擊之后才能進行注冊。首先我考慮的是，對于一個剛下載APP的用戶來說，登錄是比注冊更高優先級的交互嗎？從第一步開始，我們的流程就在消耗用戶的手指點擊次數。點擊次數越少，用戶使用產品感受越舒適流暢，注冊轉化率越高。
然后用戶點擊注冊之后，會讓他輸入手機號。這時又涉及到一個小的交互缺陷，就是用戶需要再次點擊輸入框才會彈出鍵盤開始輸入，又消耗占用了一次用戶的手指點擊次數，屬于無效交互。
下面我們終于到了輸入手機號的環節，用戶輸入手機號，如果用戶早就注冊了我們的產品，但是忘記了，輸入了已經注冊的手機號之后，我們產品現版本的流程是【彈窗告知用戶“您的手機號已注冊”】，需要用戶點擊“確認”才能關閉這個彈窗，然后就什么操作都沒有，停留在這個輸入手機號的頁面。用戶需要手動點擊“登錄”文字按鈕才能切換到登錄界面。如果是一個40歲的中年人，他的使用APP經驗不多，他可能會適應這個硬中斷的過程，反應一下確實是自己操作問題，是自己的過錯，而乖乖的去點擊“登錄”按鈕，但是如果是一個30歲左右的年輕人，在各種APP如親媽一般的母愛關懷下，他可能就很不舒服，對APP的印象不好從而流失。
現版本注冊錯誤的界面交互
1.分步注冊適合移動端設計：移動端屏幕小、加上彈出鍵盤，假設將多個輸入項放在一個頁面，會給用戶造成擁擠感，然而分步注冊則可以較好地解決該問題。
2.分步注冊可減少用戶點擊輸入框的次數：幾乎所有的注冊關鍵步驟中都有：輸入手機號、獲取驗證碼、設定密碼這3個步驟。如果這三個步驟在同一個頁面，則需要用戶手動點擊輸入框呼出對應鍵盤來填寫這些信息。如果遵循分步注冊，分成三個頁面的話，進入每個頁面都會自動置入焦點并彈出鍵盤，將減少用戶手動點擊輸入框的次數。
3.分步注冊在一定程度上可以提高轉化率：Facebook曾經針對分步注冊與非分步注冊做過A/B Test，其結果指出分步注冊的轉化率遠高于非分步注冊。由此可見，非分步注冊強行減少注冊頁面倒不如拉長戰線，給用戶輕負荷的操作，讓用戶在不知不覺中完成注冊流程。
上頁我們講述了【分步注冊】的理論，結合這個理論我們來看APP的第二步——輸入驗證碼及輸入密碼。屬于非分步流程。雖然看似減少了用戶的操作步驟，但是使用過程中用戶需要經過等待驗證碼——點擊喚出數字鍵盤——輸入驗證碼——點擊喚出英文鍵盤——輸入密碼——點擊注冊（如果驗證碼或者密碼有一項錯誤，便會彈出錯誤提示之后停留在此頁面等待用戶重新點擊輸入框自己刪除輸入的數據然后重新填寫）這樣的流程。寫到這里我的頭有點疼，所以不做過多闡述，大家可以自己體會。
由于市面上網貸APP數量太多，但是注冊流程都一致為【輸入手機號】-【輸入驗證碼】-【輸入密碼】這類三要素流程，所以我選取了A級網貸產品微貸網、翼龍貸、拍拍貸及支付寶（副參考）作為分析對象。由于我沒有可用于注冊的多余手機號，所以很多流程沒有進入輸入驗證碼之后的下一步，但是已經足夠看出一個APP關于注冊流程的優化思路。
拍拍貸
拍拍貸的流程其實跟我們產品的比較一致，最后一步屬于非分布流程。但是第一步的注冊登錄判定以及設計上的通過字號對比讓用戶明確自己所處的位置這樣的iOS11設計理念值得我們參考學習。拍拍貸的最后一步點擊完成注冊之后如果輸入有誤的體驗也不好。我還有不滿意的地方是拍拍貸的整體界面設計偏簡潔清晰、以內容為主，而作為最重要的頁面之一的登錄注冊頁顏色大面積的使用了他們產品不怎么突出強調的藍色，視覺觀感非常的沉重，跟整個產品的基調嚴重不符。
微貸網
前不久剛發布版本——“七年微貸”的微貸網的注冊流程是與我的改版方向高度一致的，這點我感到很榮幸。它從用戶頁面就開始合并登錄和注冊的判定。用戶點擊【登錄/注冊】按鈕之后自動彈出數字鍵盤，用戶輸入手機號之后系統判定是否注冊，如果已注冊，引導用戶進入登錄界面，自動彈出英文鍵盤填寫登錄密碼，如果沒有注冊，引導用戶填寫自動發送的驗證碼并跟隨頁面切換自動彈出數字鍵盤，減少用戶的點擊次數，優化產品使用體驗。
翼龍貸
翼龍貸的注冊流程中規中矩，從注冊中就讓用戶感受到自己是傳統金融企業的這個概念。它有很多可取之處，包括注冊首頁的活動拉新（但是做成入口圖形式會讓用戶一直想點擊并且分散其它信息的注意力）、通過主色調紅色的步驟進度條讓用戶明確流程總共幾步和自己所處的位置，最后的獎勵回饋，還有開通存管賬戶的適當引導都是我可以從中學習到的一些設計思路，跟我們的產品理念也非常一致。
我們的注冊完成獎勵反饋提示。作為小白用戶以及30歲左右的目標人群的我來說，我看懵了，反應不過來這些獎勵對我來說意味著什么，我不知道積分是啥概念，我也不知道投標本金是什么概念，而且關閉或者開通存管賬戶之后我也不知道這些獎勵具體去哪里找和使用。但是這個不屬于注冊流程的優化，所以我只做了部分改動，具體可能會在以后分析改進。
支付寶
爸爸的APP，不想多夸。采用了分步注冊設計保證了用戶每步操作的視覺焦點都在自己要輸入的內容上。輸入4位驗證碼之后自動判定驗證碼是否正確，如果不正確，清空所有驗證碼并且配合手機震動和錯誤提示紅字抖動告訴用戶輸入錯誤，減少彈窗打斷，降低錯誤反饋造成用戶心里的不愉快。之所以賬號已經注冊的提示放在輸入驗證碼之后，是因為用戶點擊【立即登錄】的話，會直接登錄，而驗證碼就自動變為登錄需要接收的驗證碼，這點也是做得挺出乎意料的。
首先，我對產品做了一個視覺上的改版。采用了iOS11大對比的設計理念。首先分析頁面信息優先級，將頁面信息按權重排序，依次為核心步驟層、內容輸入層、輔助信息層，還有包含可點擊交互操作的操作引導層。然后通過字號、字色與字重拉開信息層級間的差距，最終將用戶聚焦到核心信息上來。
a.核心步驟層：是指用戶在短暫時間內瀏覽頁面時，能讓其一目了然的獲知當下應該操作的某個步驟。例如“輸入手機號碼”是這個頁面的重點核心內容，其設計需要重點突出，且精煉文字。
b.內容輸入層：是指用戶被核心步驟層吸引后，需要進行相關內容的輸入，例如昵稱和密碼的輸入等等。其設計需要引導用戶進行輸入操作，并且在輸入中給用戶帶來便捷性。例如包括密碼明文／暗文的切換，以及輸入驗證碼到最后一位后直接進入下一步，來確保便捷性。
c.輔助信息層：是指用戶理解了以上兩個信息層后，輔助信息層會有更多信息讓感興趣的用戶去了解。這里往往提供更多說明或者跳轉鏈接，例如使用條款和隱私政策等。
我在視覺上使用了CR設計語言（iOS11的設計風格）。Complexion Reduction設計語言是指使用更加簡化的界面顏色，更大更突出的標題字體，以及簡潔的圖標，來拉開頁面信息層級，突出頁面主要功能。作為用戶體驗設計師應該進行“最小化設計”和“逐步簡化”的設計模式，毫不留情的砍掉“沒有重要功能的元素”，使用戶快速關注到信息的本質。
改版前：
改版后：
1.簡單且突出的告知用戶在頁面中需要做的唯一一件事
2.減少零碎信息的展現，最大限度的精簡文案
3.各類信息分組，拉大信息戰線層級
1.增大了輸入內容的字號，簡單清晰明了。延續舊版本，對手機號碼進行344的分布
2.增加一鍵清空icon
在輸入時偶爾會出現輸入錯誤，如果沒有清除的icon，用戶只能一直按鍵盤中的清除按鈕，需要一直按住直到輸入框為空。點擊注冊時候，注冊按鈕變為加載狀態，清空icon與鍵盤同時消失/收起。
3.優化了不可點擊狀態的按鈕狀態表達
舊版本不可點擊狀態為灰色，比較老舊過時，并且顏色的視覺層次不高。
4.手機號位數不對/格式錯誤時，按鈕為不可點擊狀態
當input為空時，關聯按鈕為disabled的狀態，這是采用了防錯的原則：如當使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變為灰色無法點擊），以避免誤按，這是在提交之前的視覺驗證輸入的另一種方式。
5.修改了按鈕上按鈕的名稱
表單按鈕應該準確描述用戶正在執行的任務——創建帳戶或登錄等。
另外，我還優化了文字的顯示層級，共分為五類
涉及到文字/色彩規范是一個很大的工程，我們的理財APP在這點做的不是很好，因為這次改版設計是私下在做，所以我便做得隨心所欲了一點，甚至重新定義了品牌色：）。
關于負反饋的處理
所謂負反饋，指用戶行為出現問題時出現，比如投資金額小于可投金額，或者密碼不正確等等。雖然負反饋在產品交互設計中對于警示用戶不該做的行為或者是該行為會導致不良后果的可能時起到了不可或缺的作用。但是顯然更多的時候人們不愿意收到負反饋，任何用戶在得到負反饋的時候都會感到沮喪，因此盡量減少通過特定的反饋頁面來進行負反饋。
1.盡量減少用戶犯錯的機會，包括突出的標題及重要文字，清晰的文案，分步輸入等
2.輸入驗證碼步驟中，如果用戶輸入的驗證碼有誤，驗證碼自動清空并且輸入欄返回第一個，降低用戶操作及點擊數。
3.采用了手機振動+文字震動加文字標紅的方式提示用戶的輸入錯誤，用比較輕量化的反饋來弱化。
1.優化文案
·將會讓用戶看暈的獎勵文案整合至【我的獎勵】中，方便后續查看。
·增加了銀行存管的解釋文案，使強突出按鈕更有指向性，也更好的引導用戶去開通銀行存管。
2.優化主輔按鈕表達
這里我參考了翼龍貸的設計思路，但是做了一個優化，將主按鈕調整到右側。大數據表明，一般將傾向于用戶點擊的按鈕放在右側，點擊率更高。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
平面中的9種構圖，但有的同學還不是太明白，所以小編今天細說里面其中一種構圖：視覺引導線，加深大家的理解。
視覺動線會將觀眾視覺引導到特定的方向，先創造一個視覺中心點，之后會提供一條讓觀眾可隱約跟隨的視覺路徑，劃分視覺階級明顯讓觀眾知道元素之間的相對重要性。引導線是運用元素本身的原始形象或直接畫出實體線條，借用這些引導線觀眾的視線可以被指向畫面的其它元素哦。
上圖中使用了視覺動線 + 留白，留白可以讓海報中的「手」更加搶眼，使觀眾第一眼就會看那只手。接著就是視覺引導線了，引導線不一定是實體線條，它可以是元素本身的原始形狀、人物視線以及元素組合等等，借用這些引導線讓觀眾的視線可以被指向畫面中的其它元素。
說到這里，我想大家也知道上圖的引導線是什么了吧？引導線是手與線的組合，觀眾的第一視線是手，然后會順著手拉的線方向延伸，最后停留到右下角的小字里。這幾行小字就是作者要表達的主要信息。
但為什么不直接居中非要弄個引導線？雖然可以用這些中規中矩的構圖，但往往會顯得無趣，也不一定能吸引用戶去看了。
下面小編用一些案例來讓大家更好理解。
案例：
上面的海報設計是很好的例子，首先利用視覺中心點讓觀眾集中到大字區域，然后順著線條查看下方的內容，先是 bla 的內容，接著就是 zer,所以這圖主要信息應該是 RYDER BLAZER（但小編不知道是啥……）
上圖中，人物的視線也可以算是一種引導作用。
總之好的視覺引導線可以讓作品富有故事性和藝術性，還能提升作品視覺上的觀賞度。所以我們創造時應該重視構圖。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
說起日本設計，你腦子里冒出的第一個印象是不是「性冷淡」MUJI、優衣庫、nendo工作室，清一色的簡單灰白掛，看了就讓人想到「斷舍離」。
但是，并非所有的日本設計，都是這個調調的，也有可能是下面這樣的。
平淡無奇的紅綠燈，搖身一變竟然變成了楓葉的形狀？
綠、黃、紅三色正好對應不同季節下楓葉的顏色，有了它就算一路碰到紅燈，情緒也不會暴躁咯。
那些乘電梯永遠不看腳下的小孩，銀杏落葉鋪成的電梯，足夠吸引你的目光了吧？這玩意兒可比「注意腳下」的標語好使多了。
以上這些腦洞大開的設計全都來自于日本GOES公司創始人前田賢剛，他是個53歲的老頑童，低調到日站君只能找到他的這么一張小照片。
雖然公司總共就5個人，但卻和資生堂、奧林巴斯、加拿大觀光局等大客戶都合作過。
看了他們的作品之后，或許會顛覆你對日本設計的認知。原來日本人認真賣起萌來，也是一把好手吶！
看到這個日站君忍不住哼出聲「童年的紙飛機終于飛回我手里~」
但是千萬別真飛出去，因為它的真實身份其實是一個鹽罐。
「靈魂撒鹽」都弱爆了，「紙飛機撒鹽」了解一下，做飯的時候還能順便追憶下童年。
欸，這堆雪是干嘛的？
答案揭曉，其實這是一個門擋。
或者用來做書立也可以。永遠不化的積雪，簡直圓了南方孩子一個「看雪夢」，以后再也不用花5塊錢，雇北方人在雪上寫名字了。
雖然摸清了前田賢剛「不按套路出牌」的秉性，但日站君看到下面這個還是迷茫了，曲別針被掰彎了？
而它的實際用途竟然是固定海報的釘子！一眼掃過去，毫無違和感。不知道的可能還想求鏈接，哪家的回形針這么剛連墻都能戳穿。
回形針都能釘海報了，所以這肯定不是普通辦公用的燕尾夾。
沒錯，從底部的桿子就能看出些端倪，人家就是個吧臺椅。
事情變得沒那么簡單了，看GOES家的作品，仿佛演變成了一個「猜猜我是誰」的游戲。偶爾加班來一瓶啤酒，還挺有情調的。
哈哈你又猜錯了，它只是提醒你工作的便利貼。
有情調的來了，磁帶卷筆刀。
高科技儀器卷筆刀，連削鉛筆都能變成一件有儀式感的事。
一塊吐司，看上去松軟香甜，讓人忍不住想咬上一口。
不過別真咬，因為它是個如假包換的手機殼。這樣的手機殼千萬別給我，我每天都會餓醒的。
藏了塊「蛋糕」的茶杯，有了它喝水都是甜甜的。
一箱來自遠方的包裹，中間透出的紅蘋果又大又圓，任哪個快遞小哥看了，都會輕拿輕放吧。
嘿嘿又被騙啦，人家只是一卷膠帶，就是長得逼真了點。
夏日炎炎，來把「五花肉扇子」扇扇風。友情提醒，別在午飯前夕使用，不然可能會慘遭同事群毆！
再穿雙「牛排拖鞋」，總覺得腳底板好像油油的。
冰淇淋掛鉤，牢固性有待檢驗，總擔心天一熱就化了……
還有新鮮出爐的「蔬菜瓜果戒指」，青椒、草莓、胡蘿卜、玉米，應有盡有，敢戴出去的，日站君敬你是條漢子。
之前的巧克力總算知道是被誰偷吃的了，巧克力上的貓腳印透露了一切。
想和你家阿喵玩躲貓貓嗎？紙袋子就是個不錯的藏身處噢，露出的一截小尾巴，能萌死個人。
往袋子里一瞅，果然在這兒躲著呢。
喵星人款「暗中觀察」插座，你家主子盯著呢，看你還敢忘拔插頭！
路障也貼上阿喵的照片，醒目值立馬翻了個倍。
這只萌萌的小兔子表盤，總覺得少了點什么。
如果你穿的是小白鞋，調整好角度抬眼看，少的兩兔子耳朵終于補齊了。
難以想象，這些居然全出自一個大叔之手，所以說，千萬別小看大叔，他可能比20多歲的你更有少女心。
一個畫著美女的扇子，就能夠成為宅男愛用品了嗎？
那是你沒get它的正確使用方式，只要角度找的好，就能營造出下圖的場景，簡直是單身男性的福音哇。
誰說露肩裝是女性的專屬？
男生照樣可以擁有。穿上它，保準你是整條街最靚的仔。
精神病人思維廣，中二少年歡樂多，漫畫式鏡子專為每一位中二魂爆棚的你而設。
每天起床一照鏡子，誰還不是故事的主人公。
一般的傘都不夠符合中二少年的氣質，得撐這一把才行。
別人在明你在暗，再也不怕和陌生人進行迷之眼神對視了。
要是嫌那把不夠炫酷，八星八箭全鉆石豪華版足夠閃瞎你的眼了吧？
下面是新時代年輕人必備的手機三件套，自帶打光板的手機，絕對的合影利器！
手機也得好好防曬，「臉基尼」也給用上。
手指不夠長的少年，只需一根「手指加長器」，單手按到手機屏的各個角落，從此不再是夢。
這突破銀河系的腦洞，日站君不禁想為它們雙擊666。
GOES公司的理念是要做「引人注意而獨特的idea」，看了他們的作品應該沒有人會覺得他們沒做到吧。
人們總會忽視眼前的風景，前田把生活中的小物件摘出來，再融入自己的腦洞。
于是當大家再看到它們時會眼前一亮，然后會心一笑，感受到創意的美好，這就是設計的意義吧。
當性冷淡、極簡風大行其道，他們卻致力于把普通平凡的事物玩出新花樣，告別無聊的日常。果然有趣的靈魂才是萬里挑一！
以上小物均為良心介紹，如有種草概不負責，別問日站君要鏈接，因為日站君也沒有。2019年都到了，我們也稍微來點改變唄，或許比起性冷淡，不如賣萌來的贊。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
