鏈接：https://pan.baidu.com/s/12J-Q0Crq3iB5OXDWmfACrw 提取碼：fagy
原文地址：三個小美工（公眾號）
作者：three
轉載請注明：學UI網》干貨素材 | 講真的，這些素材你真的很需要！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做一個完整C端項目前，從產品思維得理解、需求分析到場景分析，通過以上分析得出結論，進而制定我們的設計目標，把設計目標落地到解決實際的設計問題，內容較多，大家可以根據上述目錄來進行選擇性閱讀。
了解用戶心理：“心理”主要是指用戶的情緒，只有了解用戶的心理狀態，才能知道他們在接觸到或者使用我們的產品時是正面的情緒還是負面的情緒。正面情緒需要我們引導去實現轉化，負面情緒需要我們安撫以避免跳出和口碑的損失。
把控用戶行為：最終目的還是引導用戶行為，讓用戶按照我們的計劃進行產品的交互、操作，從而實現對用戶的有效管控和轉化。例如：上品店慶推出“購物省錢節”的概念，聯合商家推出各種優惠活動，就是抓住用戶在購物時想省錢的心理，通過降價、優惠券等方案讓用戶在選購商品、提交訂單和結算階段都保持高漲的情緒，從而推動用戶最終完成付款。
解決用戶痛點: 在完成上面的分析后，我們最終需要把調研和分析結論落地為設計方案，前提是要關注用戶當前的情緒是負面的還是正面的，如果是負面的情緒，我們可以通過補償、安撫等方案對用戶進行留存。例如：在等待外賣送達時，配送信息頁一般都會有預估時間、位置等信息，讓用戶有一定預期。同時如果遲到時間過長，也會通過準時寶等規則給予用戶優惠券補償，這些都是負面情緒的安慰。
項目思維主要指，我們要具備極強的發現問題、輸出方案、推動落地的能力。這就是設計師的項目思維和推動力，可以保證自己的想法快速落地、推動設計優化并盡快上線。
商業思維是指，拉新：通過產品、運營和營銷策略讓用戶下載產品。留存：讓下載的用戶保持活躍度，留住用戶，便于轉化。轉化：讓用戶按照我們的業務規劃去注冊、分享、下單、付款等動作，一步步帶入我們的圈套，完成關鍵操作。變現：將用戶行為變現，內容產品的活躍度可以帶來廣告營收，電商產品的成交額就是業務收益。
相同點：在實際工作中，設計師和產品經理的目標在本質上是一致的，都是解決用戶的痛點、滿足用戶的需求，為用戶提供體驗更好的產品，并在此基礎之上完成用戶轉化，實現收益。作為一個設計師，我們對產品了解的深度不一定比得過產品經理，但是廣度上你應該要求自己和產品經理保持一致。只要掌握產品的架構、流程和業務的模式、原理即可。
不同點：UI設計師更注重通過用戶體驗來留存用戶，產品經理更多地考慮轉化用戶和變現的途徑。
沖突點：這時就會產生一些沖突和矛盾，有時為達到業績目標，產品經理或其他業務方可能會提出有損用戶體驗的方案或者策略。
想要解決與產品沖突得問題，就要充分調動自己的產品思維，保持習慣性的產品思維，才能始終保持和業務一致的目標。和業務方站在一起，才能找到設計和業務的共同目標，并將業務目標轉化為可執行的設計目標，才能為設計帶來更高的價值。
這里就繞不開這個話題----產品思維。別人眼里的UI設計師，很多人會認為設計師的工作就是設計流程頁面、視覺效果。這些工作看起來只是錦上添花，即使沒有專業的設計師來設計，可能只是流程、控件位置不太合理、樣式和顏色不太好看而已，并不會影響產品的開發和上線。其實，設計師的價值不僅是藝術價值，更重要的是為業務帶來價值。
UI/UX設計師，關鍵在于對用戶場景、對產品細節的敏感度，這也是其他崗位不具備的技能。實際工作中這些細節問題，很容易區分出來專業性的差異，因為UIUX設計師是距離用戶最近的人。我們設計頁面，用戶在頁面上操作和獲取信息。我們設計流程，用戶通過流程完成各自的需求。我們設計的產品流程、頁面，是用戶直接接觸和使用的東西。基于這個原因，設計師對用戶的需求、反饋是最了解和最敏感的，我們可以通過用戶的反饋、操作數據把控用戶的心理狀態和行為方向。無論是在方向上還是從細節出發，挖掘和洞察用戶需求，設計師有明顯的優勢。
所以UI設計師真正的價值就是通過自己對細節和場景的思考，自我驅動，找到設計優化、產品迭代、業務提升的機會點。想要找到這些機會點，你需要培養自己的產品思維、項目思維和商業思維。
01、多與需求方、業務方（產品經理、運營、市場等崗位的同事）溝通，在參加需求評審的時候，深入了解業務和產品的特點、原理。
02、了解產品流程：在接手某項業務或產品時，先利用思維導圖對產品的架構做一次梳理，通過功能結構圖你可以清晰地看到產品應該有的功能。在掌握架構的基礎上，對產品的核心流程再進行一次梳理，包括線上、線下所有的流程節點、體驗接觸點和不同用戶端的流程觸點。
03、多做競品分析，從競品中尋找靈感和產品感。怎么做競品分析具體可查看我的其他文章，競品分析維度的確定。
04、持續不斷地培養自己的思維能力，深入思考、多做歸納總結和分析。在做設計的時候我們也可以讓自己的思維慢下來，多去思考：思考一下為什么做這個需求？對用戶有什么價值？對產品有什么價值？對業務有什么價值？設計、產品、運營應該怎么做才能達成這個目標？我們的做法對業務、對產品有什么影響？設計方案能不能很好地平衡業務和體驗的關系？
01、用戶不知道自己真正想要什么。
02、用戶難以說出自己的真實需求，用戶在闡釋自己的需求時，就會不自覺地粉飾和解釋自己赤裸裸的本質需求。例如：那些刷視頻就能領紅包得產品，但為什么它最近不火了，這類產品的人群，本質需求是：通過刷頁面領紅包，獲取更多的錢，這類人根本不關心內容是什么、內容質量怎么樣，這就造成了內容的觸達效果非常差。
01、了解我們產品的目標用戶群體和現有產品用戶群體，掌握用戶基本信息，分析用戶特征。（Who）用戶是哪些人：性別、年齡、地域分布、學歷收入等。(What) 用戶有什么共性。（Why）為什么選用我們的產品。（Where/When）在什么場景下使用我們的產品。
02、通過了解用戶得到的所有信息，然后創建用戶畫像，得出結論。那么如何創建用戶畫像呢？
001、人物創建：創建一個虛擬的用戶群體中的一員，利用我們上面提到的用戶相關信息，可以給他/她一個插畫風格的照片幫助我們具體化這個用戶的人格和形象。然后列出他/她的基本信息，給他/她定一個社會角色，比如：小王，男，28歲，銷售經理，我們產品的熟練用戶，月收入2萬，學歷本科。
002、分析動機：這個人物用我們的產品想干什么；這個人物對我們產品某個功能使用較多，需求較強的原因是什么，想達成什么樣的個人目標。
可以通過用戶畫像推測用戶的心理特征和行為偏好，積累了以上信息，你就比較容易進行需求的分析和挖掘了，提煉出解決用戶需求的核心的痛點。例如：解決了用戶在特定場景下的某一個核心痛點，滿足了用戶在當前場景下特定的訴求/需求。例如：共享單車產品就是解決了從車站、地鐵站到家、工作單位最后一段距離的出行痛點。例如：地圖軟件解決的是陌生地區找不到路和易違章的痛點。
01、了解人性：做設計就是做人性，只有把握好人性的特點才能更好地滿足用戶心理，進一步引導用戶行為。馬斯洛需求層次理論，人的需求從低到高可分為 5 個層次：我們就可以試著洞察用戶在特定場景下的本質需求到底是什么了。生理需求（呼吸/食物/水）：現代社會其實就是對生存條件的追求；安全需求（避免自己受到傷害）；
社交需求（愛與被愛/社會關系/地位）對情感的需要；尊重需求（被自己認可/被他人認可和尊重）對穩定社會地位的需要；自我實現需求（道德層面/內心層面的追求和滿足）。
所以用戶的本質需求無外乎：生存、金錢、情感、名利、心理滿足這幾個方面。
02、將用戶敘述的需求，轉化為本質需求：比如：有的用戶說，上品商場最近優惠券怎么少了？我都不想去上品買東西了。用戶表意是嫌優惠券少，如果我們草率得出：增加優惠券運營力度的結論太過于表面，其實用戶的本質是嫌商品太貴了，他們的本質需求是省錢，少花錢且買到想要的東西。而這類用戶是對價格極其敏感的用戶，增加優惠券只是其中一個策略，是無法滿足他們根本需求的。根據他們省錢的本質需求，我們可以給他們更多地推薦低端商家，哪怕沒有優惠券，還是能提升一波 GMV。
進而轉化成設計目標為，要通過我們的設計能力，給用戶營造一個很省錢的氛圍，而不是一味地給用戶降價或是發優惠券。規劃更多的秒殺、每日特價、分享領券等活動專區，在設計頁面時增加優惠券、紅包等元素，突出省錢、低價等文案，可以有效地吸引此類用戶，引導他們下單付款。這就是本質需求的應用方法。
工具——KANO 模型問卷調研，主要依據是用戶調研，可以通過定性訪談的方式，對部分用戶進行了解，大概了解用戶對需求的態度；也可以通過定量問卷的方式，通過問卷獲取比較有參考價值的數據信息。不同類型的需求和用戶滿意度之間的關系，將影響用戶滿意度的因素分成五類：
基本型需求：無此功能，用戶滿意度會顯著降低；有此功能，用戶滿意度不會顯著提升。
期望型需求：無此功能，用戶滿意度會降低；有此功能，用戶滿意度會提升。
興奮型需求：無此功能，用戶滿意度不會降低；有此功能，用戶滿意度會有顯著提升。
無差異需求：有無此功能，用戶滿意度都不會有太大變化。
反向型需求：無此功能，不會影響滿意度；但有此功能用戶滿意度會下降。
經過需求分析我們會拿到大量用戶需求的相關信息，在取舍和決策時我們可以使用三個原則 + 一個工具：01、
圍繞本質需求和痛點；關注與業務不相悖的需求；解決影響用戶峰值體驗的問題；在做分析時可以利用 KANO 模型，重點關注模型定位出的基本型、期望型需求，適當關注興奮型和反向型需求。
至此，我們掌握了產品分析的第一步，也就是找到設計的方向和基本依據——用戶需求；下一模塊我們將進入需求分析的第二步——場景分析，來找到設計可以利用的機會點、切入點！
01、任何產品的誕生都是基于用途，牙刷為了刷牙、菜刀為了切菜、汽車為了出行……生產這些產品是為了滿足用戶的需求，而生產產品時需要考慮的因素如外觀、材質、設計細節等則源于用戶場景。
02、互聯網產品其實也是一樣的道理，產品基于用戶的一些需求或者痛點而誕生，基于用戶的使用場景做功能和細節體驗。
站在用戶的立場思考細節：必須首先知道用戶需要什么、喜好什么、討厭什么、不能接受什么，才能進一步改善我們的產品?；谟脩舻哪康?、行為偏好等研究用戶在場景里的行為、情緒，從而深入場景，做出正確的決策。
避免主管的質疑和批判：有的用戶會有各種各樣“奇葩”的反饋，所以我們要多理解用戶的選擇和立場，避免主觀的質疑和批判。
學會聆聽和關注反饋：在日常工作的溝通、對用戶的訪談中，我們可以試著多用心傾聽對方的表達。
01、還原用戶體驗產品的流程（分析的是場景中的線，包括流程線、行為線等。）02、列出用戶與產品、與線下場景有聯系的所有觸點。03、通過這些觸點掌握用戶的操作軌跡和行為特征。04、分析用戶的體驗感受。
01、明確分析對象：最重要的是確定一條明確的流程線，分析的產品某個功能或者某個服務/體驗流程，并非用戶。
02、拆解體驗流程：把分析的流程進行拆分，拆成一個個體驗節點，實際場景設置節點。比如網約車的產品，要根據用戶在線下叫出租車的體驗場景來拆分，可以拆成走到路邊、招手攔車、上車、行程中、支付下車等幾個重要節點，然后根據這些節點來考慮和分析是否有優化或者需要顛覆的地方。
03、創建用戶畫像：主要從用戶的基礎特征、用戶的心理和偏好等信息去做畫像，最后可以形成一個稍稍具體的角色。
04、分析階段：制作表格，把每個節點的信息進行分析推測和記錄。例如下面表格：
橫向：是第二步拆解出來的所有的流程節點。
縱向：用戶與產品的觸點：就是用戶如何操作我們產品，點了哪里、在哪里停留時間較長，這都是通過埋點數據可以看到的。
用戶目標：從用戶的使用數據和用戶訪談中獲取相關的用戶信息，通過用戶的行為和他們表述的信息找到他們的立場、目的和利益點，從而分析他們想要什么。
用戶行為：為了這個目標會怎么做。
結果：看我們的產品頁面信息、流程及功能能不能滿足用戶上述的目的和行為即可。
用戶情緒：用戶的目標和我們觸點是否契合，最終的結果是否能滿足用戶的需求和目的，沒有滿足的時候情緒低落到什么程度，滿足的時候情緒會高漲到什么情況，哪里是最低谷，哪里是最高峰。
05、得出結論：重點要看的是用戶情緒的起伏。找到最低點，看哪些節點影響了用戶的體驗，就是產品的痛點，也是我們的設計發力點和機會點。
同理心模型適合分析我們產品體驗流程中的某個節點或細節功能，不適合進行流程化的分析。包含所看、所聽、所做、感受、所想。
01、明確我們分析的對象是什么：比如：網約車用戶在打車等待接單的環節；比如電商產品確認訂單的環節；這些環節這些環節和節點都有共同的特點，就是集中在有限的一到三個頁面中，用戶的核心操作比較簡單。
02、首先把圖表畫在白板上，用便利貼寫出所看、所聽、所做、感受、所想，五個維度的想法，
03、然后進行集體討論，把這些便利貼提煉總結，歸納出重點信息，通過這種方式可以避免一個人悶頭思考的局限性，也可以保證思考的全面性。
04、接下來對這個圖進行行為總結，找到用戶行為的原因，分析用戶的偏好和習慣。
05、最后通過用戶情緒和感受，分析我們產品體驗的問題。
親切：通過情感化設計，營造親切的氛圍，拉近與用戶的距離。比如：百度地圖可以在導航設置里將導航車標設置成自己的汽車品牌，當看到自己車的車標在地圖上移動，用戶就會感覺非常親切和熟悉。
安全：讓用戶感到人身、隱私的安全。比如：嗶哩嗶哩在登錄界面輸入密碼時的二次元形象會有捂眼睛的動作。
互動：我們的產品流程和功能的實現需要用戶的參與。比如：用戶刷新網頁時，由于網速較慢、需要較多的加載時間，在加載的過程中，有很多網站會提供一些互動小游戲。用戶參與進來了，整體等待的時間也就顯得沒那么漫長，這種互動既可以緩解用戶的焦慮情緒，又能有效防止用戶跳出。
驚喜：人們對一件事物的判斷往往會基于最初的信息。所以如果我們在提供最初的信息時就給予用戶更好的結果，一定可以給用戶帶來驚喜?；ㄐ∝i在打車時先出現原價，然后彈出優惠券動效，價格數字也嘩啦嘩啦往下降，這個不斷下降的數字就利用了錨定效應，給予用戶一定的驚喜。
關懷：考慮用戶的使用場景，在場景下給予用戶細節上的功能推薦或操作建議。比如：美團外賣，在天氣惡劣時會提前提醒用戶：為避免延誤用餐時間，請提前下單。比如：滴滴出行，在用戶經常通勤的時間段也會自動提示：由常用起點至常用終點的路線派車大概需要XX分鐘，點擊即可叫車
預期：難以避免需要等待、甚至反復操作的情況，此時為避免用戶跳出，你需要在細節上做好預期管理。比如：我們在用支付寶還信用卡時，支付完成后我們能看到已提交——待銀行處理等環節的流程提示。比如：我們在填寫一個需要補充大量信息才能注冊的網站賬號時，網站頂部一般會有注冊步驟的導航。當然以上只是最基礎的預期管理，如果你的文案能更俏皮一點，視覺效果上增加一些 IP 、甚至動畫就更好了。
反饋：對用戶的操作及時給予回應，尤其是異常場景，需要使用用戶更容易接受的方式給予反饋。
情懷：能給用戶帶來情感上的力量。
品牌：在產品的配色、排版、控件樣式上體現品牌的統一調性。在產品的體驗流程中貫穿品牌的價值。比如：在京東自營的店鋪購物、使用京東物流的產品會標明“京東物流”，在確認訂單頁也有“京準達”的功能選項，京東通過這種方式，將自營物流、快速到達的品牌特性一一表達。
價值：實現更大的社會價值，從而提升企業形象。比如：商城的包裝箱、騰訊的 404 網頁上都能看到一些被拐兒童的尋人啟事，因為這些網頁和包裝材料的傳播力極大、傳播范圍極廣，可以帶來良好的社會公益效益。
故事版：體驗地圖和同理心模型，可以分別從流程到節點對場景進行分析，那么這些場景如何歸納和表達，以供大家決策和評審呢？需要站在用戶需求的角度講故事。故事板這種漫畫/故事的形式易于被受眾接受，在闡釋需求、說明方案時具有更強的親和力和說服力，
描述過程：創建的虛擬人物；明確關鍵節點；找到虛擬人物在整個故事中所有行為和目的。
產品思維、需求分析、場景分析這三部分是產品設計三個基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。接下來我們要做的就是明確設計目標。
01、一接到需求就馬上打開軟件開始往上鋪圖，遇到被卡住的情況，沒有辦法繼續做下去，總在糾結。
02、有時候產品經理對某個需求也提不出很明確的方向，我們設計的時候能搞出幾個方向的方案，但是不知道如何決策。
03、我們在著手設計的時候就沒有想好我們輸出這個設計圖的目的是什么，比如需要促進產品什么轉化、解決用戶什么痛點、解決體驗上哪些問題？
04、我們做這些工作的目的是XXX，只有達到這個目標我們做了這么多工作才有意義、有價值。
05、在日常工作中你也會發現，產品設計不等于純創意設計，產品設計的關鍵價值在于發現和解決問題，通過對體驗流程和頁面細節的處理/優化，得到我們期望的用戶反饋和業務數據。
01、設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標；
02、然后是將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標；
03、上線后，及時收集和整理設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標；
04、然后規劃下一步的迭代方向。
01、明確用戶目標和產品目標：設計目標的根本是產品目標，產品目標的根本來是業務目標和用戶目標，也就是業務的規劃和用戶的需求、痛點。因此在實際操作中，第一步我們要先明確我們的產品目標是什么，產品目標大多和用戶的轉化、功能的使用率有關，我們朝著這些方向分析一般不會有較大偏差。
02、通過上面目標找到與之相關的關鍵用戶操作：比如點擊加購按鈕、比如完成付款驗證操作、比如填寫全部表單信息。
03、將關鍵的用戶操作轉化成可以衡量的數據指標：將這些關鍵的用戶操作轉化為可以衡量的數據指標，比如加購 BTN 的點擊量、訂單提交后的付款成功率、比如表單信息的完整率。因此設計目標必須是可量化的，產品使用數據和業務數據，比如點擊量、退出率、取消率、跳出率等，才能在設計方案上線后正確評估我們的方案有沒有完成設計目標。
01、先去定位設計難點，找到設計重點，再著手設計。完成主流程后再去解決小問題。
02、接著列出流程或需求點，對設計方案有大致框架；
03、然后針對流程中每個節點列舉可能會出現的問題把精力放在影響設計目標和用戶核心體驗的重點問題上。
精益創業模式里有一個 MVP 的概念，我們現在產品研發中的敏捷模式也是源于這個概念。簡單來講，就是用較小的成本先做出一個產品，然后快速上線，驗證業務模式、產品策略和用戶體驗等問題，然后小版本快速迭代，進行優化。
參考資料：
《用戶體驗干貨筆記》
《用戶體驗要素》
《騰訊產品法》
《交互設計知識體系》
C端設計前的準備工作，其中重點在于學會需求分析和場景分析。具體掌握需求分析的核心方法步驟，和場景分析中用到的三個工具用戶體驗地圖、同理心模型、情感化設計、和故事版。需求分析、場景分析是產品設計的基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。
接下來我們要做的就是明確設計目標，設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標，然后將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標，在產品上線后，及時收集和整理和設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標，然后規劃下一步的迭代方向。以上內容，感謝觀看。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們生活在一個信息大爆炸的數據化時代，隨著網絡科技的飛速發展，產品和用戶之間的互動也日趨復雜，新功能不斷涌現，帶來便利的同時也導致用戶對功能的認知摩擦日益加劇。在這種情況下，人們對交互設計的需求就越來越大，市場對交互設計師的需求也越來越多。許多公司都注意到交互設計對品牌創建、用戶滿意度以及回頭率等方面的影響。那么，什么是交互？交互設計應該做什么？希望今天這篇文章，能夠加強你對交互的理解。
交互就是與另一個人或者物進行交流互動，比如你說話或按動鼠標，對方給你反饋，這就是交互。對于設計師們來講，交互多指用戶與計算機、手機等產品進行的交互。
交互設計是一個頁面或者一個界面的內容規劃，例如哪里放圖片，哪里放按鈕，哪里出現文字；或者說是一個龐大網站以及產品的整體邏輯梳理，例如如何安排信息層級，如何讓用戶更輕松地找到自己想要了解的信息，如何讓整個網站或產品更加合理、有效地運轉。
一個城市有合理的規劃交通才會便利，城市里面的人才會覺得更加舒適，而一個合理的交互設計也直接影響著一個網站、一個產品甚至一個品牌。
視覺設計是感性的，更注重一切表象的東西，比如顏色、版式、形狀、調性等，視覺設計最終的成品是視覺的效果圖設計稿。
交互設計相對來說更加理性，交互設計更加注重用戶是誰，通過需求分析得出問題、解決問題，交互設計的最終成品是原型圖。
看過了文字解釋，再讓我們一起來看看生活中無處不在的交互設計。
疊貓貓、蓋樓、星秀貓……每年雙11，天貓都會創新活動，激發用戶對雙11購物節的期待，營造蓄勢。
今年的雙11的主題為喵糖總動員，用戶通過組隊一起做任務賺喵糖，通過擲骰子的方式獲取糖果數，占領格子，擊敗對手。獲取喵糖的過程中，營銷或引流設置無處不在。除了做每日簽到獎勵的簡單任務外，最簡單的方式就是用15秒的時間去瀏覽平臺推送給你的主會場、各大分會場、各細分品類、各個商家店鋪等頁面。通過這樣的任務設計，可以引導用戶瀏覽會場店鋪或各品類商品，最大程度地完成各個淘寶店鋪的曝光需求。
天貓雙11-喵糖總動員活動頁面
新冠疫情還在持續蔓延，飛豬App貼心的在行程頁面，添加了防疫工具引導欄，通過點擊按鈕，可跳轉至支付寶中行程碼、核酸預約等界面，為用戶出行提供便捷的準備工作。
用戶在滑動頁面時該導航欄會被隱藏，靜態時則顯示兩個應用，點擊展開才能查看更多。設計采用浮層式引導，提供便利的同時，且不會對用戶產生干擾。
飛豬App界面
一切交互設計所要達到的效果就是形成良好的用戶體驗，讓用戶在使用界面時更方便找到自己感興趣的東西。
通過地圖及定位，通過氣泡及icon的區別，把附近的美食等進行排名，讓用戶更快知道自己的距離。還設置了點擊卡片展示店鋪信息同時支持查詢路線等功能。
美團App界面
“優秀的設計是考慮周到且不放過每個細節”。往往在那些不易被察覺的細微之處，傾注了設計師的諸多巧思與心血，嗶哩嗶哩在設計中做了以下一個有趣的小細節。
在賬號登陸頁面，當我們輸入賬號或者手機號的時候，頁面插畫中的22和33是睜大眼睛的，而當我們輸入密碼或者驗證碼的時候，他們則用手捂住了眼睛。這個有趣的設計生動地傳遞了App對用戶隱私的尊重與保護。
嗶哩嗶哩App界面
當你使用百度搜索物品，查看圖片時，左右滑動即可切換下一張圖片，上劃即可關閉圖片，這樣的操作手勢，更加方便快捷。
在查看物品圖片時，下方還會出現商品推薦購買鏈接，仿佛“一站式”購物的貼心服務。
百度App界面
交互設計的核心目的是信息的傳遞，無論如何設計交互圖、如何設計交互流程，我們要思考的核心和準則是如何把想要傳遞給用戶的信息以最簡單、最容易的方式讓客戶接收，反之用戶也能用最簡單的方式找到自己想要的信息。
這些信息包括內容、按鈕、文字、圖片等一切信息的載體。我們要明白在進行交互設計時的前提是如何去梳理信息更好地傳遞。
那么，如何才能讓信息更好地進行傳遞？我們要搞明白信息傳遞時需要營造什么樣的氛圍，哪些信息元素需要突出，目標用戶是誰，根據這些才能以一個正確的方向有邏輯地進行交互設計，而這一切的最終結果就是實現一個良好的用戶體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
w
大型企業由于員工上萬，所以對于人才管理的系統基本都是購買國外垂直類的頂尖系統，而擁有5w+員工的58，則是采購的國外的WORKDAY系統，但是，由于服務器在國外，所以對于好多操作請求都非常的耗時間，最重要的一點是，關于人才數據這么重要的核心內容，也在人家手里，萬一哪天國際形勢非常嚴峻了，呸，希望不會有這么一天，所以我們要像鄧稼先老先生研發原子彈一樣，核心數據我們要掌握在自己手中。
這里通過雙鉆模型來簡單闡述整個項目的流程
f
如果你想做好一款B端產品，首先要了解他的業務形態，因為b端客戶不像c端用戶那么單一，在整個業務鏈條里，每個角色負責不一樣的模塊，所以我們面臨的問題不是單一的用戶痛點，而是怎么把整個鏈條做的更通順便捷，然而一款強大的b端系統的復雜度遠遠是你不可想象的，畢竟人家國外頂尖系統有上萬人在研究呢。所以我們目前的目標就是先解決58的個性化的人力資源管理。
· 深入業務
首先，我們對業務進行專家訪談，向專家了解業務，對基礎認知進行了桌面調研，對用戶角色進行焦點小組訪談，整理出58內的HR業務形態及分工模型。
· 競品研究
設計師與業務一起使用競品，由于人力資源管理系統是一款專業類的垂直軟件，市場上可參考的競品其實不多，即便是可以找到的資料，也只是寥寥的幾個界面，于是我們充當客戶去找資料，最后搜集了國外3款、國內2款同類可參考的軟件，并通過不停的與業務碰撞，探索適合58的模式。
f
· 與業務握手
通過前期的調研，我們了解到業務中銷售崗位的入職次數是最高的，所以業務痛點也是最集中的，所以我們在銷售入職日探訪了58北京分公司，實地觀察入職的各個環節，以及每個角色的分工及權限，并在當晚與他們進行了一次深度的訪談，讓我們的設計定義更加聚焦。
· 確定設計目標
通過前期的用戶角色分類調研，以及對痛點的歸類分析，我們得出了兩個關鍵需求：線上化與自動化、操作模式本土化。對于如此龐大的系統，如果按功能去梳理，那是很不現實的，怎么能更快速又能更直觀呢？
轉變思維，從業務角度轉為服務角度。我們服務的是業務，業務服務的是員工，然后系統都是圍繞著員工在職場的各個環節來解決問題的，所以我們圍繞著員工繪制了職業生命周期全景圖。
從圖中可以看出各個角色的工作及配合方式、工作效率及提升空間、各環節各角色的滿意度及可優化的方向，再通過對任務節點、交棒時刻、過程體驗的梳理優化，最后達到一個最終的理想狀態。
w
整個功能流程梳理下來后，系統頁面已經預估到了400+，而我們的排期倒推下來只有8個月的時間，如果按正常的設計流程“全部模塊業務需求→系統信息架構設計/修正→各模塊交互設計修正”來做的話，黃花菜都涼了，那怎么在緊張的排期內快速輸出還不會出錯呢？
·利用MVP思維，拆解最小業務單元
通過與業務、產品討論，我們選用具有業務閉環屬性，最具業務代表性的最小業務單元，并做快速的驗證，通過不斷探索，實現現實中的設計流程。
再通過對頁面的解離，抽象出三大龍骨頁面類型，再配合規范、控件組成系統的血肉，最后達到了27倍的產出效率，我們讓不可能完成的任務提前完成了。
·情感化探索
B端系統大家統一的認知就是注重功能，不要用花里胡哨的東西來影響操作，但是從競品分析中得知，其實隨著b端c端化，b端的設計師已經在嘗試加入一些插畫元素，所以怎么在不影響操作的前提下，又能讓員工感受到溫暖呢？
服務鏈條上的觸點探索
以我們的服務主體員工為目標，員工與企業的第一個接觸點是在接收offer的時候，這是傳遞企業文化、情感的很好的契機，所以我們優化了在這個觸點下的方式，強化接offer的神圣時刻，并通過游戲化的方式來引導員工填寫資料、查看入職引導。
系統內的情感體系搭建
我們定義了系統的人物角色，讓她更飽滿更有故事性，并以一個專屬客服的角色，落地在系統中的特殊場景下，如個性化首頁、開屏引導、功能引導、空頁面、及身份卡片等模塊中。
w
為了更好的測試，我們的業務方已經駐扎在了項目組里，采用與舊系統并行的方式，也就是一套數據同時錄入兩個系統，來驗證新系統的穩定性及合理性。與此同時，交互與設計同學也是分批次的提交走查報告，提升整體的設計還原度，終于在整個項目組的不懈努力下，新系統目前已成功上線。
w
原文地址：58UXD（公眾號）
作者：環鐵藝術家
轉載請注明：學UI網》項目總結｜企業級管理系統實戰
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
「雅各布定律」是由雅各布·尼爾森（ Jakob Nielsen）提出的一條關于產品可用性的定律。沒錯，這里的雅各布·尼爾森就是那個提出「尼爾森十大原則」的尼爾森，也是我常常在文中提到的UX研究咨詢公司NN/g（尼爾森諾曼集團）的創始人之一。
1999年雅各布·尼爾森發布了一篇名為《界面標準會扼殺設計創造力嗎（Do Interface Standards Stifle Design Creativity）》的文章。在文中，尼爾森講述了他與甲方一同設計某個電商網站的經歷。
在設計該電商網站商品導航方案時，方案一是 采用絕大多數用戶長期在其他網站所接觸的導航方式，方案二是根據甲方對自身產品線的看法構建的一套較為新穎的導航方式（具體方案形式，尼爾森在文中沒有描述）。
尼爾森分別對兩個方案進行了可用性測試，結果是：當用戶使用方案一導航時，導航到目標商品的成功率為80%，而方案二的成功率僅為9%。
雅各布·尼爾森在文中引述這個例子，是為了闡明一則觀點： 用戶將大部分時間花在其他產品上（這里的“其他產品”放在當下這個時代，我認為就是 擁有巨量用戶的頭部產品）。因為用戶花費大量的時間在這些產品上，自然會被這些產品培養出一定的用戶習慣。
如果你想提升產品的可用性，你要做的事情就是與其他產品保持 一致性——這就是 「雅各布定律」。尼爾森認為 一致性是支撐產品可用性的最重要條件之一。并且他將這些應該保持的一致性稱為「 設計標準規則（Rules for Design Standards）」。
那么當下的產品都遵守著哪些「設計標準規則」呢？
實際上，遵循設計標準規則就是遵循用戶的心理模型和行為模型。我依次從宏觀到細節梳理一下，當下的產品設計普遍都存在哪些設計標準規則。
2.1 一致的產品模型
耍家任職于一家電商公司，我司的產品在主業務線（銷售商品線）上，從精準搜索或商品分發，到商品詳情、加購、生成訂單、付款、返回結果，這一套基本的電商模式框架，是一定要符合大部分用戶的行為模型和操作習慣的。
說白了，國內的電商巨頭無非就那幾家，用戶每天花費大量的時間在這些產品上，早已經被培養出了非常深刻的行為習慣，如果我們在主要盈利業務上去進行創新，自然是要承受收益風險的。
這一點不僅是我司會考慮到的問題，國內大部分的電商產品，也都是遵循著這一主流電商產品模型。
而在一些自身產品特有的功能、任務流中，我們就大可以進行產品模型的創新。那是什么讓用戶在不一樣的產品模型中，依然能夠靈活自如地上手操作一些功能呢？
那就要說到交互示能了。
2.2 一致的交互示能
當用戶脫離了熟悉的產品模型，卻依然能夠上手一些功能，是因為他們從其他產品中早已學習到了一些基本的交互示能。
例如文本中高亮帶下劃線的文字或懸浮有陰影的卡片也許可以點擊，帶有紅色徽標的功能也許比較重要或需要用戶查看等等。
當自身的產品交互在示能傳達上和其他產品不一致時，就很容易引起用戶在操作與體驗上的疑惑。
2.3 一致的頁面結構
還是以我比較熟悉的電商行業來舉例。我們可以看到，國內大大小小的電商產品，除去自身功能與GUI的特性，詳情頁頁面結構基本上都是這樣：
因為頁面結構對用戶的影響比交互示能更大，一致的頁面結構、功能排版可以讓用戶極快地熟悉并操作產品。也許你會對此嗤之以鼻？認為這是給不去創新尋找借口？
然而這么做的知名產品卻不在少數。2017年 Youtube 改版，保持了絕大多數頁面結構，對于無法適應的用戶，允許他們切換回舊版；前不久更新的 iOS15，Safari 將地址欄移動至底部，卻也允許用戶自由切換地址欄位置。
保持一致的頁面結構并不是要產品設計完全摒棄功能排版上的創新，而是在創新時也要 考慮到用戶的學習與適應成本。
2.4 一致的圖形認知
落實到具體的UI上，保持與其他產品一致的圖形認知，會更易于用戶理解。但圖形認知不僅僅只是告訴用戶：三個圓點的icon代表著“更多”、叉代表著“關閉”…更加符合用戶認知的圖形，甚至可以輔助到業務目標。
墨跡天氣之前做過一個A/B測試，希望通過修改分享圖標樣式來刺激用戶分享行為。分別投入了3個試驗版本和1個原始版本。
隨著市場上的產品增多，視覺圖形的使用場景越來越繁雜，當我們無法確定哪一些圖形更加符合自身產品用戶認知的時候，也可以像墨跡天氣這樣進行數據驗證。
雖然墨跡天氣并沒有再進一步分析為何方案3的圖標能夠勝出（我猜測是否與iOS原生應用培養的用戶認知有關？），但我們能夠確定的是，在沒有任何文字提示的前提下，有更多墨跡天氣的用戶能夠理解到方案3中圖形所傳達的“分享”操作的含義。
如果再一次被問到「如何看待當下產品設計同質化嚴重」的問題，我想我應該會這么回答。
首先要分析面試官所謂的“同質化”指的是哪一個方面，是大方面的產品、功能、交互同質化，還是具體落實到UI設計師身上的視覺、風格、元素同質化。
如果面試官是詢問對產品、功能同質化的看法，那大可以闡述「雅各布定律」。因為遵循其他絕大多數產品對用戶培養的習慣來進行產品設計，可以顯著提升產品可用性，降低用戶學習成本。
并且很可能你的產品可用性與業務目標、商業價值掛鉤，那更應該保持這種一致性，不應該用商業的風險來為產品的創新買單。
而落實到視覺層面，我認為遵循設計標準規則，實際并不會影響到設計師對GUI的創新。例如我們知道很多競品的案例：MacOS 與 Windows 、 WPS 與 Microsoft Office 、 iOS 與 Android ，為了減輕用戶的學習成本，它們在產品設計、交互設計上存在著許多一致性，然而這并不會干擾產品在GUI層面的表現，用戶依然能夠從視覺層面區分這些產品。
所以作為UI設計師，大可以向面試官表達自己在GUI層面的考慮與創新。一致性不可怕，同質化也不可怕，可怕的是脫離可用性去談創新以及完全為了一致性而失去創新能力的兩個極端。
原文地址：UCD耍家（公眾號）
作者：Howiet
轉載請注明：學UI網》用「雅各布定律」解答一道面試題 | UI&UE實用方法論
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
輕質感在 UI 設計場景中的運用近些年比較明顯，以磨砂效果為代表的無論是在圖標設計還是界面表現上面都較為常見，特別是在金剛區的圖標設計上面。
喜馬拉雅 App 首頁金剛區圖標結合磨砂效果呈現，材質感和舒適度都較為突出。實現難度也比較小，通過 Sketch 軟件的背景模糊很容易實現。突出業務以微動效的形式表達，這也是較為常見的差異化設計解決方案之一。
不同用戶的操作習慣和感官標準各不相同，越來越多的產品為了滿足用戶的不同喜好，設計多種模式進行設置切換。最早的就是主題皮膚，逐步延展到更多的功能模塊中，比如音樂播放頁的布局設置。
MOO 音樂為用戶提供了以專輯封面和背景大圖來進行播放頁的模式設置，用戶可以根據自己的喜好進行設置。在進行 UI 設計的時候無法判斷用戶的唯一喜好，多種模式的自定義設置更能帶給用戶良好的體驗。
隨著用戶喜好的變化，自定義模式可以滿足各自不同的需求，網易云音樂推出了獨一無二的個性化首頁定制設計。用戶可以通過預設的默認模式、歌單模式、視頻模式進行選擇，為了方便用戶判斷定制后的效果，可以通過“功能說明”觀看預設后的樣式，直觀的展示提高用戶的判斷體驗。
自定義模式打破了千篇一律的設計，根據用戶的喜好呈現內容，提高了用戶粘性和使用體驗。
突然有一天在使用自如 App 的時候發現了這個隱藏的“彩蛋”，模擬裸眼 3D 效果的呈現方式在 Banner 上面，是一次全新的嘗試。通過借助移動設備上的傳感器等將 2D 影像轉化為景深效果，以呈現出不用 3D 眼鏡就可看到的 3D 效果。
自如
微動效在產品設計中的運用已經非常普及，特別是在圖標中的運用，既能提高圖標的關注度，也能體現圖標的差異化。就像一個掃一掃的功能圖標，加上簡單的動效呈現，提高了場景代入感。
將現實中的掃描動作運用到圖標動效的表達上面，既增加了該功能的關注度，也能讓主題表達更清晰。
引導頁是 UI 設計中較為普遍的存在，而動效的引導和視頻形式的引導相較于靜態圖文形式來說，更能吸引用戶的關注度。特別是隨著 C4D 等三維軟件的普及，結合立體感和動效形式形成視頻引導，也是一種全新的體驗。
對于移動端來說，隨著大屏手機的普及，手勢操作舒適區的研究至關重要。底部操作范圍算是手勢的最佳區域之一，充分的利用好有利的位置進行更多功能的設計，提高功能的曝光度。
將一些重點功能通過懸浮層的形式設計在底部，隨著交互的變化進行隱藏和顯示，也是一種非常不錯的設計解決方案。比如平安口袋銀行將我的余額、積分兌換、簽到、抽獎、領取紅包等設計在底部標簽欄之上，通過懸浮層的形式呈現，讓這些原本隱藏的功能得到了曝光，增加了用戶的關注度。
平安口袋銀行
頂部導航欄通常是提示當前頁面的位置，對于首頁來說一般會設計搜索、品牌曝光、功能操作、當前位置提示等內容。也有一些直接展示 Banner 圖，隱藏導航的存在。
一些產品想要弱化活動 Banner 的空間占比，除了縮小 Banner 高度尺寸以外，最近也發現了一種新的設計解決方案。安居客將活動主題設計到導航位置，單擊和下拉刷新到一定程度都會喚起活動詳情。該設計解決方案不僅充分利用了導航位置，在達到曝光度的同時也不會過度占用首頁版面，合理的運用了有限的資源。
很多產品都會涉及到會員中心和會員等級區分，不同的等級如何在設計上面體現出差異，除了圖標的區分以外，背景的差異也是一個設計方向。
自如通過不同漸變色的過度來體現會員等級的差異，在滑動預覽的時候 UI 界面也會隨著色彩的過度發生變化，視覺效果非常突出。色彩的變化過度自然，動效的轉場伴隨著內容的更換，直觀的體現了會員等級的權益區分。
自如
個人中心的設計對于很多產品來說都比較常規，隨著感官體驗的升級，個人中心設計的差異也有待深入思考。而場景化的情感表達是提高個人中心設計差異的方向之一，結合插畫和微動效的表達較為普遍。
自如的個人中心除了以場景插畫的形式來提升情感化體驗以外，晝夜變化采用了不同的插畫場景來表現，代入感非常到位。場景插畫還融合了微動效，微妙的變化提高了產品的精細化設計，增強了產品的體驗感。
自如
原文地址：黑馬家族（公眾號）
交互手勢在移動端設計場景中至關重要，手勢的變化和內容的聯動關系，決定了是否可以獲得更高的用戶體驗。 比如抖音的短視頻播放設計中，進度條拖動過程中除了時間數字變化以外，數字的位置會隨著手勢的方向位移。聯動效果的設計感官體驗明顯，內容傳播的關注度更強。
抖音
以真實場景模擬設計表現，在 UI 設計中比較常用，帶給用戶更強的場景代入感。 比如千聊 App 首頁的免費聽直播欄目，直播預告的時間切換就像頻道調頻一樣，切換到自己感興趣的內容。自然流暢的動效滑動，兩條點綴的紅色線條，把頻道切換的場景代入感體現給用戶，帶來新穎的感官體驗。
千聊
頂部內容的分類切換較為常見，特別是電商產品中。一般體現點擊和默認通常有字體大小區分、顏色深淺區分、下劃線區分、圖形裝飾區分等。 除此以外也有下劃線的變異用法，通過角標線段來體現差異。通常是右下角位置，伴隨著動效表達。比如京東 App 首頁，聯想到京東吉祥物，也有一種品牌呼應的感覺。
京東
通過設計還原真實場景，帶給用戶更強的代入感，從陌生轉換到熟悉的場景觸感。 高德地圖通過模擬真實的道路狀況，呈現出更加真實的行車引導，就像自己駕駛的車輛行走在手機屏幕上一樣。真實感的路況引導增加了駕駛的代入感，降低了復雜路口選錯方向的可能性，從視覺感上面也提高了感官體驗。
好的產品體驗，就是在無意間帶給用戶驚喜。在小長假期間，自駕游沿途經過不一樣的城市地點時，會彈出“歡迎到來”的點亮提示，第一次看到還有種驚喜感，算是一種旅行足跡的記錄。 在這個彈窗廣告滿天飛的互聯網環境中，能把這種驚喜帶給用戶才能抓住用戶的黏性，通過情感化的設計提升用戶對于產品的認可度。
大家經常使用下拉刷新這個功能，而且在該功能上的設計探索已經呈現出非常多的案例，而下滑到底部之后的設計探索卻被設計師所忽略。 在支付寶的首頁中，下滑到底部之后進行了新的設計探索。繼續上滑將會解鎖一項新玩法，以游戲化的設計帶給用戶新的探索體驗，也許這一嘗試將會帶來頁面底部新的挖掘點。這個新的挖掘點會像下拉刷新一樣，在底層功能需求的基礎上被深度開發，呈現出更多營銷玩法。
在列表式設計中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見。而大部分的列表設計中都沒有探索過右滑交互，除非是右滑返回或者退出等操作。 在小宇宙 App 的訂閱欄目中，對于關注的內容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運用了左右滑動的手勢交互，不僅操作便利也帶給用戶不一樣的使用體驗。
小宇宙
同樣的東西放在不同的環境中，通過不一樣的展示形式，帶來的品質感也是相差甚遠。就像放進櫥窗的飾品或者展品，給人的品質感就會更高。 得物（毒）在購買欄目將精選推薦、福利專區、潮流榜單、補貼專區等內容，通過類似于玻璃罩的展示模型來呈現，不僅突出了視覺焦點，也帶給用戶一種品質感的認知。配合動效的運用，增強了該區域的關注度，是一種展示商品或者內容的不錯方式。
得物（毒）
網絡購物存在的問題就是質量和匹配度等，得物（毒）通過AR科技帶你感受虛擬試穿，模擬真實場景中的體驗，打破了靜態選擇的弊端。技術的突破將會帶給用戶更便利的生活體驗，打破常規的固有模式才能帶給用戶更好的使用體驗。
想要看一場電影，在選擇影片的時候為了讓用戶更直觀的了解影片內容，做出最快捷的選擇。淘票票將精彩片段作為背景層，影片展示作為前景層，點擊不同的影片背景層就會播放對應的精彩片段。直觀的設計帶給用戶更便利的選擇，減少了抵達目標的操作步驟。 從視覺形式感的角度使得畫面更豐富，空間感更強。相較于單調的平鋪式設計，帶給用戶更好的感官體驗和操作便利。
淘票票
從感官體驗的角度體驗產品，總結了在 UI設計視覺層面的解決方案，有助于提高 UI 設計師的視覺表現能力。對比相同功能的不同視覺表達，總結優秀的設計呈現方案，希望這個欄目可以帶給你更多幫助！
原文地址：黑馬家族（公眾號）
回到設計沒思路系列， 今天我們講四角構圖！
▽
![[調整輸出圖像大小]](https://imgs.xueui.cn/wp-content/uploads/2021/10/ezgif-2-4f19b8335630.gif)
首先構圖本身是一切圖文編排困難的良藥，而四角構圖是構圖技巧中的其中一種。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/10/ezgif-2-1ad76182ed81.gif)
四角的構圖版式最顯著的特征就是將標題內容編排到四個角落
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/10/ezgif-2-f545c07246da.gif)
誒！這不是四餅嗎？
而傳統的四角構圖原本是將文字信息有主次的編排到四周，而這種也是目前很常見的一種排版手法， 再將主視覺放置到版式中心，以此滿足平衡穩固的構圖作用。
如果聽不懂沒關系 我們以天官賜福這四個字為示例，將文字拆分放到版式四角，并改變字體與大小，最后將主視覺圖像放到版式中心，就可以得到一個最初的框架形態。
當理解了構圖的原理，將文字通過信息分層梳理排版
解讀主標題的文字沿用到配色上，選出綠色和橙黃色，將綠色填充至底色，再將黃色填充至文字色，這樣主題的文字在背景中就會比較醒目。
再放置主視覺圖像，這樣前期的構圖與排版的形態就塑造完成。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/10/ezgif-2-7f3f3696e24a.gif)
接下來就是要解決物體融合、塑造質感、視覺分層的后期階段。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/10/ezgif-2-60b92310b0e8.gif)
我們來看看最終整個海報的設計全過程
▽
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/10/ezgif-2-15f7205d22c2.gif)
原文地址：修先森撩設計（公眾號）
作者：修先森
轉載請注明：學UI網》排版良藥 | 圖文不會排？試試四角構圖
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
說到設計海報，一般需要明確的就是主體，主標題和文本信息，需要根據重要性依次進行刻畫，顯然主體→主標題→信息處理按這三個步驟依次處理一個比較常用的思考步驟，如果沒有處理好前面的，就開始盲目去優化后面的，可能就會使畫面的視覺邏輯出問題。
我們開始實操，這里先將文案整理好，簡單的做個層級劃分。
接著我們去構思整個版式的布局，將大概的信息位置放好，也就是明確它們的主次位置大小關系。
前面說了是用文字“爆”作為主體，那么我們先來處理它，這里需要用到Ai里的效果→扭曲和變換→收縮和膨脹，選擇收縮。
很容易我們就可以做出下面這個效果，而且符合爆的感覺。
然后我們加入英文BOOM，爆的后面放入用粗糙化做的效果，增加疊壓關系。
接下來就是刻畫小信息啦，信息之間要有對比，加上相應的符號搭配，這里為什么信息下面要加上色塊呢，一般這種除了統一之外，如果背景比較復雜的話，加入色塊不會影響識別性。
最后把剩余的信息放到畫面中相應的位置，大小關系處理好。
或許上面黑白識別性不太好，那么我們來配個顏色，加入樣機效果，這個設計就完成啦。
最后總結
本期教程到這里就結束了，做設計需要的三個大步驟記住了嗎，趕緊試著去做一下吧，也希望文章給了你億點點思路，大家一起努力進步！
原文地址：設獵派（公眾號）
作者：設獵派
轉載請注明：學UI網》這三步來做海報設計，思路才清晰?。?！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
CEGC在中國已經有20年的歷史，1983年首次在英國成立，2000年進入中國，而福特汽車進駐中國是在1995年，因此CEGC幾乎是和福特品牌一路同行至今，有著久遠的歷史足跡。
全新標識CEGC分別代表了四個形象象征：
C：陸地 — 雪豹 — 勇敢的精神
E：天空 — 斑頭雁 — 自由而博大的胸懷
G：水 — 江豚 — 生命的起源
C：萬物的尺度 — 人 — 深邃的愛
新的品牌形象，從定位、結構，以及LOGO的色彩進行了全新的設計，從不同空間構建品牌價值觀念。
福特公益多年來為改善地球環境做出努力，保護生態平衡，CEGC的內涵則是代表了區域性的生態、生物多樣化繁榮發展。
做任何一個公益項目，不是隨著一次評選活動結束而結束，環保項目應當是可持續的走下去，走得更遠。這次的品牌升級將助力福特汽車環保獎朝著更嶄新的階段邁進。
CEGC的設計理念，最終可以表達為，信息傳達與藝術的完美統一。
讓品牌有最清晰的識別力，代表生物多樣性。
CEGC不僅是視覺上的感受，希望以此也能帶來行動上的力量，讓設計的意義變的最大化，最終為品牌帶來最優的價值。
新的定位：
支持系統性變革、支持優秀民間環保力量可持續發展、保護生態資源與物種多樣性，在新的升級中，重練品牌的核心價值。
為公益品牌服務，賀冰凇團隊一直是踐行于實際幫助的，通過設計和藝術給這個世界帶來更好的一面，希望借此，吸納更多的力量，為環境保護發揮更大的作用。
©注：設計中使用的人物圖片皆來自CEGC官方公益項目資料，均有署名，僅供學術交流和作品呈現，不作任何商業用途。
原文地址：站酷
作者：賀冰凇
轉載請注明：學UI網》「福特汽車環保獎」升級LOGO，賀冰凇作品！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn