每個人都有自己的思考，只是有些時候不愿思考。我認為主要有以下幾個原因：

1、個人定位錯誤

B端業務脫離了設計師的生活場景，設計師很難有代入感。日常工作中，主要依靠產品經理的輸入。而視覺出身的設計師通常比較感性，不太愿意去了解復雜的業務場景，不想參加需求評審。對于需求內容，設計師容易全盤接受，甘愿只做一名“真正”的設計師。

設計師不愿意被稱為“美工”，但是現實中，一些B端設計師就是“美工”的角色。產品經理給了原型方案，設計師按照設計規范潤色一下，完成頁面搭建就可以了。當你問他為什么這么設計時，要么說“原型就是這樣的”，要么說“為了好看”，就是沒有自己的思考。

另外新人設計師缺乏思考，就容易盲從。當年我在設計實習時，就是如此。一方面個人的設計能力比較弱，另一方面缺乏思考，找不到破解途徑。更多的是依靠其他人的輸入，加上缺少自信，更容易聽信別人的想法。當時做了一些事情，但似乎又沒做什么，導致個人的成長非常緩慢，甚至會形成惡性循環，給自己也造成了很大的精神壓力。

久而久之，設計師的存在感就會越來越弱，也會對個人信心造成比較嚴重的傷害。

2、成就感低

B端產品的頁面設計很多都是流程、數據，設計師主要跟表格，表單打交道。做來做去，沒什么新鮮東西。時間長了，設計師容易失去工作熱情。特別是企業內部的B端中后臺管理系統，用戶量不大，各方面的關注度不高，用戶體驗似乎可有可無，設計師就會產生思考惰性，“就這樣吧～”成為了主流的想法。

另外設計師如果只關注交互和視覺、受限在設計規范的框架中，設計方案就會流于形式。而產品經理基于業務需求出發，設計方案也很容易被推翻，一遍遍改稿成為家常便飯。如果產品經理還懂點交互，那么在他眼中，設計師對產品就沒有多大的幫助，頂多只是幫忙把原型圖畫的規整了一點。

3、團隊氛圍差

很多B端產品對設計工作不夠重視，不會專門設置設計團隊，所以設計師的地位并不高，加之設計流程不規范，產品經理有時會直接扔一個原型方案過來，讓設計師照圖做設計，連個基本的設計輸入也沒有。有些產品經理的配合意愿差，設計師主動溝通時，還會遭到奚落或者刁難。

經驗不足的設計師碰到這種情況，一時難以找不到解決方法，就容易自我封閉，索性就放棄努力，完全遵照原型執行。畢竟“原型即需求，需求是產品經理的職責，我是遵照需求設計的，完全沒問題”。一旦有問題，設計師也有借口搪塞過去。

4、經驗主義作祟

經驗很重要，可以讓設計師從容地面對各種需求。不過有時候經驗主義會讓設計師想當然地去理解需求，導致設計師犯錯。每一個需求看似相同，但是深究下來，用戶和場景可能已經發生了變化，原有的設計形式不再適用了。

競品分析可以幫助我們獲得別人的設計經驗，不過這種設計經驗也不一定牢靠。競品雖然是相關性較強的產品，但是產品的定位、市場狀況、用戶和場景還是有所差別的，所以完全照搬競品也并不是最優的選擇。

當我們研究競品時，最重要的是剖析競品為什么會這么設計，而不是只看競品是怎么設計的。

二、設計師該如思考呢？

思考的方法有很多?？追蜃釉f過“學而不思則罔，思而不學則怠”。把思考和學習的辯證關系說得很透徹了。

1、思考的深度

“學而不思則罔”，意思是說只學習不思考，就不會很深刻地理解知識的內涵。

當我們接到需求時，產品經理有時候會直接指定一個競品，建議設計師直接照搬設計內容。對于設計師而言，這樣做設計肯定比較簡單。但是對于設計師的成長沒有太大意義。設計師應該深入思考，理解產品背后的設計原因。這樣才能將別人的經驗為自己所用。

另外當我們接到需求時，不要立馬動手開始畫圖，應該先要了解需求的目標、需求的用戶場景，對需求進行一番梳理，并與產品經理溝通，消除其中的疑問點后，再著手開始設計。

通過不斷地深入思考，設計師就能夠積累出自己的設計方法論，也可以幫助設計師快速成長。

2、思考的廣度

其實狹義的用戶體驗設計領域并不寬，應該說是比較窄的。設計師局限在自己的專業領域，很難獲得持續的成長。而在工作流程上，設計師的需求來自產品經理，如果只依賴產品經理的輸入，設計師在工作上必然會非常被動。

設計師想要獲得足夠的話語權，必須要提高思考的廣度。

1）站在用戶角度思考

設計師成長初期，注意力更多的是做好產品需求，完成設計方案。這個階段最大的問題就是“重設計、輕業務”。設計的出發點局限在設計本身，“視覺只追求好看，交互只關注控件或者操作邏輯”。

我剛入行時就是這樣，來了需求就做，不會問需求的價值，不去思考用戶關注什么，用戶場景是什么，主要就是為了完成設計任務。工作精力只是停留在與產品開發討論控件形式，操作方式、操作流程點擊次數等。

實際上設計師應該要了解用戶場景，并代入其中，才能真正的發現用戶痛點，才能做出更好的解決方案。

2）站在產品角度思考

界面設計是為產品服務的，必然也要滿足產品的目標。設計方案只是片面地為用戶體驗服務也是不可取的。在一些B端產品中，用戶體驗并不是最重要的核心競爭力，所以用戶體驗需要服從整個產品的規劃，在特定場景下就是要與產品相互妥協，逐級迭代，不能只追求極致的用戶體驗。

另一方面設計師還要深入了解業務，從設計角度幫助業務提升。比如某個業務場景下，需要給用戶提供一些數據指標，為下一步操作提供依據。產品經理或許只是給出一張數據表格。

而設計師則要思考如何進行有效的信息傳遞，讓用戶清晰地理解數據邏輯。最終給出的答案可能是，在數據表格基礎上，利用數據可視化方式展示數據之間的對比關系，便于用戶做出判斷。

3）站在設計師角度思考

很多時候界面設計比較主觀，每個用戶的喜好、感受可能會大相徑庭。所以設計師抱怨最多的就是“沒有話語權”。領導今天要綠色、明天要紅色，仿佛設計永遠在變動。最終千辛萬苦確定下來的方案，領導一句話可能又要調整。這對設計師而言，絕對是沉重的打擊。

設計師除了完成設計方案，還要思考如何將一個“主觀”的設計方案，“客觀”地表達出來，要讓相關人員知曉設計的思考過程，讓設計方案變得有理有據，并影響相關人員，獲得最終的認可。

一旦設計師思考總結，形成了適合自己的方法后，設計師或許就自然而然地擁有了“話語權”。

總結

