先來看看下面的海報，給人的感覺就是夢幻高級，滿滿的質感撲面而來。

深色的背景圖配上發光的文字效果，有什么小伙伴會想，為什么我沒有這么用過。

 

  

第一步 >

第二步 >

第三步 >

 

最后再次貼上最后的海報完成圖。

作業問題

第一步

我們先將下方模塊和首屏之間拉開距離，之后填充同色系的藍色作為最下方背景的顏色，之后將圖片上方飽和度提高，再把產品和模塊邊緣處進行摳圖，做出破圖的視覺效果，復制多個泡泡增加畫面的氛圍。

第三步

最后

 

 

鏈接：https://pan.baidu.com/s/12J-Q0Crq3iB5OXDWmfACrw 提取碼：fagy

原文地址：三個小美工（公眾號）

作者：three

轉載請注明：學UI網》干貨素材 | 講真的，這些素材你真的很需要！

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

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

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

w

02.背景簡述

大型企業由于員工上萬，所以對于人才管理的系統基本都是購買國外垂直類的頂尖系統，而擁有5w+員工的58，則是采購的國外的WORKDAY系統，但是，由于服務器在國外，所以對于好多操作請求都非常的耗時間，最重要的一點是，關于人才數據這么重要的核心內容，也在人家手里，萬一哪天國際形勢非常嚴峻了，呸，希望不會有這么一天，所以我們要像鄧稼先老先生研發原子彈一樣，核心數據我們要掌握在自己手中。

這里通過雙鉆模型來簡單闡述整個項目的流程

f

03.探索階段

如果你想做好一款B端產品，首先要了解他的業務形態，因為b端客戶不像c端用戶那么單一，在整個業務鏈條里，每個角色負責不一樣的模塊，所以我們面臨的問題不是單一的用戶痛點，而是怎么把整個鏈條做的更通順便捷，然而一款強大的b端系統的復雜度遠遠是你不可想象的，畢竟人家國外頂尖系統有上萬人在研究呢。所以我們目前的目標就是先解決58的個性化的人力資源管理。

· 深入業務

首先，我們對業務進行專家訪談，向專家了解業務，對基礎認知進行了桌面調研，對用戶角色進行焦點小組訪談，整理出58內的HR業務形態及分工模型。

· 競品研究

設計師與業務一起使用競品，由于人力資源管理系統是一款專業類的垂直軟件，市場上可參考的競品其實不多，即便是可以找到的資料，也只是寥寥的幾個界面，于是我們充當客戶去找資料，最后搜集了國外3款、國內2款同類可參考的軟件，并通過不停的與業務碰撞，探索適合58的模式。

f

04.定義階段

· 與業務握手

通過前期的調研，我們了解到業務中銷售崗位的入職次數是最高的，所以業務痛點也是最集中的，所以我們在銷售入職日探訪了58北京分公司，實地觀察入職的各個環節，以及每個角色的分工及權限，并在當晚與他們進行了一次深度的訪談，讓我們的設計定義更加聚焦。

· 確定設計目標

通過前期的用戶角色分類調研，以及對痛點的歸類分析，我們得出了兩個關鍵需求：線上化與自動化、操作模式本土化。對于如此龐大的系統，如果按功能去梳理，那是很不現實的，怎么能更快速又能更直觀呢？

轉變思維，從業務角度轉為服務角度。我們服務的是業務，業務服務的是員工，然后系統都是圍繞著員工在職場的各個環節來解決問題的，所以我們圍繞著員工繪制了職業生命周期全景圖。

從圖中可以看出各個角色的工作及配合方式、工作效率及提升空間、各環節各角色的滿意度及可優化的方向，再通過對任務節點、交棒時刻、過程體驗的梳理優化，最后達到一個最終的理想狀態。

w

05.設計階段

整個功能流程梳理下來后，系統頁面已經預估到了400+，而我們的排期倒推下來只有8個月的時間，如果按正常的設計流程“全部模塊業務需求→系統信息架構設計/修正→各模塊交互設計修正”來做的話，黃花菜都涼了，那怎么在緊張的排期內快速輸出還不會出錯呢？

·利用MVP思維，拆解最小業務單元

通過與業務、產品討論，我們選用具有業務閉環屬性，最具業務代表性的最小業務單元，并做快速的驗證，通過不斷探索，實現現實中的設計流程。

再通過對頁面的解離，抽象出三大龍骨頁面類型，再配合規范、控件組成系統的血肉，最后達到了27倍的產出效率，我們讓不可能完成的任務提前完成了。

·情感化探索

B端系統大家統一的認知就是注重功能，不要用花里胡哨的東西來影響操作，但是從競品分析中得知，其實隨著b端c端化，b端的設計師已經在嘗試加入一些插畫元素，所以怎么在不影響操作的前提下，又能讓員工感受到溫暖呢？

服務鏈條上的觸點探索

以我們的服務主體員工為目標，員工與企業的第一個接觸點是在接收offer的時候，這是傳遞企業文化、情感的很好的契機，所以我們優化了在這個觸點下的方式，強化接offer的神圣時刻，并通過游戲化的方式來引導員工填寫資料、查看入職引導。

系統內的情感體系搭建

我們定義了系統的人物角色，讓她更飽滿更有故事性，并以一個專屬客服的角色，落地在系統中的特殊場景下，如個性化首頁、開屏引導、功能引導、空頁面、及身份卡片等模塊中。

w

06.實踐走查階段

為了更好的測試，我們的業務方已經駐扎在了項目組里，采用與舊系統并行的方式，也就是一套數據同時錄入兩個系統，來驗證新系統的穩定性及合理性。與此同時，交互與設計同學也是分批次的提交走查報告，提升整體的設計還原度，終于在整個項目組的不懈努力下，新系統目前已成功上線。

w

原文地址：58UXD（公眾號）

作者：環鐵藝術家

轉載請注明：學UI網》項目總結｜企業級管理系統實戰

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

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

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

01、什么是「雅各布定律」

「雅各布定律」是由雅各布·尼爾森（ Jakob Nielsen）提出的一條關于產品可用性的定律。沒錯，這里的雅各布·尼爾森就是那個提出「尼爾森十大原則」的尼爾森，也是我常常在文中提到的UX研究咨詢公司NN/g（尼爾森諾曼集團）的創始人之一。

1999年雅各布·尼爾森發布了一篇名為《界面標準會扼殺設計創造力嗎（Do Interface Standards Stifle Design Creativity）》的文章。在文中，尼爾森講述了他與甲方一同設計某個電商網站的經歷。

在設計該電商網站商品導航方案時，方案一是 采用絕大多數用戶長期在其他網站所接觸的導航方式，方案二是根據甲方對自身產品線的看法構建的一套較為新穎的導航方式（具體方案形式，尼爾森在文中沒有描述）。

尼爾森分別對兩個方案進行了可用性測試，結果是：當用戶使用方案一導航時，導航到目標商品的成功率為80%，而方案二的成功率僅為9%。

雅各布·尼爾森在文中引述這個例子，是為了闡明一則觀點： 用戶將大部分時間花在其他產品上（這里的“其他產品”放在當下這個時代，我認為就是 擁有巨量用戶的頭部產品）。因為用戶花費大量的時間在這些產品上，自然會被這些產品培養出一定的用戶習慣。

如果你想提升產品的可用性，你要做的事情就是與其他產品保持 一致性——這就是 「雅各布定律」。尼爾森認為 一致性是支撐產品可用性的最重要條件之一。并且他將這些應該保持的一致性稱為「 設計標準規則（Rules for Design Standards）」。

那么當下的產品都遵守著哪些「設計標準規則」呢？

02、設計標準規則

實際上，遵循設計標準規則就是遵循用戶的心理模型和行為模型。我依次從宏觀到細節梳理一下，當下的產品設計普遍都存在哪些設計標準規則。

2.1 一致的產品模型

耍家任職于一家電商公司，我司的產品在主業務線（銷售商品線）上，從精準搜索或商品分發，到商品詳情、加購、生成訂單、付款、返回結果，這一套基本的電商模式框架，是一定要符合大部分用戶的行為模型和操作習慣的。

說白了，國內的電商巨頭無非就那幾家，用戶每天花費大量的時間在這些產品上，早已經被培養出了非常深刻的行為習慣，如果我們在主要盈利業務上去進行創新，自然是要承受收益風險的。

這一點不僅是我司會考慮到的問題，國內大部分的電商產品，也都是遵循著這一主流電商產品模型。

而在一些自身產品特有的功能、任務流中，我們就大可以進行產品模型的創新。那是什么讓用戶在不一樣的產品模型中，依然能夠靈活自如地上手操作一些功能呢？

那就要說到交互示能了。

2.2 一致的交互示能

當用戶脫離了熟悉的產品模型，卻依然能夠上手一些功能，是因為他們從其他產品中早已學習到了一些基本的交互示能。

例如文本中高亮帶下劃線的文字或懸浮有陰影的卡片也許可以點擊，帶有紅色徽標的功能也許比較重要或需要用戶查看等等。

當自身的產品交互在示能傳達上和其他產品不一致時，就很容易引起用戶在操作與體驗上的疑惑。

2.3 一致的頁面結構

還是以我比較熟悉的電商行業來舉例。我們可以看到，國內大大小小的電商產品，除去自身功能與GUI的特性，詳情頁頁面結構基本上都是這樣：

因為頁面結構對用戶的影響比交互示能更大，一致的頁面結構、功能排版可以讓用戶極快地熟悉并操作產品。也許你會對此嗤之以鼻？認為這是給不去創新尋找借口？

然而這么做的知名產品卻不在少數。2017年 Youtube 改版，保持了絕大多數頁面結構，對于無法適應的用戶，允許他們切換回舊版；前不久更新的 iOS15，Safari 將地址欄移動至底部，卻也允許用戶自由切換地址欄位置。

保持一致的頁面結構并不是要產品設計完全摒棄功能排版上的創新，而是在創新時也要 考慮到用戶的學習與適應成本。

2.4 一致的圖形認知  

落實到具體的UI上，保持與其他產品一致的圖形認知，會更易于用戶理解。但圖形認知不僅僅只是告訴用戶：三個圓點的icon代表著“更多”、叉代表著“關閉”…更加符合用戶認知的圖形，甚至可以輔助到業務目標。

墨跡天氣之前做過一個A/B測試，希望通過修改分享圖標樣式來刺激用戶分享行為。分別投入了3個試驗版本和1個原始版本。

隨著市場上的產品增多，視覺圖形的使用場景越來越繁雜，當我們無法確定哪一些圖形更加符合自身產品用戶認知的時候，也可以像墨跡天氣這樣進行數據驗證。

雖然墨跡天氣并沒有再進一步分析為何方案3的圖標能夠勝出（我猜測是否與iOS原生應用培養的用戶認知有關？），但我們能夠確定的是，在沒有任何文字提示的前提下，有更多墨跡天氣的用戶能夠理解到方案3中圖形所傳達的“分享”操作的含義。

03、如果再被問到這個問題…

如果再一次被問到「如何看待當下產品設計同質化嚴重」的問題，我想我應該會這么回答。

首先要分析面試官所謂的“同質化”指的是哪一個方面，是大方面的產品、功能、交互同質化，還是具體落實到UI設計師身上的視覺、風格、元素同質化。

如果面試官是詢問對產品、功能同質化的看法，那大可以闡述「雅各布定律」。因為遵循其他絕大多數產品對用戶培養的習慣來進行產品設計，可以顯著提升產品可用性，降低用戶學習成本。

并且很可能你的產品可用性與業務目標、商業價值掛鉤，那更應該保持這種一致性，不應該用商業的風險來為產品的創新買單。

而落實到視覺層面，我認為遵循設計標準規則，實際并不會影響到設計師對GUI的創新。例如我們知道很多競品的案例：MacOS 與 Windows 、 WPS 與 Microsoft Office 、 iOS 與 Android ，為了減輕用戶的學習成本，它們在產品設計、交互設計上存在著許多一致性，然而這并不會干擾產品在GUI層面的表現，用戶依然能夠從視覺層面區分這些產品。

所以作為UI設計師，大可以向面試官表達自己在GUI層面的考慮與創新。一致性不可怕，同質化也不可怕，可怕的是脫離可用性去談創新以及完全為了一致性而失去創新能力的兩個極端。

