昨天產品經理訓練營的課講的也很棒，今天是講營銷，甚至比得紅點獎的設計師講座人還要來的多。營銷大于設計，有廣泛的受眾。[呲牙]
我啟發很大的一點是：凡事要從目標用戶的角度去思考，定位要準確清晰，思考目標用戶的需好需求，而非僅僅是自己的專業和能表達的東西。同學之間互為老師，同學們都很棒！把那些那古代的，最頂級的高人、牛人、圣人、偉人把它們挖掘出來，列在你的本子上，或者找出他們的畫像，掛在墻上，掛在你的臥室里，掛在你隨時看得見的地方。一有空你就研究他們說過什么話，他們最困難最低谷的時候是怎么度過的?他們看過什么書，他們學習過什么知識，他們年輕時候的榜樣都有誰。不管他們離你幾千年，還是離你幾百年。你只要這么干了，你只要足夠的誠心求教，放心好了，你就一定可以在跨時空的隧道里，讓你感受到這個正向能量，讓你充滿力量，充滿浩然之氣，讓你擁有源源不斷的人生智慧，敬畏之心，感恩之心，知行合一，也要像禮物一樣出現在他人的生命里。

今天是十月16號，周一，簡直是被夢想叫醒的，六點多就起來了，五點多就想著公司的一些事情該怎么做才好呢？一件一件的在腦海里晃悠，那還是起床好了！昨天和同學聚會，收到一個同學的啟發，他攢雞毛湊撣子都要出書了，我平常也喜歡碎碎念的寫一些東西，只是寫的多在自己的自留地里面，關于生活，關于孩子，工作感悟種種。這次我準備寫一個公司工作的方面的成長日記，把我們工作中遇到的方方面面的問題記錄下來，作為一個回顧，給客戶一個了解我們的途徑。
我們公司成立已經是十二年了，中間也經歷了許許多多的事情，我們也一步步的在長大，在成熟。要做小而精的公司，是一開始就想好的，就像我們公司的名字，蘭亭妙微，取自蘭亭序，群賢畢至，很開心的在一起做點事，妙在精微。

蘭亭妙微，取自蘭亭序，群賢畢至，很開心的在一起做點事，妙在精微。

人心惟危，道心惟微；惟精惟一，允執厥中。這十六個字源于堯舜禹禪讓的故事。人心是危險難安的，道心卻微妙難明。惟有精心體察，專心守住，才能堅持一條不偏不倚的正確路線。人心惟危，道心惟微；惟精惟一，允執厥中。人心惟危，道心惟微；惟精惟一，允執厥中。這十六個字源于堯舜禹禪讓的故事。人心是危險難安的，道心卻微妙難明。惟有精心體察，專心守住，才能堅持一條不偏不倚的正確路線。人心惟危，道心惟微；惟精惟一，允執厥中。這十六個字源于堯舜禹禪讓的故事。人心是危險難安的，道心卻微妙難明。惟有精心體察，專心守住，才能堅持一條不偏不倚的正確路線。在一個公司的成長中，不貪心，唯精唯一的提升自己的公司實力，處事公允，是多么重要的事情啊。

心是幽微難明的，堅持追求“誠”，持之以恒地去修煉。

我們不追求公司的大，就順其自然就好了。能夠像堯舜禹禪讓一樣，做一個能夠傳承的公司，一代一代有接班人，有做事的道德良心，能夠給客戶好的價值，就這樣平平常常就很好。
所以今天我就開始記錄這些日常啦。

要做一個好的UI設計公司,不僅要在能力上設計能力一直（十幾年幾十年）保持優秀穩定的保持輸出，以及心態的平和寬廣。創始人對做公司要有信心，合伙人之間要同甘共苦，遵守規則，做好表率。
只要持之以恒做好這些，不斷學習。創業其實也不難。
貪嗔癡慢疑，是人性，
善良信任利他尊重包容也是人性，
一個公司能幾十年長盛不衰，那不僅僅只是設計能力好的問題。
我們在這個過程中也完成了對自己的修煉。