設計師的成長應該是個老生常談的話題，思考能力是必不可少的能力之一。

“思而不學則怠”。有些設計師或許并不是不思考，而是深陷困境，找不到出路。思考過后，還需要去學習提升，去主動與他人溝通，尋找解決方案。或許這樣才能打通自己的成長之路。

作者：子牧先生

轉載請注明：學UI網》設計師的能力建設（2）:思考能力

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

但隨著大屏手機的出現、逐漸追求個性化、高效率的操作等原因，使得不少人開始習慣用“摳邊返回”的方式返回上一頁：按住屏幕左側邊緣并拖動。

無需特意將手指移動到特定的左上角位置、再點擊back圖標，隨意在屏幕左側邊緣按住并拖拽 即可返回上一頁，方便又快捷。

而且現在越來越多的手勢，賦予了用戶更多的操作自由與使用效率，也讓互聯網產品的生命力進一步得到了強化，給每個產品的功能體驗帶來了更大的發揮空間。

下面帶大家欣賞一下，各個手勢里好玩、優秀的互聯網設計案例。

一、雙指捏合

1、捏一捏就能抱抱？

之前網易（抑）云上線了一個很暖心的交互，在某條歌曲評論上用雙指捏一下，就會彈出一個“抱抱”的動畫，寫下這條評論的用戶就能收到一個“抱抱”。

夠給那些生擁有悲觀情緒（特別是抑郁癥）的人求得心靈寄托，帶來一些溫暖、安慰，表達用戶情緒，也降低產品不良風評（網抑云）。

亮點在于：運用「環境貼切」原則，雙指捏合的手勢動作聯想到了現實里的「抱一抱」動作，更符合/表達出抱一抱的情感關懷和暖心情緒。

觀點總結：產品不應該是冷冰冰的，應該給用戶探索更多的樂趣和溫度，通過「用戶關懷」助力產品口碑與印象的提升。

2、捏一捏就能伸縮？

iOS的相冊圖片，可以使用雙指捏合or分離 即可對圖片進行放大、縮小瀏覽，快速查看圖片細節。

免去用戶「需要點擊圖片后，再去縮放」的操作鏈路，大大減少操作路徑。但該交互更多符合國外操作習慣，國內還是習慣采用【點擊后再放大】方式放大圖片。

亮點在于：用同一個模塊兼容多種交互/內容，免去用戶「需要點擊圖片后，再去縮放」的操作鏈路

要點總結：可思考用一定的快捷操作來滿足不同水平的用戶需求，允許用戶定制常用功能，比如【快捷鍵、重新操作、默認值等】

二、搖一搖

1、搖一搖就能加載內容？

愛奇藝在啟動頁上的信息展示上做了創新：只需“搖一搖”即可進入對應的廣告詳情和影視劇播放頁，拋離傳統的“點擊”模式

亮點在于：利用新鮮玩法來吸引更多用戶觀看廣告、影視綜視頻，減少對啟動頁內容的抵觸情緒與用戶流失

要點總結：學會用趣味性交互 / 新的設計手法吸引用戶目光，利用新鮮感的驅使引導用戶參與，減少流失

2、搖一搖才能拍照出片？

喵喵記賬有個設計挺有意思的，按下相機拍照后，需要晃動手機來使相片成像，才能看到影像慢慢顯現。

通過連接現實生活感受，使成像過程具備儀式感與趣味性。

亮點在于：不僅只在視覺上進行擬物化，更注重與現實中類似的交互操作，使之更具真實感。

要點總結：系統的一切表現和表述，應該盡可能貼近用戶所在的環境，比如【用戶語言、使用習慣、手勢操作、生活聯想/隱喻等】

三、拖拽

1、一拖就能發送照片？

QQ里的圖片發送很有意思，只要按住想要發送的圖片并往上拖動，松手即可發送。不用像傳統的’先選中圖片，再點擊發送按鈕’，特別方便

對于發送單張圖片來說，免去了常規的跳轉頁面調取相冊的多余步驟，大大提升操作成本

亮點在于：利用手指的黃金操作熱區，賦予更加快速、便捷的操作方式，大大減少行為負荷

要點總結：對用戶重要、常用的功能可以設置「快捷操作」，提升操作效率

2、頭像還能拖出來玩的？

在即刻的個人主頁里，可以隨意地拖拽、甩動自己的頭像。松手后頭像會根據慣性回到原處。期間還帶著殘影、原來的頭像位置會顯示一個小紅心。

亮點在于：利用頭像降低了個人中心帶來’冷冰冰’的感覺，豐富產品的可玩性與互動性

要點總結：設計有趣的隱藏彩蛋，能給用戶帶來驚喜并有效拉進之間的距離

四、雙擊

· 哪里需要點哪里？

早期在抖音上看視頻時，點擊或長按屏幕上的任何位置都會顯示【愛心圖標】與【操作浮層】。

大大減少用戶的操作成本（手指與目光的移動），突顯產品的個性化服務。

2、雙擊就能控制彈幕？

B站作為國內「視頻彈幕」的始發者，它的用戶喜愛程度與操作頻率也是極高的。因此只要兩個手指雙擊屏幕，就能快速開啟或關閉彈幕。

用戶可隨時隨地開啟或關閉彈幕，無需特意找到右下角的固定入口進行操作，大大減少操作成本。

亮點在于：免去用戶需要點擊特定區域的操作負荷，增加產品操作的舒適與自由度

要點總結：系統狀態可見性：讓用戶知道【自己在做什么、處在系統的什么位置等】，并做出適當的反饋

五、滑動

1、用標尺來控制數值？

Florence里的標尺設計得很有意思，通過第一人稱下的鏡頭視角，讓用戶感知當前標尺所對應的人物清晰程度，以此來控制標尺位置。

避免用戶掌握、控制不了合適標尺的位置，提升選擇效率

亮點在于：提供參照物可讓用戶有直觀的決策依據，減少操作成本

要點總結：任何讓用戶更改/選擇的地方，都應該明確地傳達出預覽效果

2、用拖拽來控制人物動作？

Florence是一款‘模擬敘事’小游戲，里面很多的交互動作都模擬了真實生活：

比如【刷牙】，需要左右滑動屏幕來模仿真實的刷牙動作；再如【做飯】也需要滑動平底鍋來模仿炒菜動作。

亮點在于：利用交互動作來推動情節的發展，讓玩家有真實的代入感，提升游戲的趣味性。

要點總結：模擬真實生活/環境的設計，能有效提升用戶的理解能力、產品趣味性

當然還有iOS微信上的‘刪除確認’，在原有的內容基礎上表達對用戶的二次確認，避免用戶手誤造成操作失誤，減少不必要的損失發生

六、隔空手勢

華為Mate30pro 有個「隔空手勢」的交互，可以在距離屏幕20cm-40cm內進行手勢操作，如隔空翻頁、上下滑動、隔空截屏等。