原文地址：UCD耍家（公眾號）

作者：Howiet

轉載請注明：學UI網》用「雅各布定律」解答一道面試題 | UI&UE實用方法論

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

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

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

輕質感在 UI 設計場景中的運用近些年比較明顯，以磨砂效果為代表的無論是在圖標設計還是界面表現上面都較為常見，特別是在金剛區的圖標設計上面。

喜馬拉雅 App 首頁金剛區圖標結合磨砂效果呈現，材質感和舒適度都較為突出。實現難度也比較小，通過 Sketch 軟件的背景模糊很容易實現。突出業務以微動效的形式表達，這也是較為常見的差異化設計解決方案之一。 

02.  多種模式滿足用戶不同喜好 

不同用戶的操作習慣和感官標準各不相同，越來越多的產品為了滿足用戶的不同喜好，設計多種模式進行設置切換。最早的就是主題皮膚，逐步延展到更多的功能模塊中，比如音樂播放頁的布局設置。

MOO 音樂為用戶提供了以專輯封面和背景大圖來進行播放頁的模式設置，用戶可以根據自己的喜好進行設置。在進行 UI 設計的時候無法判斷用戶的唯一喜好，多種模式的自定義設置更能帶給用戶良好的體驗。

03.  獨一無二的個性化首頁定制 

隨著用戶喜好的變化，自定義模式可以滿足各自不同的需求，網易云音樂推出了獨一無二的個性化首頁定制設計。用戶可以通過預設的默認模式、歌單模式、視頻模式進行選擇，為了方便用戶判斷定制后的效果，可以通過“功能說明”觀看預設后的樣式，直觀的展示提高用戶的判斷體驗。

自定義模式打破了千篇一律的設計，根據用戶的喜好呈現內容，提高了用戶粘性和使用體驗。

04.  App Banner 呈現的裸眼 3D 效果 

突然有一天在使用自如 App 的時候發現了這個隱藏的“彩蛋”，模擬裸眼 3D 效果的呈現方式在 Banner 上面，是一次全新的嘗試。通過借助移動設備上的傳感器等將 2D 影像轉化為景深效果，以呈現出不用 3D 眼鏡就可看到的 3D 效果。

自如

05.  簡單的動效不一樣的場景代入感 

微動效在產品設計中的運用已經非常普及，特別是在圖標中的運用，既能提高圖標的關注度，也能體現圖標的差異化。就像一個掃一掃的功能圖標，加上簡單的動效呈現，提高了場景代入感。

將現實中的掃描動作運用到圖標動效的表達上面，既增加了該功能的關注度，也能讓主題表達更清晰。

06.  視頻引導關注度更強 

引導頁是 UI 設計中較為普遍的存在，而動效的引導和視頻形式的引導相較于靜態圖文形式來說，更能吸引用戶的關注度。特別是隨著 C4D 等三維軟件的普及，結合立體感和動效形式形成視頻引導，也是一種全新的體驗。

07.  底部手勢區的充分運用 

對于移動端來說，隨著大屏手機的普及，手勢操作舒適區的研究至關重要。底部操作范圍算是手勢的最佳區域之一，充分的利用好有利的位置進行更多功能的設計，提高功能的曝光度。

將一些重點功能通過懸浮層的形式設計在底部，隨著交互的變化進行隱藏和顯示，也是一種非常不錯的設計解決方案。比如平安口袋銀行將我的余額、積分兌換、簽到、抽獎、領取紅包等設計在底部標簽欄之上，通過懸浮層的形式呈現，讓這些原本隱藏的功能得到了曝光，增加了用戶的關注度。

平安口袋銀行

08.  首頁導航位置的合理運用 

頂部導航欄通常是提示當前頁面的位置，對于首頁來說一般會設計搜索、品牌曝光、功能操作、當前位置提示等內容。也有一些直接展示 Banner 圖，隱藏導航的存在。

一些產品想要弱化活動 Banner 的空間占比，除了縮小 Banner 高度尺寸以外，最近也發現了一種新的設計解決方案。安居客將活動主題設計到導航位置，單擊和下拉刷新到一定程度都會喚起活動詳情。該設計解決方案不僅充分利用了導航位置，在達到曝光度的同時也不會過度占用首頁版面，合理的運用了有限的資源。

09.  背景的變化讓等級區分更直觀 

很多產品都會涉及到會員中心和會員等級區分，不同的等級如何在設計上面體現出差異，除了圖標的區分以外，背景的差異也是一個設計方向。

自如通過不同漸變色的過度來體現會員等級的差異，在滑動預覽的時候 UI 界面也會隨著色彩的過度發生變化，視覺效果非常突出。色彩的變化過度自然，動效的轉場伴隨著內容的更換，直觀的體現了會員等級的權益區分。

自如

10.  個人中心設計的場景變化 

個人中心的設計對于很多產品來說都比較常規，隨著感官體驗的升級，個人中心設計的差異也有待深入思考。而場景化的情感表達是提高個人中心設計差異的方向之一，結合插畫和微動效的表達較為普遍。

自如的個人中心除了以場景插畫的形式來提升情感化體驗以外，晝夜變化采用了不同的插畫場景來表現，代入感非常到位。場景插畫還融合了微動效，微妙的變化提高了產品的精細化設計，增強了產品的體驗感。

自如

小結 

01.  內容與手勢的聯動設計 

交互手勢在移動端設計場景中至關重要，手勢的變化和內容的聯動關系，決定了是否可以獲得更高的用戶體驗。 比如抖音的短視頻播放設計中，進度條拖動過程中除了時間數字變化以外，數字的位置會隨著手勢的方向位移。聯動效果的設計感官體驗明顯，內容傳播的關注度更強。

抖音

02.  內容切換的場景模擬化設計 

以真實場景模擬設計表現，在 UI 設計中比較常用，帶給用戶更強的場景代入感。 比如千聊 App 首頁的免費聽直播欄目，直播預告的時間切換就像頻道調頻一樣，切換到自己感興趣的內容。自然流暢的動效滑動，兩條點綴的紅色線條，把頻道切換的場景代入感體現給用戶，帶來新穎的感官體驗。

千聊

03.  通過文字角標設計表達切換差異 

頂部內容的分類切換較為常見，特別是電商產品中。一般體現點擊和默認通常有字體大小區分、顏色深淺區分、下劃線區分、圖形裝飾區分等。 除此以外也有下劃線的變異用法，通過角標線段來體現差異。通常是右下角位置，伴隨著動效表達。比如京東 App 首頁，聯想到京東吉祥物，也有一種品牌呼應的感覺。

京東

04.  更貼近真實場景的設計引導 

通過設計還原真實場景，帶給用戶更強的代入感，從陌生轉換到熟悉的場景觸感。 高德地圖通過模擬真實的道路狀況，呈現出更加真實的行車引導，就像自己駕駛的車輛行走在手機屏幕上一樣。真實感的路況引導增加了駕駛的代入感，降低了復雜路口選錯方向的可能性，從視覺感上面也提高了感官體驗。

05.  人性化的城市點亮設計 

好的產品體驗，就是在無意間帶給用戶驚喜。在小長假期間，自駕游沿途經過不一樣的城市地點時，會彈出“歡迎到來”的點亮提示，第一次看到還有種驚喜感，算是一種旅行足跡的記錄。 在這個彈窗廣告滿天飛的互聯網環境中，能把這種驚喜帶給用戶才能抓住用戶的黏性，通過情感化的設計提升用戶對于產品的認可度。

06.  被人忽略的上滑交互探索 

大家經常使用下拉刷新這個功能，而且在該功能上的設計探索已經呈現出非常多的案例，而下滑到底部之后的設計探索卻被設計師所忽略。 在支付寶的首頁中，下滑到底部之后進行了新的設計探索。繼續上滑將會解鎖一項新玩法，以游戲化的設計帶給用戶新的探索體驗，也許這一嘗試將會帶來頁面底部新的挖掘點。這個新的挖掘點會像下拉刷新一樣，在底層功能需求的基礎上被深度開發，呈現出更多營銷玩法。

07.  列表式設計中的左右滑動交互 

在列表式設計中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見。而大部分的列表設計中都沒有探索過右滑交互，除非是右滑返回或者退出等操作。 在小宇宙 App 的訂閱欄目中，對于關注的內容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運用了左右滑動的手勢交互，不僅操作便利也帶給用戶不一樣的使用體驗。

小宇宙

08.  通過展示形式增加內容的品質感 

同樣的東西放在不同的環境中，通過不一樣的展示形式，帶來的品質感也是相差甚遠。就像放進櫥窗的飾品或者展品，給人的品質感就會更高。 得物（毒）在購買欄目將精選推薦、福利專區、潮流榜單、補貼專區等內容，通過類似于玻璃罩的展示模型來呈現，不僅突出了視覺焦點，也帶給用戶一種品質感的認知。配合動效的運用，增強了該區域的關注度，是一種展示商品或者內容的不錯方式。

得物（毒）

09.  通過AR科技帶你感受虛擬試穿 

網絡購物存在的問題就是質量和匹配度等，得物（毒）通過AR科技帶你感受虛擬試穿，模擬真實場景中的體驗，打破了靜態選擇的弊端。技術的突破將會帶給用戶更便利的生活體驗，打破常規的固有模式才能帶給用戶更好的使用體驗。

10.  更直觀的設計帶來更人性化的體驗 

想要看一場電影，在選擇影片的時候為了讓用戶更直觀的了解影片內容，做出最快捷的選擇。淘票票將精彩片段作為背景層，影片展示作為前景層，點擊不同的影片背景層就會播放對應的精彩片段。直觀的設計帶給用戶更便利的選擇，減少了抵達目標的操作步驟。 從視覺形式感的角度使得畫面更豐富，空間感更強。相較于單調的平鋪式設計，帶給用戶更好的感官體驗和操作便利。

淘票票

小結 

從感官體驗的角度體驗產品，總結了在 UI設計視覺層面的解決方案，有助于提高 UI 設計師的視覺表現能力。對比相同功能的不同視覺表達，總結優秀的設計呈現方案，希望這個欄目可以帶給你更多幫助！

回到設計沒思路系列，  今天我們講四角構圖！

▽

1、構圖：

首先構圖本身是一切圖文編排困難的良藥，而四角構圖是構圖技巧中的其中一種。

四角的構圖版式最顯著的特征就是將標題內容編排到四個角落

誒！這不是四餅嗎？

而傳統的四角構圖原本是將文字信息有主次的編排到四周，而這種也是目前很常見的一種排版手法， 再將主視覺放置到版式中心，以此滿足平衡穩固的構圖作用。

如果聽不懂沒關系  我們以天官賜福這四個字為示例，將文字拆分放到版式四角，并改變字體與大小，最后將主視覺圖像放到版式中心，就可以得到一個最初的框架形態。

2、排版

當理解了構圖的原理，將文字通過信息分層梳理排版

解讀主標題的文字沿用到配色上，選出綠色和橙黃色，將綠色填充至底色，再將黃色填充至文字色，這樣主題的文字在背景中就會比較醒目。

再放置主視覺圖像，這樣前期的構圖與排版的形態就塑造完成。

3、融合

接下來就是要解決物體融合、塑造質感、視覺分層的后期階段。

我們來看看最終整個海報的設計全過程

▽

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》排版良藥 | 圖文不會排？試試四角構圖

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

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

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

案例實操

說到設計海報，一般需要明確的就是主體，主標題和文本信息，需要根據重要性依次進行刻畫，顯然主體→主標題→信息處理按這三個步驟依次處理一個比較常用的思考步驟，如果沒有處理好前面的，就開始盲目去優化后面的，可能就會使畫面的視覺邏輯出問題。

我們開始實操，這里先將文案整理好，簡單的做個層級劃分。

接著我們去構思整個版式的布局，將大概的信息位置放好，也就是明確它們的主次位置大小關系。

前面說了是用文字“爆”作為主體，那么我們先來處理它，這里需要用到Ai里的效果→扭曲和變換→收縮和膨脹，選擇收縮。

很容易我們就可以做出下面這個效果，而且符合爆的感覺。

然后我們加入英文BOOM，爆的后面放入用粗糙化做的效果，增加疊壓關系。

