這麼做設計，甲方終於滿意了！
身為設計師，
不僅要學會討好甲方爸爸
還要面對客戶的百般刁難~~
所以今天米醋決定給大家來點乾貨！
給大家講解一下UI設計中的對齊方式。
很多設計師都會遇到這樣的情境：
當設計稿件發過去後，
客戶爸爸並不認同這些不安套路
出牌的創意和想法，
所以我們只好用一些比較傳統
的常規設計原則和方法來說服客戶。
要想成為設計大神，
當然還是要掌握相關的設計技巧
才能百戰百勝！
在我們工作中會涉及到商業設計，其可以拆分成兩個關鍵步驟：
信息解構的意思就是我們要把設計內容進行分析，把主要內容和其他配合的內容區分開，主次分明才能更好的進行設計，如果在我們編排內容上鬆散無序，就會讓觀者在短時間內無法分清重點。就像我們寫作文一樣，要先提前寫好一個大綱，簡單的知道大概要寫什麼內容一樣。
視覺傳達就是利用視覺符號來傳遞各種信息的設計。我們設計師就是信息的發送者，傳達對象是信息的接受者。就像上面說把作文的大綱內容填充進去，這樣就是一個內容豐滿、生動感人的文章了，也就可以完美的提供在大家閱讀了。
四條基本排版原則，它們分別是：
這四條排版原則按首字母的拼寫被簡稱為：CRAP原則。
對比（Contrast）：其實就是避免頁面上元素太過相似。比如字體、顏色、大小、線寬、形狀和空間等不相同，就是讓它們截然不同。
重複（Repetition）：可以重複顏色、形狀、材質、空間關係、線寬、字體、大小和圖片等，增加條理性和加強統一性，這個意思很直白想像大家應該都懂的。
對齊（Alignment）：每個元素都應與頁面上另一個元素有某種視覺聯繫。在對齊很明顯的基礎上，可以偶爾打破對齊規則。 簡單點講就是大家在排版的時候都會設置很多控制線。
親密性（Proximity）：彼此相關的項應當靠近，歸組在一起。若多個項之間存在很近的親密性，它們會形成一個視覺單元，而不是多個孤立的元素。簡單點講就是圖、表、文等不同要素各自是一個排版小單元。
學會了這四條原則，設計師們就可以很快速的將頁面的秩序感建立起來。
那麼今天米醋主要來給大家講的就是第三點的——對齊。
對於很多設計師來說，對齊、間距、文本行距是一件很難把控的事情。如果中途有一個細節開小差了，那麼就會毀掉整個版面的節奏感。
經常因為沒對齊或是間距不合理等被批評，一臉無辜！因為這些小問題讓自己一整天的心情都不好了，並且還有同事會打趣說你是豬隊友，害的整個團隊效率都降低了。
對齊就像我們看到街邊擺放整齊的自行車一樣，讓頁面中的所有元素看上去統一、有聯繫而且彼此相關，將這些不同元素之間的關聯在視覺上表達出來。
這種方式，就是對齊。
當然也有些對齊·····這也太不正經了吧~！
簡直要逼死強迫症患者！！
在我們界面設計中，最常用的對齊方式主要有 3 種：齊行、居左和居中。
界面設計常用的對齊方式
齊行：在我們設計中通常用在閱讀性文本中，就像那些我們看的比較長的文本啦！一般用在詳情頁中比較多。
居左：這種對齊方式在設計領域是使用比較多的，一般像我們常常看的 App 列表信息展示中的， 並且居左對齊方式比較容易閱讀，要是遇到那些比較懶的閱讀者閱讀的話，他們就能很好的區分主次文本的層次啦！就像下面這個一面一樣，主次分明，容易閱讀。
居中：用在信息流動的文本表現中比較多，也可能是由於文案句子較短，使用居中對齊能使頁面左右的產生一股強烈的平衡感。
在設計中為了保證內容閱讀的舒適性，我們使用的元素也會採用居中對齊的方式，這樣就可以有效的加強模塊內元素之間的聯繫。
元素的橫向居中對齊
元素的縱向居中對齊
還有精華呢！別走開！
就是圖標與文字通過基於中心線對齊，他們可以有效的加強兩者之間的聯繫，而且描述文字還能有效地對應解說圖標的寓意。
小夥伴們是不是看的有點迷糊，其實對齊也是有規律的，設計師要善於發現設計中的聯繫。
下面米醋在來將種對齊模式解構到實際的設計中，讓大家更多的了解對齊的方式和規律。
小米的登錄頁
在小米的登錄頁設計中我們就可以一目了然的看出來，主標題與副標題進行了左對齊；而輸入框提示文字與輸入框基於中心線對齊，這樣看來可以讓提示信息和輸入框看起來更為整體舒服。
這個頁面設計中的內容劃分很明確，需要輸入的信息和描述信息是不是就一目了然了呢。
蘋果的登錄頁
那麼我們在來看看蘋果的登錄頁面設計是不是更為講究，標題和輸入框採用了不同的對齊方式來拉開層次，如「請登錄」標題和「取消」按鈕是左對齊，然後輸入框與提示文字則是居中對齊。
這樣可以將用戶的視線引入到輸入框的上面，從而加強了提示文字與輸入框之間的關係，並用大間距拉開了標題和內文的層次。
蘋果的登錄頁設計
在對齊的方式中你們是不是找到了規律呢，其實就是層級框。
通過對齊方式來區分內容的層級關係，其實就是隱形對齊框的作用。它可以將信息層級通過這種方式羅列在用戶眼前；
也可以在最近的視角內向用戶展示產品的核心信息，而且還能提煉出用戶在場景中最為關注的訴求，解決用戶的問題。
形對齊框
將信息通過層級框進行羅列
還有一個小提示！切記！
我們利用對齊時要學會做減法。一定要在使用對齊之前要先梳理內容，然後將內容做簡化，去除感覺重複的信息。
上圖就是直接根據需求製作出來的賬號註冊界面，從視覺上看挺整齊的，但其實可以設計的更簡單。
那麼我們再來對比一下兩個設計版本，在左右兩圖可以發現，左圖對文案進行梳理後運用整體性的左對齊能讓界面的閱讀性變得更強，操作也更為便捷，而右圖反之。
減少對齊的模式
米醋還給大家發福利啦！
推薦你們一款Photoshop 的參考線設置插件GuideGuide，它可以用於設定中心參考線和等分參考線等，而且操作非常便捷。
好啦！今天就分享到這裡！
希望大家都能GET到對齊的知識點~~
對齊是不是也沒有想像中那麼簡單呢？
小夥伴們千萬別學完就記在腦子裡，
一定要勤加練習！
這樣才不辜負米醋為大家做的知識分享！
回復Z獲取字體包，回復R獲取軟體大全
TAG:MICU設計 |