提升手機的使用體驗與操作效率，特別是邊吃東西 邊玩手機（追劇看小說等）

還有優酷HD上線了一個黑科技交互【隔空手勢】，可隔著屏幕用手勢做各種操作

如「播放/暫停、全屏/半屏、快進/退15秒、亮度調節、音量調節」等操作，讓用戶不點觸摸屏幕就能操作視頻。

亮點在于：讓用戶解放雙手，無需手指觸摸到屏幕即可控制手機，可減少很多衛生問題與操作成本。

要點總結：學會利用新技術來滿足更多、高層次的用戶訴求，通過一定的設計方式來滿足不同水平的用戶需求。

– END

最后，再酷炫再方便的手勢，最多也只是錦上添花、起方便快捷的作用而已，不可能完全替代‘點擊’的位置與作用。

正如正文所說：手勢交互只適合用對業務重要、用戶常用的場景中，可以起到四兩撥千斤的，切記不可為了酷炫而隨便添加。

以上老和對【手勢操作】的一些小總結，覺得認同的麻煩幫我【點贊/在看/收藏/轉發】，寫得不對的請輕點噴~

作者：和出此嚴

轉載請注明：學UI網》有沒有發現，‘點擊 ’開始變少而各種手勢越來越多了？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

既然粗暴、接地氣的設計容易被人說成“土”，那么使用一種當下比較流行，或者比較有特色的風格，就能有效增加畫面的設計感和時尚感。

▲ 上圖使用高飽和度的藍色和綠色組合搭配，以及文字以背景的方式環繞在產品的周圍，都是近幾年比較流行的設計手法。

▲ 上圖使用扁平效果的描邊色塊來進行排版，既能突出文字信息、視覺效果也很時尚。

▲ 把高飽和度對比色、扁平風、幾何圖形、文疊圖等一些常在藝術海報中使用的技巧，用到促銷海報中來，這種接地氣的設計是不是也變得高級了很多?

▲ 用波普風格設計促銷海報，效果也是很亮眼的。

二、把文字圖形化

有很多海報設計需求是以文字為主的，客戶也并沒有提供配圖，如果只展示文字，效果很容易單調，這時就可以嘗試提取文字中的關鍵詞，設計一個圖形符號與文字信息進行巧妙組合，文字與圖形符號共同組合成視覺主體。

這么做既可以增加畫面的美觀性、視覺沖擊力、形式感，同時文字的面積占比也不會被大面積壓縮，保證信息的清晰易讀。

▲ 把文字與光線組合在一起，既突出了文字、也加強了畫面的視覺沖擊和美觀性，同時，電子產品的品類調性也得到了體現。

▲ 上圖把文字與漢堡圖形組合成一個主視覺圖形，加強了畫面的形式感。

▲ 上圖把文字與打板器組合成主視覺圖形，打破了純文字的單調感。

▲ 上圖把文字和圖片放在一個外賣袋里，加強了設計的帶入感和產品屬性。

三、把文字場景化

其實這也是文字圖形化的一種形式，只不過不是把文字與具像的圖形符號結合，而是把通過把文字進行扭曲、變形、添加元素等方式，使其具備抽象的場景特征。

▲ 該海報把主要信息組扭曲成墻面和地面的效果，創造出一個立體空間。

▲ 這件作品與上圖的設計手法有點類似，也不知道是誰借鑒的誰。

▲ 上圖把“敢為先”這個幾個字拉大，布滿月球后面的整個天空背景，就好似一扇巨大的城門。

四、圖文組合

即把圖片與主要文字組合在一起，共同形成畫面的主視覺，而不是相互獨立，把文字當成圖片的配文，常用的圖文組合方式有圖疊文、文疊圖、圖文交叉等。

圖文組合的設計方式可以加強圖文之間的聯系和對比關系，使畫面更整體、更聚焦。

五、加入人物或動物插畫

如果版面中只有文字，或者只有文字和產品圖片，那么版面都容易顯得無趣、缺少細節，在畫面中加入人物和動物而可以增強代入感和親切感，不過這類實物素材都有版權，而且比較常規，而改成插畫素材就可以有效解決這一問題。另外，最好要讓這些插畫元素與文字或產品發生互動。

▲ 上圖加了一個卡通的廚師以后，除了畫面更生動、更有趣，也會給人一種值得信賴的感覺。

▲ 上圖的排版和形式其實比較普通，但配上搞怪的插畫后，海報變得有趣了許多。

▲ 版面上方的熊貓加強了海報的吸引力和趣味性。

六、精致的排版和配色

下面的這些促銷海報并沒有特別的風格、巧妙的創意，也沒有新意的設計形式，只是通過精致的排版和漂亮的配色，把大量的文字和圖片素材合理地編排在一起，效果照樣不錯。

▲ 信息雖然很多，但是層級分明、清晰閱讀，大量使用色塊進行排版，而且在編排上有很多細節的變化，顏色為類比色組合。

▲ 圖片和配色很有食欲，文字排版簡單、清晰，但又通過不同的色彩、字體、字號、修飾手法將不同信息進行鮮明的層級區分，文字與圖片有關聯但互不干擾。

▲ 外邊框的處理以及版面中的圓點底紋使版面顯得更精致、更有設計感，版面雖然排得很滿，但是主次分明、信息清晰易讀，三組食物所搭配的文字雖然不大，但是細節滿滿、井然有序。

▲ 大量的手寫字體給人一種“純手工制作”的感覺，與樸實無華的產品形成呼應，文字全部集中排在版面的上方和下方，而中間區域完全留給了產品圖片，視覺對比鮮明。

拋開客戶的需求以及效果談設計的美觀性就是耍流氓，把文字縮小、加一些沒什么意義的英文、使用一些酷炫的排版技巧，可能會讓你的設計更精致、更洋氣，但如果拋棄了客戶的需求和消費者真正關心的東西，那么我們并沒有真正解決問題，如果客戶要大、要多，那么我們就爭取給他一個又大、又多、又好看的方案。

作者：蔥爺

轉載請注明：學UI網》客戶：要多、要大、要好看，能安排不?

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

歷史長廊

在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。

在當時，大多指的就是寬度自適應布局。在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞–漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。

qqmail就是css hack的完美體現，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。

互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結合自適應的思想，出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。

現如今，為何需要考慮多設備的兼顧呢，依然是因為時代發展與生活方式的變遷：

• 即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
• 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；
• 屏幕分辨率正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別。結合自身產品用戶訪問瀏覽器分辨率
• 鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。

因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。

布局方式對比

靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下：

靜態式布局：

窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。

自適應布局：

用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。

分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集，每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現橫向滾動條，UI，圖片，文字會自動縮放，元素內容、布局、交互方式基本不變。

彈性布局：

以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。

流體式布局：

屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小，不同于百分比自適應的是隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。

響應式布局：

如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活的去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。

頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、css media query的使用等。

狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

A+R混合模型布局

• R和A上的區別