接下來就是刻畫小信息啦，信息之間要有對比，加上相應的符號搭配，這里為什么信息下面要加上色塊呢，一般這種除了統一之外，如果背景比較復雜的話，加入色塊不會影響識別性。

最后把剩余的信息放到畫面中相應的位置，大小關系處理好。

或許上面黑白識別性不太好，那么我們來配個顏色，加入樣機效果，這個設計就完成啦。

最后總結

本期教程到這里就結束了，做設計需要的三個大步驟記住了嗎，趕緊試著去做一下吧，也希望文章給了你億點點思路，大家一起努力進步！

原文地址：設獵派（公眾號）

作者：設獵派

轉載請注明：學UI網》這三步來做海報設計，思路才清晰?。?！

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

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

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

準則 1.  Timely —— 找準時機，即時反饋

在用戶操作后盡快 / 立即給予反饋是最有效的。即時反饋有助于幫助用戶養成正確的操作習慣，或糾正用戶的不當操作。

如果反饋內容需要較長時間的加載，也可以給用戶設計一些有特點的 / 情感化的加載狀態，緩解用戶等待的不耐煩，又可以傳達一定的品牌調性。

例如：知乎 App 在加載內容的過程中，增加了 IP 形象的動態效果：

準則 2.  Specific —— 具體分析，差異對待

在設計交互反饋時，不僅僅要給出正確或錯誤的判斷結果，同時也應該考慮到用戶的個性化需求，針對不同類型、場景、地區的用戶提供差異性引導和服務。

例如：大眾點評、高德地圖可以根據用戶的位置，在用戶開始使用產品時就推送個性化信息：

準則 3.  Balanced —— 正負反饋，穿插結合

通常來說，正面的反饋會激發用戶的自信等積極情緒，因此我們更習慣使用正面反饋。但是一些不得不使用負面反饋的時候，我們可以在其中穿插一些正面的消息，減少或緩解用戶的因負面反饋帶來的消極情緒。

這就好像是別人跟你說：“ 壞消息是……，但是，這樣做的好處是…… ”，壞消息不可避免，但加上一點轉折，就會讓他人心里稍微舒服一些。

例如：美團單車在你騎完車之后，需要支付費用時提示你可以購買單車套餐，雖然是在勸用戶花錢，但看上去依舊很友善，其中的話術包括：“本次騎行免費”，“當前已是最優價格”：

準則 4.  Instructive —— 提示下步，指引行動

有效的反饋會主動多引導一步，對用戶的下一步行動給出清晰的、正確的、指導性的意見，有助于驅動用戶繼續做出有效操作。

很多 App 在截屏之后都會給出下一步分享的路徑引導：

準則 5.  Emotional —— 情感屬性，引起共鳴

有科學依據證實，人腦會更容易被附帶情緒的信息所吸引。用戶更有可能會注意那些看上去承載了一些情緒的反饋，從而也更有可能改變其行為方式。

例如：雖然只是一個提醒彈窗，QQ 音樂會員到期的續費提醒文案卻經過精心的設計，由各類歌名組成的一句話，每天的到期提醒都不同：

準則 6.  Traceable —— 可被溯源，可供反饋

一些特殊情況下的、有重大意義的反饋可以被追溯到其根本原因，可以提供給用戶進行申訴和詢問的渠道，供用戶進行反饋。

例如：電商平臺和外賣平臺都會在用戶下單或退單之后，提供商品物流的詳細信息，在查看購買的商品的當前狀態時，并可以追溯到商品所在的各個歷史環節：

再比如，高德打車如果發現用戶的行程訂單金額與預估金額差距較大時，會給用戶發短信提示，并給出客服和投訴渠道：

準則 7.  Less is more —— 質量優先，減少數量

在這個信息過載而注意力稀缺的時代，好的反饋在于質量，不在于數量。有時數量越多，反而會對用戶造成不必要的負擔。用戶并不需要給出很多反饋或者記錄生活中一切信息的產品，而是需要能夠幫他們理出頭緒、提出有效解決方案、呈現有用信息的產品。

以上這 7 大準則，來源于我們日常工作中的積累和沉淀，對于設計產品的交互反饋具備較高的指導意義，希望對你有啟發。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》干貨｜交互設計中的「有效反饋」7大準則！

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

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

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