2.全流程設計包括有什么主要內容和步驟？
1）明確設計目標，聚焦設計要解決的核心問題
2）明確目標用戶，要明確產品價值要解決的用戶群體，描述用戶畫像，提煉用戶場景，挖掘用戶需求。
從產品應用的具體場景，來研究和理解所涉及到的產品體驗問題。這些可能是產品中已經出現的體驗問題，也可能還包括有未滿足的用戶需求問題。通過不同的用戶研究手段，了解已有的用戶行為和使用習慣，進行策略分析，改變原有業務邏輯不合理的操作路徑，進而提出有針對性的交互設計和視覺設計解決方案。
3）明確資源配比，了解技術方案，進行設計預估
通過項目啟動會了解產品的功能列表和產品規劃，避免做出現有功能相沖突/重疊的設計，進行合理的設計預估
4）確定方案流程，確定設計方案
方案流程可以是流程圖也可以是交互原型圖。最終完成的是高保真的交互原型、可交付開發實現的UI demo。在以最終的結果進行專家評審，確認無誤后，進行可用性測試。
5）數據對比分析
在有條件的情況下，需要對于設計前后的數據進行對比分析，對比前流程與現流程的差異，關注某流程的耗時和步驟。大部分B端產品的設計初衷就是為了某業務流程的降本增效。關鍵就看設計的產品，在上線后給公司的降低了多少的成本，提高了多少的效率。所以成本和效率也是設計的產品是否合格的關鍵因素所在。B端產品設計可以進行用戶可用性測試，了解設計帶來的實際收益和效果。依托數據合理改正方案。

前一段時間，有一個客戶（甲方主管研發工作的副總）向我提出了這個問題：如何提高公司程序員工程師的UI審美？
他們公司UI設計師只設計其中很小的一部分頁面，大部分頁面要讓程序員自己來做的，程序員開發出的頁面看起來總是很丑，這是他覺得苦惱的地方。
在聽到這個問題的時候，我很驚訝，覺得這個問題真的是個好問題。我以前關注的都是設計師如何提高自己的審美？沒有想過讓程序員提高自己的審美。
據我了解，他們公司的程序員非常忙，比我們UI設計公司的加班程度要多很多。我首先想到的是工作都這么辛苦了，能把功能任務完成就很不錯了，也許能顧上提升UI設計審美的時間精力有限。
提高審美，不是短期內能夠達到的事情，何況術業有專攻，工程師們有沒有興趣和精力做這件事情，也是另外的一個問題。
但是，這是一個很好的問題，在一個軟件公司里工程師程序員是占大多數的，UI設計師相對人數比較少的。如果大量的工程師能夠把審美提高易用性提高。確實，這個軟件的整個UI水準就會提高。
如何提升整體軟件的UI設計美的水準，讓軟件好用又統一？
我首先想到的是制定好的UI規范，做好全流程的交互設計原型。通過核心關鍵場景，關鍵頁面的梳理，整理出一套設計語言，規定好UI規范。這份工作可以由設計師來做，把所有的字號顏色使用的元素組件都確定好，關鍵的場景和頁面做一些模板，制定一份完善的UI規范，方便工程師按照這些去復用調用，降低難度。

出現原因（Reason）：

電腦，平板，智能手機的屏幕尺寸逐漸多樣化，設備類型的增長增強了網頁的適配需求。
注：屏幕尺寸為瀏覽器尺寸的上限

自適應（Responsive）：

自適應是根據設備分辨率的不同，分別為不同的屏幕進行布局定義，創建多個固定布局，即“多套設計，多套開發”。適用于閱讀類交互多的網站，如知乎官網。

響應式（Self-adaptive）：

響應式是基于同一套代碼、同一套設計語言，能夠兼容多尺寸、多終端設備的展示，即“一套設計，一套開發”。 網頁根據顯示寬度（瀏覽器寬度）自動調整內容，適用于企業、產品等視覺展示型網站中，信息少圖片多，如華為官網。

響應式好處（Advantage）：

開發成本更低，一套代碼。
設計成本更低，一套設計。
業務迭代更快，一次運營。

響應式適配原則（Principle）：

拉伸布局：內容在屏幕顯示區域進行相對拉伸，已達到完整布局。
等比縮放：內容在屏幕的相對位置上進行等比例縮放，一般用于圖片。
擴展布局：內容可靈活按照屏幕尺寸進行增減，擴展為多行多列等。

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

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

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