當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。

他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。

R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。

A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優化，在斷點之間的自動過渡比較少。A采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。

兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。

兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？

• A+R模型結合了基于單個主要臨界點的自適應和響應式方法。

混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。

自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。

很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。

否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。

選型

如何考慮實踐過程中的判斷呢。一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類。現在的CSS框架基本都具備響應性。

但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。

當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層app化。

根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題?？傊?，根據場景響應式可以從各種層面，各種粒度上做。這是現代web開發的特點。

建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）

響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應各種布局。

大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。

實踐與技巧

首先，我們需要了解幾種分辨率的差別。

ps：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率

以一個SaaS類后臺產品為例，對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：

如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。

自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：

• 左側的可視區代表整個屏幕小于960px時的具體布局和內容
• 右側的可視區代表整個屏幕大于等于960px時的另一種布局

在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。

通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。

這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。

因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。

其他輔助手段

刪格

柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于對齊內容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內容。

2. 頁面邊距（Side Margins）

頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。

3. 用于組成柵格的列數稱為列結構。

8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D

4. 斷點

是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。

如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。

5. 網格規則

列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位，“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。

產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。

6. 流體柵格與混合刪格

流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。

混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。

如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。

結語

設計需在技術方案前介入，根據你的產品特點，進行設計方案評估，可借助的手段有刪格，網格規則等，設計斷點規則時，需關注設備的常見系統分辨率。

移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。

但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。

A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。

作者：神樂

配圖：沙拉

轉載請注明：學UI網》Web產品的適配設計選型

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

這是一個科技類網頁的小插圖，這樣看是OK的，但第一版的圖就一言難盡了，如下：

做完設計之后，我往回看看了，發現第一稿真讓人頭皮發麻呀～
最后的呈現效果比之前做的都要強太多了。

不管是顏色方向、質感、細節上都甩前者一大截，原因是什么呢？我總結了以下幾點：

一、層次關系

客戶就說“畫面視覺太平了，沒有層次，黑白灰關系沒有拉開！細節也沒有！顏色不好看！自己回去再想想吧！”……

黑白灰關系什么意思呢？我的理解就是先把設計稿去色不就能看到黑白灰了嗎？

很多同學在做設計時不會考慮黑白灰這個問題，但其實顏色也是有變化的；在顏色中黑白灰的關系就是色彩的明度關系，明度越高就越白。
正常情況下畫面中的黑白灰關系拉得越開，就越有空間感、層次感。

如果畫面中黑白灰關系沒有拉開，就會使畫面飄飄的，很奇怪、不接地氣。

如上圖就是一個正常的黑白灰關系，每一層都區分的很開，它就會有空間層次感。

而且我們也需要保持畫面的平衡感，黑色多了就會使得畫面沉，白色多了就會使畫面飄，灰色多了就會使畫面悶。

所以我們得把握一個度，把握黑白灰在畫面中的節奏感！

我們再把黑白灰關系運用到實際工作中：

整個背景采用暗灰色調，主體底板用亮灰色，內容就用亮色系，陰影及厚度用暗色調。這樣一來畫面的層次拉開了。

那么客戶說的細節該怎么去加呢？

二、細節

沒有細節、太平了，我就想到把它做成立體的感覺，讓畫面豐富起來，也可以加一些點綴的小元素來修飾畫面。

從平面二維到立體三維畫面的細節就豐富多了,而且三維空間更加容易出效果。

在加細節的過程中，我感覺到了畫面中有點太過于規規矩矩了，全是方方正正形狀，就很呆板的感覺，特別是左下角的矩形框，與整個畫面之間沒有聯系、不協調。

這就是構圖出了問題。

解決的方法很簡單，只要讓圖形與圖形之間互相穿插、疊加，讓它們你中有我我中中有你；甚至可以把圖形加以旋轉，讓圖形產生“正”與“斜”的對比。

這種方法就可以解決畫面死板的問題。

但是我覺得不能夠加矩形了，畫面中方形形狀已經很多了，那么我們是不是可以考慮一下用圓去增加畫面節奏感。

方的對比是圓，也是一個對比關系，但圓的占比面積太大了，咱們就可以用弧線去代替。

這不，弧線把方正的矩形打破了，畫面就更加生動有節奏。

還有一個細節：

如圖所示，這里就涉及到一個識別度的問題，我們在做設計的時候，一定要把形體交代清楚；

我做了一個銀幣的效果，但是形體邊緣輪廓沒有交代清楚，整個銀幣糊在一堆了，看不清里面的字符是什么，這樣的感覺不是很好，整個元素是虛的。

還有上升的線條取消發光效果是不是去掉會更好呢？

這樣是不是畫面會更加的完整呢，這點很重要呀，我們得把物體交代清楚，不能模棱兩可就糊弄過去了！物體虛虛的給人感覺很飄，不穩。

其實還有中間的一稿，但是顏色一不小心就弄臟了：

三、顏色臟的小技巧

經過嘗試，我總算明白為什么顏色漸變會偏臟了；我總結了以下幾點：

1、飽和度低的顏色占比不要太多，多了顏色就容易顯得臟。

如圖，右邊的顏色飽和度偏低，這類顏色就會發灰，灰色多了能不臟嗎？

2、盡量不要用對比色去拉漸變，對比色漸變對于新手來說不太友好，“紅配綠賽狗屁”就是這種說法。

只要注意到這兩點就基本可以避開顏色太臟的情況

總結

以上就是這次小案例帶給我的啟發和思考，希望當遇到類似我這種問題的時候能夠給你點啟發，能夠幫助到你！

怎么樣，是不是很耐思~有沒有想動筆的沖動！那接下來把話筒交給青燈，讓他開始他的表演吧！

YoYo，大家好！我是最近畫到手痛的青燈，這次是我第一次做插畫教程，做的不夠好的地方就請大家多多指教啦！

這期的彩鉛顆粒風格主要是用扁平人物和元素+方型構圖+彩鉛肌理刻畫的結合。

構圖靈感來源自法國藝術家 Gasp art 的插畫作品，這個系列作品以扁平人物為主，用演奏樂器的方式結合了植物的生長，可以很直觀的感受到每個人物的動作和元素都是框在一個正方形里，給人一種規整又舒適的感覺。

藝術家 Gasp art 的插畫作品，僅供賞析

總結一下 Gasp art 的插畫構圖，其實主要就是人物加元素組成方型構圖，可以用植物和道具元素或者是人物動作彎折的形式構成方形邊框。

這次的刻畫方式我們選擇了兩種風格：一種是偏粗糙的鉛筆肌理風格，第二種是偏柔和的細膩噪點風格，讓我們來欣賞一下圖片：

藝術家 Nadiia Zhelieznova 的插畫作品，僅供賞析

藝術家 Wnjing Yang 的插畫作品，僅供賞析

我們截取第一種風格的局部，放大觀察并總結一下：

1. 噪點顆粒明顯，并且噪點的間隙會把底部的顏色透出來。

2. 疊加肌理時會透出上一層肌理，但是疊加的越重就會越實。

3. 在結構轉折處和邊緣有描邊。

再總結一下第二種風格的插畫特點：

1. 顏色和噪點的過渡柔和

2. 邊緣用亮色或重色拉開對比，輪廓清晰

3. 在最亮處有高光點

把這 6 點結合起來就是我們這次的刻畫風格啦~

1. 確定主題收集圖片素材：

在開始之前，要先想想畫啥。咱們列個思維導圖，把場景分成室內室外都在干啥，可以多想一些好玩的事。這里我選了做瑜伽，躺著玩手機，路上踩到了口香糖和快樂逛街這 4 個。

現在關鍵的來了，根據這 4 個小場景來找合適的人物動作參考和一些道具參考，一定要多找參考！?。《嗾覅⒖迹。?！找參考?。。≈匾氖虑檎f三遍！

• 瑜伽篇：

瑜伽這張我找了個動作接近框型的一個動作，然后根據瑜伽休閑愜意的感覺，我找了個室內植物還有小鳥和紙飛機，想代表她隨著身體的放松，精神也慢慢飛向了遠方。

在動筆之前我們先分析一下人物的比例和特點。

人物風格分析：

① 人物頭身比特點：人物比例在 11 頭身左右，因為人物動作有折疊，頭占畫面七分之一左右。

人物上半身在 4 頭左右，腿長 7 個頭左右，手長 6 頭左右。

② 人物四肢特點：四肢偏粗方，可以想象是多個矩形和梯形相接，銜接的時候注意關節弧度。

2. 畫草圖

① 先提取動作框架，根據我們分析好的頭身比例調整放在框里使得四肢貼邊呈方形。 

② 給框架加肉，根據之前的四肢分析，多用方形和圓矩形概括，這里我把女生的頭發換成了大波浪，增加了飄逸的感覺。同時曲線也會方便后期刻畫。

③ 同理，植物直接用一個彎的水滴型概括葉片和葉莖，鳥用半圓形概括身子加上小半圓的頭和四邊形的尾巴就概括出來了啦~

④ 最后整合一下元素開了個“天窗腦洞”，紙飛機飛進這個天窗。然后在植物邊上用黃色的線條加了一些靈動的水滴，這張瑜伽就做好了。

• 快樂逛街篇：

第二張購物的也是同理先找參考，大部分逛街的動作都是比較平緩的走路類的姿勢，這里我特意找了一個幅度較大的舞蹈動作，再找了一些服裝參考。另外我打算用水加上金幣流入黑洞的方式表現“花錢如流水”的概念。

步驟和之前的都是一樣的，這里加入一個水流小 tip：

• 踩到口香糖篇：

第三張我想的是男生在趕去上班的路上踩口香糖，草圖同樣是從動態提取入手，我想讓手和腳上的口香糖有個互動，就把原動作的腳抬起來了一點，讓手靠近鞋子去抓口香糖。另外我把左邊的手大臂伸平小臂轉過來做一個看手表的動作，表示他要遲到的焦急。

• 躺著玩手機篇：

第四張我這邊提取的是一個躺著翹腿的人物動態，為了讓整個人物能符合方形構圖，我把人物左手抵著地把人物上半身撐起來了點，頭發用大小不一的泡泡在邊緣處排列，接著我夸張了翹起來的腿使得整個動作幅度更大，同時也讓整個構圖更充實。最后我在手機前面加入了一個大泡泡的元素，暗示我們時常沉浸在手機信息帶來的巨大泡影里。

鋪色可以用鋼筆勾閉合形狀，也可以用 ps 自帶的硬邊緣筆刷畫。

配色以補色為主，在色輪上呈 180 度的變化，以這張瑜伽舉例，能看到比較明顯的橙色和藍色，在這對顏色基礎上再加入了它們的相鄰色作為點綴色，在色輪上呈 30 度左右變化。

• 筆刷介紹

終于到了激動人心的刻畫環節了，這次給大家準備了村口高質量彩鉛噪點筆刷~~我這邊已經按照繪畫順序和效果類別整理好了~~（后臺回復【插畫046】領?。?

這里重點介紹一下這幾個筆刷！

• 皮膚刻畫

給皮膚增加色素，首先我們要增加的區域分為：

1. 五官例如：鼻子，眼睛，腮紅，耳朵

2. 陰影例如：脖子，腋下，衣服的陰影，以及身體轉折處來加重

以人物面部舉例，選一個比皮膚更深一點的顏色用【軟底紋筆刷】由重到輕地上色素，顏色就會自然的過渡過去。

接著用【點狀排線筆】再加重一遍。

用一樣的方法把身體部分畫完，最后可以在邊緣處（比如手腳接觸的地方，手指縫）加重線用于區分色塊

• 服裝道具刻畫：

畫衣服和道具這類面積比較大元素時，第一步先把顏色提亮，第二步再鋪排線紋理（選一個你喜歡的方向）并在關節處加重。

第三步用【軟底紋筆刷】根據光源加重褲子陰影，腿彎折處用套索工具勾出來鋪色加重，第四步用【點狀排線筆刷】加重陰影處，顏色越重面積越小。

最后在轉折處勾勒更深的邊線就 ok 了~

• 背景元素刻畫：

用【軟底紋筆刷】加肌理，【速寫鉛筆】加裝飾線的方式把其他的植物和小鳥元素刻畫完。

暗色背景的星星第一步在星星里鋪上背景色，然后用亮色把中間提亮，第二步給星星中間用白色畫個細十字線，星星底部順著四個角畫延長線條再復制一層縮小旋轉 45 度，最后用【高光筆】點底部點一個亮光，亮色背景的星星不用刻畫直接做延長線和提亮高光就可以。

• 頭發刻畫：

首先第一步也是把頭發底色提亮，第二步用波浪線把頭發分成中間粗兩邊細的葉片形式，然后第三步在葉片里加線條，線條遵循兩側密中間疏的原則向焦點聚攏。

第四步在線條密集的地方用使用【軟底紋筆刷】加重，中間輕輕帶過，頭發體積感就出來了。

最后再在頭發亮的地方用線性減淡的圖層模式用【高光筆刷】提亮一下，邊緣用【速寫鉛筆】輕輕勾勒一條淺色邊緣就ok了~

• 背景肌理：

第一步先把背景提亮至白色，第二步用【軟底紋筆刷】用力的涂色，這樣鋪完色后就會有些白色的點點透出來了。

第三步用【點狀排線筆刷】加重物體下方讓他們看起來有點投影的狀態就 ok 了！

• 材質和質感表現：

1. 水滴材質：

來到了我們畫面的點睛之筆的部分了，在畫這種半透明狀的物件東西是可以吸環境色涂在中間，讓水滴兩側保持亮色就會有透明的質感呈現出來，最后點上高光水滴的透明質感就做出來了。