藍藍寫
畫出用戶旅程圖是我特別喜歡的一個工作方法，可以與產品、研發、市場團隊一起共創，優化產品。
用戶旅程圖是一種圖形化工具，用于詳細描述用戶在使用產品或服務時所經歷的各個階段和步驟。它能夠展示用戶的整個使用過程，包括用戶的需求、痛點、態度和行為，以及產品或服務如何與用戶進行互動。作為產品設計者，我們可以通過用戶旅程圖更好地理解用戶需求，提前發現后續的用戶體驗問題，并思考如何提升產品或服務的用戶體驗。
用戶旅程圖的應用廣泛，不僅可以幫助我們進行流程分析，還可以識別痛點，定義問題域。同時，它也可以幫助我們進行用戶反饋的收集和整理，為產品或服務的優化提供依據。然而，用戶旅程圖并不是一種一次性的工具。它需要我們不斷地更新和完善，以適應不斷變化的市場和用戶需求。因此，即使我們所屬的團隊沒有特別完善，也許我們在很長時間內都沒有運用的環境，但是不要忘記，它依然是一個威力無比的工具。
現在我們就來重溫一下，這是藍藍設計的用戶旅程圖~~~

UI設計公司的用戶旅程圖

這是乘坐飛機過程的用戶旅程圖~~~

使用用戶旅程圖的方法如下：
Step 1：明確用戶和劃定用戶群
首先，我們需要明確研究的目標用戶和所屬的團隊資源情況。在此基礎上，我們可以確定需要映射的用戶群體，并針對該群體的特定目標和場景進行旅程圖的構建。
Step 2：梳理業務場景下用戶行為流程
根據目標用戶的任務和行為，我們可以梳理出該場景下用戶的行為流程。這個流程包括用戶需要經歷的階段、環節以及交互方式等。如果涉及主次任務流程，都需要一一梳理出來，并加以歸類。這個過程需要深入的剖析，盡可能找出所有用戶與軟件產品產生交互的接觸點，以便進一步拆分出每個階段的用戶目標、操作、接觸點位置、用戶想法以及用戶感受。
Step 3：繪制用戶想法和感受曲線
在梳理完用戶行為流程之后，我們需要根據調研時記錄的用戶反饋和情感變化，繪制出用戶的想法和感受曲線。這個曲線通常采用情緒曲線的形式來展示用戶的情感變化，并標注出用戶的痛點和爽點。
為了獲取用戶數據，我們采用了多元化的數據收集方法，例如：
用戶行為觀察：直接觀察并記錄用戶在各個階段中的實際操作行為。
用戶測試：通過測試用例執行，評估用戶在特定任務中的操作效率、反復性以及清晰度。
用戶調查：以問卷或在線訪談的形式，收集用戶對于任務完成情況的反饋以及他們的疑問和不滿。
熱圖分析：通過熱圖工具分析用戶在界面上的鼠標移動和點擊行為，以評估操作的順暢程度。
工單與客服反饋：收集并分析用戶通過工單或客服途徑反饋的問題和意見。
這些數據均應直接來源于真實的用戶行為和反饋，而不是團隊內部的推測或分析。在整理數據時，我們需要避免主觀評價和情緒化的表達，堅持以客觀事實為基礎，并關注以下幾類關鍵數據：
用戶實際操作過程：觀察并記錄用戶在各個階段的具體操作步驟。
操作效率：通過測試數據評估用戶完成特定任務的效率。
操作的反復性：記錄用戶在操作過程中重復操作的次數和頻率。
操作過程的清晰度：通過用戶調查或熱圖分析，了解用戶對于當前操作流程的清晰程度和滿意度。
任務完成情況：根據用戶調查和工單反饋，統計任務完成率以及未完成的原因。
用戶疑問：整理并分析用戶在各個階段中遇到的疑問和困惑。
用戶不滿：收集并分析用戶對產品或服務的不滿和抱怨。
用戶情緒：通過工單、在線訪談或社交媒體分析，了解用戶對產品或服務的情緒反應。
Step 4：總結解決方案和新的靈感切入點
在對這些數據進行痛點分析時，我們需要對這些痛點進行系統的梳理、分級以及深度挖掘，以洞察痛點背后用戶的真實需求和期望。然后，基于這些痛點和需求，識別出產品或服務優化和改進的關鍵機會點。

通過回答這些問題，我們可以總結出相應的解決方案和新的靈感切入點，為產品或服務的優化提供參考。
在分析過程中，我們可以采用多種方法來拓寬思路和尋找可能的改進點，例如：
行業內成功做法借鑒：研究同行業其他成功案例，了解他們在解決類似問題時的策略和方法。
項目經驗總結：回顧團隊歷史項目中的類似問題，提煉成功和失敗的經驗，以便應用于當前問題的解決。
專業判斷與經驗聯想：依靠專業知識和行業經驗，提出可能的問題解決方案，并聯想類似場景中可能的優化策略。
用戶視角思考：換位思考，從用戶角度出發，嘗試理解他們可能的痛點和需求，以及可能的解決方案。
頭腦風暴：組織團隊成員進行頭腦風暴，鼓勵發散性思維，盡可能多地提出可能的解決方案。