2. 泡泡材質： 

在這張躺著看手機里有一個泡泡的材質，它的繪制邏輯其實跟紙飛機拖尾是一樣的，但是泡泡的顏色會更復雜一點，所以我們先來分析一下泡泡的顏色怎么畫。

拿泡泡的一個小弧度邊舉例，從左到右的顏色就是從黃→紅→粉→紫→藍→綠這樣的顏色變化。

所以我們照葫蘆畫瓢，先畫出一個一樣的形狀，用【后悔藥】橡皮擦，擦出透明漸變，擦的時候在弧度凸的地方多保留一點，凹的地方輕輕擦。

接著用【軟底紋筆刷】畫出顏色，注意顏色的位置和占比也一樣參考照片。在顏色銜接的地方用筆刷輕輕的覆蓋上去就會比較自然，在光源位置畫出白色的高光。

繼續把完整的泡泡畫出來，再加上一點線條裝飾一個泡泡就畫好了！

3. 畫面光澤：

用【高光筆刷】把圖層模式調成線性減淡模式在光源方向提亮，再用【速寫鉛筆】在最亮處點一個小高光，整張就畫完啦~

掌握了這些刻畫方式，再加一點耐心和時間這 4 張就畫好啦~~

1. 人物動作轉化和道具的分配要貼合方形構圖。

2. 加入主色的鄰近色豐富畫面。

3. 刻畫顏色遵循陰影顏色越重面積越小，高光越亮面積越小的邏輯，讓重的更重，亮的更亮，拉開對比。

4. 你永遠可以相信后悔藥橡皮擦，畫多了就擦掉所以大膽畫吧~

作者：藍貴蓮

轉載請注明：學UI網》從構思講起，手把手帶你繪制一套彩鉛噪點人物插畫！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

從根兒上捋一捋，人類社會經濟最根本的是“互通有無，各取所需”這八個字。更高效的生產力決定了更好的交換能力。只要制造業的生產線還能繼續開足馬力，源源不斷的生產出生活必需品，那么就有相應的“場景”去交換它們。這個“場景”最終的末端形式就是“店”。有了互聯網交易這個場景之后，門店（門市）就成了“線下店”?！熬€上店”就啥都好嗎？

顯然不是。人跟人之間隔著一個“網線”，我們對小物件或者低價值的小商品或許還有很大的容忍度。但是，對于你的家庭服務需求，你要找的是一位共同在家里生活朝夕相處、帶娃、護老的阿姨，不見一見，放心嗎？所以就需要這么“一個專業的家庭服務門店”來提供面對面的咨詢，以及培訓出優秀的阿姨來提供令你和你的家人滿意的服務。

不得不說，在這個領域里，還沒有一個“一統天下”的品牌和絕對“統治力”的產品。而順應趨勢來看，開放生育和老齡化，這確實是一個“有發展空間”的行業，需要這么一個“門店”。有的行業在沒落，有的，則在生長。

門店標準化背后有怎樣的運作邏輯？它的本質是什么？后疫情時代如何做門店形象標準化？

門店做標準化當然不僅是說品牌露出好、有助于打開潛在客戶心智、顧客選擇偏向這些理由。標準化本身除了品牌、效率之外的比較重要一點，就是這套運營標準能使加盟老板、乃至員工都能夠迅速進入“經營”的狀態，并逐步迭代總結，再通過標準化把經驗傳遞下去。標準化這套法子能使老板少走彎路，早盈利。老板盈利賺到錢了，品牌方就有了更大的話語權，實現更大的商業企圖。

在后疫情時代，人們的錢袋子緊了，老板在經營投入上謹慎了，設計上的發揮空間狹窄了。門店的裝修標準化不妨從“設計形式上比友商好一點，材料便宜點，執行容易點”上入手。

設計形式好一點

往大了說是“差異化”。從材料、顏色、鋪貼方式三個角度去探索，任何一個角度提上一個LEVEL就可以。

如果只差一點，等友商迭代升級怎么辦？

不同于“線上店”，線下門店的裝修周期有比較明確的規律。三年小裝，五年大裝，裝修早了不賺錢，裝修晚了不符合當下品牌發展階段了，保持小步迭代的策略即可。

材料便宜點

裝修材料水深，不探討材料的品牌和產地。這里的便宜體現在品牌商的標準化管理成本，就是加盟商對材料的采購難易程度。如果買不到或者總缺貨，加盟商的免租期是有限的，很可能導致“平替”的事情發生，但這個“平替”不是真的能平，很可能是向下“平”。從而出現失控的設計落地結果。同時，對品牌元素應保持絕對的掌控力，統一采購配發（路邊廣告店自由發揮的結果超乎想象）。

上面提到的裝修周期，這也決定了在選材上要選擇符合盈利模型的材料。不要追求極致的耐用而導致成本提升。

執行容易點

讓施工的人能明白標準化的設計意圖。不同的施工師傅對同樣的設計圖紙理解而施工出來的結果可能是不同的。所以做出明確設計意圖、圖紙、以往項目中的錯誤做法。并不是說，寫得越多越詳細越好。我恰恰在這上面深有體會，忽略了施工師傅的辦公環境和項目節奏。我們管這叫“由于缺少用戶習慣調研導致產品無法觸達用戶心智?！?

要知道，用戶面對，洋洋灑灑幾大篇的描述，往往不愿意去閱讀，所以盡量采用短視頻的形式去說明效果會更好。

在弱矩陣組織中設計的影響力邊界在哪？受控環境下的設計管理如何發揮最大效能？

說到這，終于到了正題。似乎設計師往往都是弱勢群體，很大程度上取決于組織架構的形式。大多數品牌公司的設計組織都是依托于產品側的訴求。例外的是乙方設計公司，因為設計本身對公司來說就是產品。

弱矩陣的組織更像是臨時抽調人力組成的作戰小組，平時各職能人員都在自己組織內處理常規業務需求發揮職能。這個組織形式上，也影響了參與者在項目中的投入精力。設計師在有限投入的情況下，需要更好的把設計流程和設計落地規則以及檢驗標準沉淀，以供其他各個環節的職能人員查閱和重復利用。

上面所說的，經驗豐富的設計師可能已經駕輕就熟了。再說說另外的思考。

我想，還可以做進一步完善審批流程、輔助工具、權重區分、沉淀文檔四個部分。

審批流程

提到審批流程，十幾年前新興的互聯網行業熱衷于“扁平化”，對傳統行業的審批流程嗤之以鼻。時至今日，當年的新興的互聯網也演化成了傳統互聯網，組織架構越發龐大，職能劃分也越來越細，業務也趨近于穩定。現在再看扁平化，不過是企業或者行業在發展初期無法形成穩定的流程體系和組織結構。審批流程在高并發、時效性強的項目中，可以為你分擔更多的監督節點。各個職能去監督各自擅長領域，識別和規避風險。

輔助工具

這一年最大的感觸就是資源同步問題。從以郵件分發演進到網盤云端下載，都沒能很好的解決這個問題。家庭服務行業之前從未真正有過的品牌化的運營。加盟商對品牌的理解力和協同力是非常初步的。并不像隔壁的3C數碼行業駕輕就熟，隔壁的加盟商甚至形成了自己的一套品牌管理組織架構，主動去擁抱品牌。品牌標準化的落地不要局限于“手冊”，讓“手冊”靈活起來并不是一件難事。嘗試通過線上智能客服的方式，使加盟商通過關鍵字獲得資源同步，或常見疑問解答。要保證溝通平臺不能跳躍，比如常用微信群溝通，就不要一竿子支到公眾號，這反而增加了理解成本。好的工具可以事半功倍，將設計師從重復的溝通中解放出來，將其精力投入到設計當中。

權重區分

加盟商開店和裝修項目是一個高并發的項目。往往集中在行業淡季，這就導致在有限時間和有限資源配置下，做出權重區分。厘清各個項目條件的輕重緩急，比如說：搬家新址的項目權重是最高的，因為他面臨舊址無法繼續運營的情況。翻新升級的可以稍等一段時間，不影響他的正常運營。

沉淀經驗

不總結不沉淀，就跟人失憶是一樣的。好的經驗要沉淀，失敗的經驗也要沉淀。甚至說，失敗的經驗比正確的經驗更有用。這說明它有盲區，也許是管理上的盲區，也許是執行上的盲區，它可能是系統性的問題。這在跨部門溝通和團隊擴張的過程中會幫助業務變得更加穩定，為項目增加抗體。

以上就是我分享的內容。當然，我并不是都做到了盡如人意，也有還在進行和改進中的事項。如果整套搬運項目管理體系會與項目的“土壤”不匹配。做好流程裁剪，因地制宜吧。

設計更多的是事前去思考和謀劃如何去實現，這其中少不了去理解行業和落地流程，深入思考和理清邏輯。設計師的認知邊界在哪里，影響力的邊界就在哪里。

逆水行舟，不進則退。

作者：環鐵藝術家

轉載請注明：學UI網》當互聯網遇上線下門店，設計師能做些什么？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

• 產品需求與設計研發的良性循環
• 今日事今日畢
• 設計文檔的規范性
• 多渠道溝通
• 驗收不僅僅是記錄問題
• 沉淀業務組件的必要性

一、產品需求與設計研發的良性循環

從產品經理提出需求開始，到研發開發完成上線，整個過程我們可以看作是一個迭代。倘若與研發同一個迭代完成產品設計，時間上肯定是不夠用。需求是永遠都做不完的，一個人無論怎么埋頭苦干，還是會時間緊迫無法喘息！這時候團隊合作顯得至關重要。我們需要進行合理的任務管理，利用工具達到更好的效果。目前我們敏捷組產品與設計小團隊用的是飛書文檔，它可以新建所需要的任務看板，清晰直觀的看到此任務當前流轉的階段，任意拖拽方便快捷。

完善需求的詳細信息，比如：所屬項目、任務執行人、優先級、外審狀態、敏捷組、文檔鏈接等等，就可以從不同維度去管理任務，篩選我們想要了解的重點。

那么基于此，如果我是視覺設計，完成需求后就可以將它拖入下一泳道，等待排期。未完成的也就不會進入到排期和研發階段，這樣基本上每個迭代研發都會提前拿到相應的設計稿，盡管后續可能會有細節上的修改和返工，也不會很倉促。

二、今日事今日畢

三、設計文檔的規范性

每個人都有自己習慣的設計稿排列方式。整齊、清晰、直觀的布局，有利于研發快速捕捉到想要查看的信息。

?? 設計文檔基本由以下部分組成：目錄、交互原型、交互說明、視覺稿。交互稿與視覺稿最好合并在一個文檔中，方便研發查看。

?? 具體到頁面細節說明，可以安排在相應設計界面的附近，用清晰的數字或者標簽展示。

?? 如不同狀態，不同變量的變化，也需要詳細標注。

?? 設計內容過多時，像以下細節單純在頁面上展示很容易被忽略，需要單獨拿出來在旁邊重點強調一下。

?? 如今標注插件很多，不需要全部手動標注了，但對于一些我們認為研發會忽略和寫錯的尺寸、間距等，可以表示一下。設計軟件的自動展示標注有時候會因為圖層覆蓋之類的問題點不到某些元素，這個也需要檢查一下。不然研發就自由發揮了喲～

?? 各式各樣的組件有非常多的形式和狀態，設計在引用時要明確類型，避免研發亂用。

?? 比如這個全局提示組件，組件本身可以提供多行展示的樣式和規則，但研發很有可能不知道某種情況下對應的展示樣式，實現的不是我們預期。以下是日常迭代中研發實現的有問題的樣式與正確的對比：

如上述所講，完善補充細節，譬如圖標的顏色變量，懸停變化，狀態變化，引用組件備注等等，這些都是開發還原落地視覺設計的基礎。頁面設計中，所需的圖標、圖例、圖片等素材，切圖并壓縮給到研發，最好用統一的方式去管理圖標，比如iconfont，或者自己公司的組件平臺等。

四、多渠道溝通

當接到新的需求并且拿到交互稿，前幾周也參加了需求&交互內審，基本不會出現需求和框架大改的問題。大體了解背景和設計重點后，可完善視覺細節。

做完設計稿只是成功了一半，還需在設計內審前，發給對應的產品和交互同學評論提意見，先修改掉一波明顯的問題。這是視覺設計階段第一個比較重要的溝通，提前在大部分內容上達成共識，節省了后續評審的時間。

五、驗收不僅僅是記錄問題

1、項目上線前驗收

提到驗收是我非常頭疼的事。前期設計稿準備充足的情況下，研發如果能實現到視覺稿的80%，驗收起來不會特別吃力。有時會遇到驗收內容多，前端還原度低，耗費設計同學大量時間，建立良好的驗收機制非常關鍵，與研發同學的溝通和磨合也是必不可少的。

涉及到人員較少時，可以坐到一起面對面去溝通；若此次內容較多，涉及不同人，可建立文檔。

一遍驗收后并不完美，基本要2-3輪的繼續走查，針對優先級比較高或者問題重災區，標紅后給到相應負責的前端繼續修改，保證上線前90%以上的問題得到解決。若還有問題遺留，可新建kaptain任務后續優化，讓驗收問題有跡可循。

線上已有問題，按照模塊集中歸納，建立對應的研發任務。開發過程中可與前端同學隨時溝通，提供細節補充。

有時我們認為很簡單的去掉一條間隔線或者間距，可能涉及到非常多不同的場景面板，提前溝通也有利于研發評估工作量。

六、沉淀業務組件的必要性