我們的目標并非僅僅是為了制作一張漂亮的圖形或者報告，而是通過這種結構化的分析方法，盡可能客觀地找出產品或服務中用戶體驗優化的關鍵機會點，以便為進一步的決策和實施提供明確的方向和依據。通過繪制圖表，我們可以清晰地展示整個分析過程以及結果，提供一種可視化的視角以便團隊成員更好地理解和評估產品的優勢與不足。
多練習~~這是一個很有效的積思廣議、從多角度解決問題的一個好方法。
祝大家使用順利~~

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

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

改版前

改版后

頁面框架

1.導航菜單

用于承載同一層級下不同頁面或類別的組件，方便用戶在同一個頁面框架下進行快速切換。

1.1.顏色

導航層和內容層劃分明確，從本質上講，這兩個本身就屬于不同的業務模塊，通過顏色的區分，是最為直接，最簡單的一種方式。左側導航為深色，能夠讓用戶更沉浸的體驗，右側內容區都為淺色，用戶在使用時能夠真正做到有區分。

1.2.側邊導航

將菜單欄放置在左側，頁面布局上為左右結構，將導航菜單放置左側固定
優點：
擴展性較強（多級導航可以流暢展示，可以涵蓋很多大而全的產品）
展示靈活（側邊導 航可收折，收折過后用戶的橫向核心空間將會增大大，頁面展示效率也會大大提高）
快速定位（視覺啟始線統一，用戶可以根據首字進行查找，方便查找）

1.3.圖標

線性圖標是由直線、曲線、點在內等元素組合而成的圖標樣式，通過線來塑造輪廓。線性圖標具有辨識度高，清晰，簡約易識別等優點，不會對頁面造成太多的視覺干擾。

2.樹結構

用于承載有父子關系的結構化內容，提供內容層級的展示。

2.1.組織信息

樹形結構可以幫助將信息進行層級分類，清晰地展現出信息之間的從屬關系。這樣，用戶可以快速找到所需內容，降低了在應用中迷失的可能性。

2.2.幫助用戶導航

在一個頁面上展示多個層級的內容，用戶通過點擊展開或折疊相關節點，無需頻繁地跳轉頁面。這種設計簡化了導航過程，提高了用戶滿意度和黏性。

2.3.左樹右表

根據人的視線流和操作順序，將樹結構放置在表格左側，先幫助用戶定義表格的具體內容，后引導用戶進行表格內的操作

3.表格

表格常用于展示同類結構下的多種數據，易于組織、對比和分析等，并可對數據進行搜索、篩選、排序等操作。一般包括表頭、數據行和表尾三部分

3.1.斑馬紋表格

斑馬紋表格通過交替的數據行背景，可以引導用戶的視線，使得大量數據看起來更加和諧和有條理。這使得用戶能夠更快地找到他們需要的信息，提高了數據的可讀性和掃描性。同時可以減少視覺噪音和協助對比，從而幫助用戶更加輕松地瀏覽表格數據，降低視覺疲勞。

3.2.居中對齊

居中對齊的文字和數據在視覺上更加均勻分布，可以讓用戶更加輕松地瀏覽和讀取數據。特別是在處理包含大量數據的表格時，居中對齊能夠減少視覺上的擁堵感，提高數據可讀性。可以使整個表格的行高參差不齊的現象得到緩解，給用戶一種視覺上的統一感。

3.3.顏色

品牌色用于選中和編輯，紅色用于警示和禁止操作，綠色用于積極意義的信息或者操作。控制顏色數量，且不同顏色表達不同的含義，符合用戶思維慣性，具有良好的反饋作用。

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

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

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

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

藍藍未來將會持續在平臺上分享關于設計行業的文章。此外藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，添加vx藍小助ben_lanlan，報下信息，藍小助會請您入群。同時添加藍小助我們將會為您提供優秀的設計案例和設計素材等，歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

banner插畫組件化設計—效率提升篇
李瑞昊

插畫在互聯網行業設計中有著大量地運用，合理地使用插畫不僅能夠增強視覺感染力，塑造品牌認知，而且可以提高用戶活躍度和活動轉化率。組件化設計可以解決插畫風格不統一以及設計產出效率低，缺少情感化設計等因素。

[
(http://m.wtxcl.cn/blog/content/uploadfile/202308/e7181692615358.png)]

(http://m.wtxcl.cn/blog/content/uploadfile/202308/982b1692615532.jpg)