每當開始新的項目設計，要費好大功夫找源文件呀。適當的歸納整理歷史文檔，也有助于我們快速的進入設計狀態，對新人也很友好！

以業務需求為背景，在組件庫的基礎之上，業務組件的整理尤為重要。按照每個人的使用習慣，我們可以建立自己的“業務”組件庫，方便需求迭代時快速定位。

比如，我們可以將業務組件分為幾部分：圖標、圖例、場景等，進而細化場景中的內容。至于怎么去命名和排版細節，都可以按照自己的習慣來整理，當然組件形成后也可以擴大到我們同業務線的UX或交互同學一起使用，提高設計效率。

可能對于非設計崗位來說，看到的僅僅是一張設計圖，但在設計稿背后我們需要去支持和處理的細節也是非常有價值的存在。

希望這篇小小滴文章可以帶給你一定的幫助 ~(≧▽≦)/~

作者：小柴

轉載請注明：學UI網》這些設計細節你知道嗎？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

低代碼開發平臺（LCDP，英文全稱為 Low-Code Development Platform），顧名思義，就是僅需通過少量代碼或無需代碼就可以快速生成應用程序的開發平臺。借助低代碼平臺，你不需要像程序員一樣寫代碼，而是僅通過對于組件和模塊的拖、拉、拼、接就可以很迅速地搭建出一系列頁面，完成一個基礎產品。

低代碼平臺 OutSystems 的功能界面

低代碼平臺的誕生和發展的進程簡述如下：

– 2000年：可視化編程語言誕生，通過一些可視化的界面來輔助用戶進行編程；

– 2014年：著名的研究機構 Forrester 正式提出低代碼開發概念，并投身對該平臺的研究當中，低代碼平臺在國外興起；

– 2016年：國內的低代碼平臺相繼發布；

– 2021年：中國市場的低代碼生態體系也逐步建立了起來，且正在加速發展，待開啟一個新紀元。

作為幫助企業和團隊快速搭建產品、實現數字化的新工具，低代碼平臺的核心功能有以下幾點：

1.可視化

以簡潔的圖形化操作界面為主，做到通俗易懂，降低使用者的操作門檻，開箱即用；同時你可以在搭建好的界面中進行試用操作，所見即所得。

2.模型化

可以通過拖、拉、拽等方式拼接平臺上的組件，用來搭建頁面?？梢造`活定義模型中的字段、元素和大部分布局。

3.工程化

通常包含開發調試、自動發布上線、數據監測等一站式的產品開發能力。

4.擴展性

支持少量的代碼擴展，可以實現一部分個性化的產品設計和開發需求，也可以和更多第三方工具聯動應用，做到功能和信息的互通共享。

和組件庫一樣，低代碼平臺也是一種提效工具。但它與組件庫的不同之處在于：

1、有成套的成熟解決方案。

低代碼平臺提供的不僅是原子級別的組件，也包括頁面的模版、產品功能的框架和操作流程，比如提供各類企業級應用常見的聚合表、儀表盤、報表等已經成熟的功能界面解決方案。

2、能順暢銜接第三方工具。

3、注重流程而非單點提效。

讓各個產研環節之間更易產生聯動，適用于互聯網產品研發的全流程，不再局限于設計和開發環節，也可以從業務、產品側直接做輸入。

理想化的情況是，業務側和產品側也可以輕松地使用低代碼平臺上提供的解決方案做出高質量的“原型圖”，甚至是產品的基礎版本，設計師僅需要做部分調整，開發檢查優化下代碼，產品就可以直接上線，比現在的工作流程要高效很多。

而且當產品側在低代碼平臺上對文案做出調整后，相應的代碼也會直接產生變化，這樣就大大減少 “產品 – 設計 – 開發” 這種單線程的溝通方式帶來的細節調整上的時間成本和錯誤率。

二、對于設計師工作的影響

低代碼平臺帶來的產研方式的革新，對于不追求個性化體驗的、從0-1的、功能相對單一、通用的企業級產品是合適使用的。這類產品的產研場景中，低代碼平臺可以代替設計師和開發完成重復性、低價值的體力勞動。

不過，低代碼平臺在現階段也并非適用于所有產品。這種方式做出的頁面質量和功能自由度會受限于可視化編輯器所提供的服務和能力，如果編輯器不支持某種自定義的功能樣式，那么產品形態在實現業務需求的過程中就會受限。所以對于業務需求和用戶體驗要求較高的業務領域，低代碼平臺目前起到的作用還是有限的。

目前，接觸低代碼平臺的設計師可以被分為兩類，一類是用低代碼平臺的“用戶”，也就是自己參與的業務已經開始使用低代碼平臺做提效工具來做設計和研發了；另一類是設計低代碼平臺的“設計師”，也就是自己參與的業務就是低代碼平臺產品的設計。

1、對于「用戶」類的設計師

使用低代碼平臺的一個核心思想是：低代碼平臺只是協助你工作的工具，不是你的替代品。它是手，而你是腦。你的思維和判斷不要被工具所限制。你可以從重復性和低價值的工作中解脫出來，更多把工作的重心放在：

1.吃透業務

把時間和精力放在理解業務和用戶需求、參與構建產品上，嘗試讓設計思維更早地介入到產品構建的過程中。低代碼平臺也可以變成你與產品和業務的無縫對接的橋梁，也更便于你了解他們的工作目標和方向。

2.去同質化

低代碼平臺的普遍應用會進一步帶來企業級產品的同質化，這個時候更需要從用戶需求切入，以商業、社會、人文等不同維度的設計創新來綜合性地思考去同質化的解決方案，提升用戶對于產品的認知，增強產品的差異化。

3.學新技能

工具在變化，你所掌握的技能也要隨之更新。要充分關注和了解低代碼平臺的功能和進展，不僅不排斥使用，還要隨之一同發展。你的工作技能將不再以設計繪圖技法為主，要在低代碼平臺帶來的協作方式變革中提升新的工作技能。

2、對于低代碼平臺的設計師

設計低代碼平臺的一個核心思想是：低代碼平臺本質上研究的是“業務模型”、“界面設計”與“代碼實現”三者之間的關系。所以你可以：

1.從流程側切入

需求、界面、代碼通過一個可視化編輯器實現綁定在一起，其背后所對應的業務、設計和研發之間的關系不可忽視。要保證流程上的無縫對接和通暢性就需要多了解他們之間的工作協同方式。

2.從用戶側切入

從低代碼平臺的核心用戶入手，為業務、設計和研發分別提供有針對性的功能服務，以此提高平臺功能的豐富性、易用性和可拓展性。

現階段也只是低代碼平臺的起步階段，前路漫漫。如何最大限度地賦予不同類型的用戶操作權力、最大程度上實現定制化、擴展到更多業務領域，都是需要繼續研究的可課題。

作者：元堯

轉載請注明：學UI網》工作經驗｜低代碼平臺，會給設計師的工作帶來哪些影響？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司