作為一名設計師，除了支持日常業務需求，對產品體驗進行整體把控也是我們工作很重要的一部分。

即使體驗再優秀的產品，也會不斷出現各種各樣的體驗問題。這些問題累積到一定程度，就需要通過「驅動體驗優化專項」來解決問題。

比如：新產品上線，以功能實現為主，缺少對體驗細節的推敲，容易引起體驗問題；產品競爭白熱化，需要與競品的體驗拉齊；產品日常運營過程中，不斷收到用戶反饋、不斷發現體驗問題。

主導和推進體驗優化專項是對設計師綜合能力的考驗，也是成為高手設計師必會的事情。

但業內相關文章并不多。

于是我們針對「設計師如何主導和推進體驗優化專項」進行研究，從「定」—「找」—「解」—「推」四個環節進行總結，并為大家提供相關工具包和實際案例，以期可以開箱即用，并拋磚引玉、啟發大家更多的思考。

共分為方法和案例兩篇。本篇為方法篇。

無論是發現了問題進行集中地優化，還是作為一種優化制度持續優化，優化專項持續的時間都不會太短。為保證順利進行，在前期需要作出明確的規劃。

規劃需要結合產品的目標與規劃，與產品側形成合力。所以規劃要與產品、技術共同制定。

制定體驗規劃的五個要素

一般需要明確以下內容：優化范圍、問題獲取、優化目標、參與人員、時間節點。

體驗專項的五個階段

需要注意的是，規劃要清晰、明確、可執行。

可以將整個項目劃分為前期啟動、問題獲取、方案產出、需求落地、項目復盤五個階段。

每個階段均需明確：「時間」、「人物」、「任務」、「產出」。

在這個環節，我們需要整理已有的體驗問題，并在必要時進行補充調研，對問題有更全面、更細節的認識。

如何獲得體驗問題？

體驗問題通常來自五個方面：用戶挖掘、設計走查、競品參考、老板反饋和產品提供。

如何使用這些方法？

以上方法可以綜合使用，例如用戶反饋某個功能有問題，可以設計自查看問題是否清晰，可以做用戶觀察看實際使用情況，可以通過數據分析獲取操作細節，也可以參考競品了解不同的解決方案。

將方法按照使用場景、問題的指向性和結論類型進行分類，大家可以根據具體情況靈活選擇：

區分壞點、優化點和需求點

首先我們來明確三個概念：

壞點：有明顯體驗問題的問題點，體驗層面。

優化點：針對一個或多個壞點的解決方案，設計層面。

需求點：一個或多個相關優化點組成的需求點，或目前沒有滿足的需求，產品層面。

從問題解決角度來說，它們不僅僅是不同階段的產物：

我們獲得問題的最初，壞點、優化點、需求點可能同時出現在各種信息源中，混雜在一起。后續需要把壞點轉化為優化點，成為問題解決方案。解決方案再拆分整合成為一個個需求點，進入產品計劃，推動落地。

而且對于把握問題的本質，也至關重要：

優化點、需求點，如果追根溯源，都可以對應到體驗上的壞點。我們收集到的優化點和需求點，可能并不是當前最好的解決方案，需要挖掘出對應的壞點，制定最優方案。

如何還原為壞點——追問法

只要不斷地追問，就可以挖掘出壞點。

例如在審批流程中：

用戶：我想要個點一下系統就能發通知給處理人提醒TA審批的功能。（這顯然是個需求，需要還原為壞點）

追問：什么情況下要提醒TA審批？

用戶：有時候時間緊迫，不審批就耽誤事了；有時候雖然不耽誤事，可領導沒批感覺心里不踏實。

追問：什么時候比較緊迫？

用戶：比如考勤，我今天請假，但明天就是考勤截止日了，必須立即批才行。

追問：為什么想要系統發通知？

用戶：因為如果我直接提醒老板，我不太好意思，感覺系統提醒能好一些。

ok，至此，我們基本明確了用戶的體驗壞點：部分緊急流程需要及時去提醒審批，部分流程審批人想盡快結束，但申請人又不想以個人身份去提醒。

這個壞點需要深入洞察審批人未及時審批的原因，再給出解決方案很多，且不一定要采用用戶提出的解決方案，而應該綜合考慮，選用最佳方案。

歸類—推導—轉化

1.將問題點歸類

分組是為了把同類或者相關的問題點聚合，尋找系統性的解決方案，而不是「頭疼醫頭，腳疼醫腳」。

舉個例子：

可按照不同頁面、控件、功能、流程、系統來進行歸類，如：申請表（頁面）、目錄樹（控件）、收藏（功能）、審批單（流程）、導航（系統）。

2.推導出優化方案

這個也是設計師最拿手的議題——「如何解決問題」，即針對一個/組用戶痛點去設計方案。這里可以應用平時方案產出的各種推導方法，包括創意方法。

同時應該注意到，問題也許不能僅通過設計手段解決，所以此過程需要產研同學參與，確保方案有效且可實現。

3.轉化為具體需求

方案只有轉化為具體需求，才能進入產品規劃、落地上線。這也是重要的一步。

優化方案和需求的粒度不同：有時候需要把優化方案拆成不同的需求分拆上線，有時候一個需求又能同時涵蓋多個優化方案。這需要根據優先價值，結合產品側的規劃進行。

如何判斷優化價值

每個問題優化價值是不同的，我們可以從產品側、用戶側、數據側三個方面去衡量：

產品側：看可行性。是否契合產品的中長期目標？是否符合產品的發展節奏？是否易于技術實現？時間資源成本如何？

用戶側：看影響力。是否是用戶使用的核心流程、關鍵頁面？影響的用戶范圍多大？用戶角色的權重（主要指B端）是否較大？

設計側：看價值感。設計的ROI如何？能否體現設計的專業度？能否提升設計的話語權？

設計師雖然主導了體驗優化專項，但又不掌握開發資源，如何更好地推動落地呢？需要掌握一些技巧。

推動落地中的四個對齊

對齊是為了及時對齊信息，減少團隊中的信息差，使團隊成員互通有無。不但可以提升協作效率，還能使大家感到被尊重和需要，使大家擰成一股繩。

四個對齊包括目標對齊、進度對齊、方案對齊和效果對齊。

目標對齊：確保在項目啟動和各個階段產品、設計、技術各方達成統一的目標?？梢酝ㄟ^啟動會和重要節點會議進行對齊。

進度對齊：項目周期比較長時，需要注意各階段的進度對齊，掌握進度和風險。方式有排期進度表、定期例會、定期郵件等。

方案對齊：這是比較容易忽略的一點。需要產品、設計、技術甚至用戶做方案對齊。我們目標明確，是為了切實解決用戶的體驗問題的，方案一定要有效，且可以實現。所以要關注方案是否能解決用戶問題（方案評估、測試）、是否能夠技術實現（方案評審）、方案實現效果（方案驗收）。這點做得不好，優化效果就要大打折扣。

效果對齊：上線后需要針對兩個效果進行對齊：一是優化效果如何、是否達成了目標（效果評估）。二是項目運行得如何，有什么經驗和教訓（復盤總結）。及時的團隊復盤，有利于大家揚長避短、取得更好的成績。

形成長期的體驗優化機制

對于體驗問題，我們不能寄希望于體驗優化專項「畢其功于一役」，而是要建立長期的體驗優化機制。

包括：定期整理用戶反饋、定期走查、定期與產品技術溝通優化計劃、階段性復盤等，建立良好的體驗優化通路。

相信看完文章后，大家對「主導和推進體驗優化專項」的方法有了一定了解。后續我們將會發布實戰篇，分享具體實例。

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

作者：環鐵藝術家

轉載請注明：學UI網 ? 設計驅動！體驗UP！高手設計師必備工具包

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

? 色塊要有明顯的主次，要有大小對比、色彩對比、輪廓對比等。

? 色塊的數量要適當控制，太少了顯得單調，太多了會很碎。

▲比如上圖的色塊就過于零碎了。

▲上圖就要好很多。

? 不要把所有色塊都嚴格對齊，否則會很死板。

? 由于幾何色塊本身比較單調、生硬，所以色塊內的信息和圖形可以靈活一點，可以增加一些細節，比如裝飾元素。

? 不一定要把所有的信息都放進色塊里，把個別信息、元素放出來，可以使版面看起來更靈活。

下面蔥爺給大家分享幾個案例，來看看色塊排版具體是怎么操作的。

案例一：服裝畫冊目錄設計

下圖是某服裝畫冊的目錄頁設計，其實也是用了色塊來排版，但是整體很混亂，信息分組不明確，而且很不精致，所以需要對它進行調整。

? 原稿幾乎把所有信息都放在一個大色塊一中，這么做色塊就沒起到區隔信息的作用，所以我把背景分成了三塊（顏色全來自圖片），最上面的放標題，下面兩塊分別放兩組內容并對齊排版，使信息更清晰、更易讀。配圖保留原稿把圖片放入方形色塊的方式，只是去掉了多余的描邊。

? 重新設計標題。黑色太過突兀，所以我把它改成了粉色，并給副標題也加了一個綠色塊，副標題與標題以及下方的綠色塊疊加，既增加了畫面的層次感和設計感，也加強了上下兩個空間的聯系。

? 將內文的排得更精致一點。首先，選了一個歐式風格的字體，給內文中的四組信息分別加上序號，在風格與排版上與其他元素形成鮮明的對比。其次，把內文的顏色從黑色改成與對應色塊的深色，融合性更好。最后，在小標題和正文之間加入短線條，做區隔和裝飾的作用，并適當調整正文的行距。

? 用網格系統稍作規范就完成了。

方案二：兒童蛋白粉單張設計

下圖是該版面需要展示的主要內容，文字較多，而且基本上是大段大段的，但信息組別并不多，大概可以分為四五個部分。

? 將屬于不同組別的信息和元素分別放入色塊中進行區隔，色塊顏色來自于品牌logo和包裝。

? 這樣劃分色塊層級太少，而且矩形色塊太硬，不太適合兒童產品，所以把標題和小標題都單獨拿出來了，并把色塊做了圓角處理。色塊縮小后，產品圖片有一半露在外面，正好起到打破方塊的作用。

? 標題需要突出設計一下，但由于左上角有Logo，所以如果把標題拉大，那么左邊就會有點擁擠，右邊則會比較空，所以把產品圖片和產品介紹的文字左右調換一下更好。功效證明的文字太多，句子也很長，所以我把它分成了兩欄，提高文字的易讀性。

? 把標題字體改成宋體和襯線體，并把產品圖片下方的色塊改成圓形，加強視覺上的對比效果和靈活性。

? 把標題的文字改成右對齊，并跟與下邊功效證明文字的右欄對齊，這樣左上角的留白會更舒服一些，平衡性也更好。

兩個正文的大色塊里全是文字所以略顯單調，于是我在文字上下加了一組波浪線，細節上會更精致一點，到這里這個單張就排完了。

方案三：移動寬帶海報設計

下圖是移動寬帶的一則促銷海報，也是用了色塊排版，該畫面中的信息其實挺清晰的，主次分明，也有一定的視覺沖擊力。問題在于美觀性不夠、形式過于普通不時尚、排版很呆板，下面我們來對它進行優化：

? 將該畫面中的信息一一用色塊框起來，原方案把“100M寬帶優惠用”放在一個大色塊里，層級關系太少，視覺變化不夠豐富，所以我把它分成了三個色塊（由于移動的調性還是比較年輕的，所以我打算用孟菲斯風格來做）。另外，原方案中的優惠套餐被處理成三個很平均的色塊，看起來既分散又缺少變化，所以我把他們組合在了一起。

? 將“100M寬帶優惠用”這幾個色塊進行適當錯位排版，并在其下面增加一個大的色塊（可以看作是電視機的屏幕），以使版面變得靈活且主次分明。

? 給文字色塊加上立體效果，加強版面的空間感和信息之間的層次感。

? 只有文字和矩形色塊的畫面太過單調和生硬，所以我加了一些與寬帶相關的圖形元素進來，比如代表視頻的播放器符號、代表網速快的閃電符號、代表互聯網的箭頭、代表網線的曲線。整個版面變得生動、活潑了很多。

? 在背景中加入網格底紋，使背景與主體形成呼應，視覺上也沒那么單調，并把活動時間和辦理方式從最下面的色塊中調出來放在視覺主體的下方，與其他的文字色塊形成對比，

? 再調整一點細節就做完了。

色塊排版的用法還有很多，通過改變色塊的風格、造型、組合方式等等，可以創造出非常多樣的效果，所以用色塊排版也不一定會很死板、很粗暴，比較適合表現時尚、沖擊力強的設計需求，但確實不太適合用于表現高端、高級的視覺，這點需要注意一下。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉載請注明：學UI網》用色塊打開排版的思路，簡單好用!

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

比如以登錄為例，當你把密碼輸錯后，網站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數據對用戶來說很煩人，這會讓你必須重新輸入用戶名和密碼，即便只是拼錯了密碼而已。

因此，任何專業的用戶體驗設計師不僅應該考慮順利的流程情況，還應該考慮失敗時應該怎么辦。

一、錯誤提示

錯誤提示應該讓用戶容易找到原因并方便理解。否則，他們可能沒辦法解決這些錯誤。所以對于設計師來說，一個非常重要的目標是要設計出一個易于解決錯誤的流程。一個錯誤信息應該能清晰的解釋到底發生了什么，如果可能的話，最好也提供解決方案。

左邊的錯誤信息很清晰的解釋了發生的問題，右邊的錯誤信息對用戶來說非常困惑。

1.1什么時候告知用戶發生了錯誤比較好？

當用戶出錯后，首先要考慮的事情就是應該在用戶填表時提醒還是最后通知用戶。錯誤預警中有三種常見模式：

• 內聯/實時：在輸入時或移開焦點后立即提供反饋。
• 提交后/客戶端：當用戶點擊提交按鈕之后
• 服務器端：當請求發送到服務器后再返回反饋給用戶

這些方法中的每一種都有其優點和缺點。

1.2內聯驗證

一般來說，當表單非常短小時用內聯驗證，因為它允許在內存中的數據仍然最新時更正錯誤。

你可以用內聯驗證立即告訴用戶哪里錯了。

”盡可能的進行內聯驗證“”這種類型的錯誤消息很容易被察覺“，此外，輸入完成后立即告知錯誤，對用戶的交互成本最低——UX專家Rachel Krause

另一位專家Luke Wroblewski建議，當問題的答案不明顯時，可以使用內聯驗證。例如，在選擇用戶名時，用戶可能不知道哪些用戶名可用。在這種情況下，在用戶輸入數據時立即告知錯誤可能會有所幫助。

1.3提交后驗證

另一方面，當表單很大且需要保持關注時，你希望幫助用戶保持專注，而不是通過不斷顯示錯誤來打斷他們。

“使用內聯驗證，用戶必須在兩種截然不同的思維模式之間反復切換:填寫表單和糾正錯誤。這減慢了用戶的速度，增加了認知努力，通常會降低用戶的滿意度?！盝essica Enders在她的書《設計UX:表單》中寫道

1.4服務器端驗證

服務器端驗證是最不友好的方式，但卻為網站提供了很高的穩定性。當需要二次檢查用戶的數據時，這種方法最有效。

1.5如何提示用戶錯誤？

錯誤提示告訴用戶他們做錯了，但是他們究竟做錯了什么，要如何修復它？很顯然，清楚地說明錯誤，而不僅僅是顯示Error:90803，對用戶有很大幫助。

使用用戶能理解的話，而不是用專業術語

1.6使用積極語言而不是消極語言

錯誤提示措辭要使用積極語言而不是消極語言。例如，如果用戶遺漏了一個字段，與其說”該字段不應該是空的“，不如說”請填寫此字段“。當使用積極語言時，用戶不會因為一個錯誤而受到責備，這能減少用戶的焦慮感，減少流失。

1.7必要時提供幫助

在某些情況下，用戶無法自己修復錯誤，他需要額外的幫助。例如，當用戶無法登錄時，大多數應用只提供找回密碼，而沒有找回用戶名。但事實上，用戶名和密碼都可能會忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來幫助用戶解決問題。

二、標簽

標簽是表單可用性最關鍵的組成部分。如果標簽不清晰，那么其他元素就算把可用性做得再好也沒意義。所以，不要讓用戶來猜測這里面到底要填什么內容。

不要用一些模棱兩可的詞，比如”數字“可能會讓人感到困惑，一定要明確意思。

2.1將標簽放在輸入字段的頂部

許多研究表明，將標簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因為它允許用戶遵循一條垂直線而不是Z模式。但是，如果它占用太多的垂直空間，您也可以使用浮動標簽。因此，如果你希望用戶更快地填充表單，請將他們放置在字段的頂部。

將標簽放置在字段的頂部和使用浮動標簽，這兩種方式都很有效

2.2將標簽放在輸入字段的左側

另一方面，當你詢問用戶比較復雜的問題，用戶需要更多時間思考問題答案的時候，研究表明將標簽放在輸入框的左側會比較好。

當用戶需要思考答案時，將標簽放在輸入框的左側會更好

2.3標簽應該是可見的，無論什么輸入狀態

無論你用什么方式，確保當用戶填完內容后，標簽是可見的。因為，當用戶需要再次確認表單內容的時候，他們不用刪除填好的數據來查看系統需要他們填什么。

不管輸入狀態如何，標簽都應該是可見的

2.4減少不必要的輸入項

要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項。如果實在做不到，可以將必填和非必填的字段區分開，減少用戶的負擔。

2.5可見性

不管狀態如何，字段都應該是清晰可辨的。此外，活動字段和非活動字段之間的區別應該要明顯。

輸入字段應該有高對比度，在所有狀態下都是可見的。

2.6自動激活PC端表單的第一個字段

自動激活表單的第一個字段，這可以提高處理效率，避免用戶額外點擊。

2.7幫用戶預先填好

在某些情況下，你可以幫用戶預先填好字段。例如，可以很容易地檢測到郵政編碼，或者某些數值可能是頻繁的。在這些情況下，為用戶填充字段。

2.8格式

含有大量小數的數字很難讀懂。因此，當要求較大的數字時，需要考慮添加格式以支持可讀性。例如，在詢問卡號時，使用自動格式化:讀取5678-9876-9738-8394比讀取5678987697388394容易得多。

此外，當請求需要特定格式化數據時，要包含一個實例，讓用戶準確理解要填什么。

幫助用戶了解如何格式化數據

2.9表單區域大小

輸入框的大小應該要與所填的內容長度相匹配。比如，當要用戶填寫用戶名時，如果顯示的填寫區域是一個長段輸入框會讓用戶感到困惑。另一方面，如果你希望用戶寫一些反饋，但只能看到所寫內容的最后一小段，那就很難用了。（彩云注：我就經常在一些體驗不好的產品上碰到過這種情況，簡直太難受了。）

如果你不能準確預測信息的長短，比如留言反饋，建議表單區域最好是能在用戶填寫內容觸碰邊界時，自動變高。

輸入字段的大小應該與它預期的數據大小相對應

2.10為桌面系統設計靈活的表單

在鍵盤和鼠標之間切換很煩人。在理想的情況下，用戶應該只使用一種媒介來填寫表單，但有時，這是不可能實現的。因此，如果用戶需要多種媒介來填寫表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。

另外，當創建一個網頁表單時，要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。

2.11為移動端系統設計靈活的表單

當在移動設備上時，將你顯示的鍵盤與用戶必須輸入的數據相匹配。我們經?？吹叫枰獢底宙I盤的輸入可以很好地實現這一點，但幾乎很少有APP顯示支持輸入電子郵件地址的鍵盤。

支持通過顯示正確的鍵盤輸入電子郵件

三、下拉菜單vs單選按鈕

下拉框的使用比單選按鈕更有挑戰性，因為它需要額外的點擊來打開它們。此外，用戶無法提前看到選項，這可能會讓他們感到困惑。因此，如果你只有少量的選項，使用單選按鈕。如果選項的數量超過4個，下拉菜單的效果會更好。

3.1復選框

通過勾選復選框，用戶應該是同意某些內容。我的意思是，他們應該說，“是的，我想要這個”，而不是，“是的，我不想要這個”。不幸的是，我經?？吹接姓`導性的復選框試圖在創建賬戶時欺騙人們訂閱他們的產品。當你不想訂閱他們的通訊時，你又必須勾選復選框，像這樣的伎倆對信譽是不合適的，所以不要動心使用它們。

通過勾選復選框，用戶應該同意某些內容，而不是確認他們不同意。

四、結構

一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點，仔細規劃結構。

4.1從簡單的問題開始

從簡單的問題開始，從用戶已經很清楚知道答案的問題開始，像名字、郵件這類。然后再循序漸進問稍微復雜的問題，像賬戶信息之類的。

首先，一個很自然的順序，當你第一次見某些人的時候，你會找一些比較好切入的問題，比如叫什么名字啊之類的。其次，當用戶已經填了一些字段之后，那么之后會增加他填完表單的機會。

4.2創建邏輯信息塊

將不相關的信息按邏輯分組。例如，你可以將結帳表單分為“個人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個主題。

通過對相關信息進行分組，使表單可被快速掃描

4.3單步VS多步表單

當你有很多問題要問的時候，你可能想知道哪一個最有效：單步流程還是多步流程。一般來說，單步表單的轉化率更高，因為它看起來更小，而且不會勸退用戶。如果你詢問基本信息并希望用戶快速填寫表單，單步表單就非常不錯。

當用戶被要求必須填寫更多復雜信息時，多步表單會更好。為了幫助用戶在進行多步驟填寫時不至于失去耐心，可以給到進度條，提示還剩多少步。

4.4單列vs多列布局

一般來說，用單列布局會更好，因為可以幫助用戶更好地掃描，也可以盡量減少用戶遺漏填寫。

但當用戶多次填寫同一個表單時，他們更喜歡多列表單，因為這樣不會浪費時間滾動。一般來說，在B端應用中這種多列表單會比較合適。

五、按鈕

設計可用的按鈕對提高轉化率至關重要。如果按鈕上的文字內容比較模糊，會容易勸退新手用戶。

根據用戶按下按鈕會發生什么來命名按鈕

5.1提高用戶的容錯率

對于更復雜的表單來說，按鈕最重要的一點是，應該有提交和取消表單的單一方法。用戶應該至少有補救的機會。舉個例子，如果用戶點了在線幫助時，他已經填好的數據不應該被丟失?；蛘?，如果用戶由于意外點擊了按鈕，請求不應該被提交。

5.2主要按鈕和次要按鈕應該很容易區分

為了避免點擊錯誤的按鈕，用戶應該能比較容易地區分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。

讓主要和次要的按鈕樣式上有比較大的區分度

5.3正確的標簽按鈕

按功能明確地標注按鈕。例如，如果按一個按鈕可以創建一個賬戶，在按鈕上的文案叫”創建賬戶”要好過“提交”

總結

當用戶打開表單時，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設計給他們設置障礙。

不幸的是，這里面提到的許多錯誤，并不需要多么高級的技巧，而是因為設計沒有同理心。仔細思考你的設計流程，檢查是否能讓所有內容對不同背景和專業知識的人都是清晰的。

通常來說，一般要達到以下目的，大多數指導原則都來自這些規則：

• 用戶應該只輸入一次數據
• 用戶應該填盡可能少的信息
• 用戶應該只需要記住少量的信息
• 用戶檢查和恢復錯誤內容應該要很容易

原文地址：彩云譯設計（公眾號）

作者：彩云Sky

轉載請注明：學UI網》想把表單設計做到極致，居然有這么多細節需要注意，學到了！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

話說自從著名資本家胡曉波先生對訓練營的同學下達堅持打卡兩年送一臺蘋果手機的許諾之后，同學們紛紛戰意滿滿，激情四設，每天就是手機碎片+1，手機碎片+1 的做練習…而本意是激勵大家好好練習的波哥，整日憂心忡忡，省吃儉用…好怕自己兩年后被原地榨干…

為了更好的協助大家吸資本家的血，豐富自己的武器庫。本次教程整理了八個由易到難的 LOGO 設計方向與相應的 Ai 技法，大家可以用闖關的方式一各一個的逐個攻破，體驗感會更好哦！話不多說，我們開始吧！

文章末尾另附視頻版本，對步驟有疑惑的同學可以跟著一起實操一遍，嗯，是真的想教會你呢。

PS：本文所有案例均來源于網絡，只用作分析技法。

首先出場的是一個雪花造型的 logo，復雜的線條紋路讓它看起來既神秘又迷人，雖然看起來很麻煩，但其實我們很容易就能發現它的規律性：

1. 由六個相同的單一元素旋轉復制得到；

2. 線條傾斜角度均為 60 度。

OK，掌握了這個規律，我們用網格大法很輕易就可以將它繪制出來，來，上步驟！

首先我們先畫出網格，用幾條等距的直線，然后群組整體旋轉 60 度復制左右兩組，即可得到。

想要做這種傾斜角度相同的線條，網格可以幫助你更好的進行規范。

然后我們沿著網格將單一元素的路徑用鋼筆工具繪制出來，這里需要注意兩點：一是每一個端點處最好對齊網格的點；二是有轉折的地方要一筆連過來，方便后面加圓角處理。

畫好路徑后我們將它轉曲，然后添加圓角，注意添加圓角的規律，一般外圓角會比內圓角大一些，而且相同的角度一定要設定相同大小的圓角。

單一元素處理好之后，我們把它沿著中心點旋轉復制 60 度繞一圈，就可以得到我們想要的圖形了，一般操作就是復制一個然后 CTRL+D 進行重復即可。

最后添加顏色和排版就可以了。

一般越復雜的 logo 想要做的出彩，往往都需要一些規則性在里面，而網格能夠很好的幫助我們去實現這種規則性。

這是今年意大利申辦 2030 年世博會的 LOGO，整體造型由羅馬古城門向內進行線條發散組合而成，寓意各國文化的友好交流。這種線條混合發散的 LOGO 既簡單又出效果，用混合工具即可輕松完成，下面我們來看一下在制作過程中有哪些需要注意的點。

首先我們將需要混合的部件準備好，也就是建筑的外輪廓以及大門的外輪廓。注意一定要保證左右對稱，否則混合起來會十分混亂，然后下面的底部先不要連接上。

這一步需要注意下面連接處不要合并，不然會出 bug。

選擇混合工具，分別點擊城堡和大門，將指定步數改為一定的數值，數值越大，越密集，這里設定為 35。然后就得到了向內混合發散的感覺了！

混合完成之后我們擴展出來，將最外圈輪廓直接向外擴大復制出輪廓線即可。

最后我們整體進行轉曲，然后添加顏色就搞定了！可能有的同學會覺得這種多線混合的 logo 過于復雜，會不會不太好應用，但其實這種屬于活動型 logo，并不需要用個五年十載，活動型 logo 更著重考慮當下，可以做得更個性，一切以視覺為出發點！

看完了國外的，再來欣賞一下這個極具中國風的湖州城市 LOGO。這個 LOGO 的亮點在于它的正形背景部分是由不規則的水墨感條紋組合而成的，文化氣息拉滿的同時讓圖形更加活力生動，我們來看看這種非對稱條紋該怎么繪制。

首先我們將橢圓部分的線畫出來，第一步找到最高點和最低點，然后用混合工具進行混合，得到由曲線逐漸變成直線的過程線段。

然后手動的將各個線條擴大到橢圓輪廓的位置，并調整好粗細和間距。

到了最關鍵的一步了！我們將每條線的描邊配置改為這個不規則的樣式，在描邊窗口最下面就可以找到，記得適當調整粗細保持過渡自然。

然后我們把每一條線都改成這個描邊樣式，并將下半部分水波紋的地方也繪制出來，注意下面的地方描邊可以調的細一些。

畫好背景后，我們將負形部分的塔形建筑放到條紋的中間，并居中對齊，改為白色。

光變成白色肯定不行！我們要的是鏤空！這里直接選擇所有圖形，然后用路徑查找器里面的分割，可以將所有圖形分隔開，然后用魔棒工具選擇白色部分，直接 Del 刪除即可。

最后加入漸變色！效果就拉滿了！這種非對稱式的線條相較于普通的線條，更加靈活生動，也天生自帶中式筆觸的感覺，以后大家碰到中式 logo 的命題，可以考慮嘗試一下這個風格。

這個 LOGO 在 2D 平面的基礎上，融入了褶皺感 3D 立體的感覺，同時它的組合結構是類似于飄帶這種飄逸柔和的造型，比普通的方形更加優美。下面我們來看看如何做這種飄逸的結構以及如何進行視覺 3D 化的實現。

其實如果你的鋼筆工具玩的 6 的話，直接畫也是可以的，但是相信在座的各位鋼筆都不太行，甚至很多同學經常被只會 Flash 的胡曉波嘲諷，那能忍嗎？這里教大家一個曲線救國之路，先畫一條直線，然后選擇扭曲和變換里的波紋效果，大小設為 100，隆起數改為 1，就得到了一個…emmmm，優美又不太對勁的曲線。

將這個波紋線砍掉一半，嗯，總算正常一些了。

把它向下復制為六個，并適當調整一下間距。

將組合好的圖形向右鏡像復制一個，然后放到它的下面，對齊左邊的端點并連接，形成一個翅膀的感覺。

然后再次左右鏡像復制一遍，基本的造型就出來了。

選擇實時上色工具，分別按路徑填充黑色部分。

最后刪除掉多余的描邊，并合并黑色部分，效果就出來啦！用這個方法可以做出來很多種曲折線，大家可以嘗試一下，肯定可以組合出各種好玩的樣式出來。

像素化風格的 LOGO 也是常年比較流行的，不光光是游戲行業，其實很多企業類的 LOGO 也可以非常好的利用像素化進行視覺呈現，很多同學只聞其名，不懂其法。下面我們用這個案例來看一下像素化 LOGO 的設計步驟。

由于是企業類的 logo，在造型上就相對嚴謹一些，除了正常的方形，這里再給大家介紹幾個常用的比例（如上圖），經過比較，發現青銅比較接近于原 logo…那我們就用青銅的比例，做出王者的效果。

繪制網格有兩種方法，一個是畫好矩形之后，選擇對象→路徑→分割為網格，二是直接用矩形網格工具繪制。這里因為我們提前畫好了矩形，所以直接用第一種方法，行數和列數分別設為 52 和 11。

畫好網格之后，就可以請出我們的老朋友實時上色工具，在網格中揮灑你的創意。

用實時上色工具畫好之后，需要擴展一下，才能提取出畫出來的部分。

最后我們將網格線刪除，就可以得到我們畫好的圖形了！純純矢量的像素化就這么搞出來了！這個方法是通用的，你可以通過改變不同的網格數量，來繪制不同像素塊造型的圖案，比如你想繪制常規的正方形像素塊，那行數和列數設為相同的即可，之后就在里面進行填充色塊，真真正正體驗到畫畫的快樂！

平面構成作為設計學的基礎學科，通過點、線、面三者規則或不規則的編排和組合，形成極強的抽象性和形式感，它在 LOGO 的實際應用中也非常容易出效果。這個 LOGO 就是通過線與面的結合來進行抽象創作，下面我們來看一下具體的實操過程。

第一步我們先把六邊形輪廓和中間的三角形畫出來，其實就相當于我們新建一張畫板，在里面進行設計是一個道理。

第二步我們畫三條輔助線來方便后續的操作，注意這里的線都是有規律的，比如最下面的線是與三角形形成 90 度相交，而另外兩條線都是沿著三角形的邊進行延伸。

第三步我們將下半部分的線繪制出來，具體操作如下：

1. 沿中心畫一條直線，再沿六邊形邊畫一條直線；

2. 兩者進行混合，步數設為 24；

3. 左右進行鏡像對稱復制；

PS：這一步其實也是在畫輔助線。

第四步我們接著用實時上色工具，將我們需要的部分提取出來，這里實時上色工具其實就是充當了馬克筆的作用，大家可以想象一下，這樣比較好理解。

畫好其中一個部分了，剩下的我們直接旋轉 120 度復制出來就可以，這里也是軟件操作的方便之處，比在紙上快多了，容錯率也高。

旋轉之后我們發現左半邊部分黑色會大出來一塊，所以我們需要取消編組后，將這個部分單獨置于底層，就可以了。

繪制這類 LOGO 的核心要素就是畫好輔助線，同時特別鍛煉人的思維和創意能力，它更像一件數學與美術結合的藝術品，當你成功完成之后，一定會成就感滿滿。

這一趴給大家帶來的是蘋果 2022 發布會 LOGO 中多層彩色混合漸變設計小技巧。既然大家都是即將擁有 iphone16 的人，那實時掌握自己手機的未來動向也是必須要做的事情。來吧！學起！

第一步肯定是要先畫好基本造型，不管是蘋果也好，是梨也好，造型畫不好，再好看的漸變也救不了你??！

然后我們先給它添加漸變色，這個大家應該都會。

接著我們需要給它添加一個描邊，這里要把透明度模式由正常改為柔光，并適當降低透明度，這樣外輪廓不會過于生硬，能夠更好的與圖形漸變進行過渡。

到了最關鍵的一步，我們將圖形向內縮小復制一個，給它填充上黑色，然后用混合工具將兩者進行混合，就可以得到一個由外向內逐漸消失的漸變效果了。

然后我們選擇比例縮放工具，向內縮小 80% 并復制出來，接著按 CTRL+D 重復復制即可。

其他幾個蘋果只需要更改相應的漸變配色就可以啦。

身體做完了，上面的小葉子也是用同樣的方法就可以搞定了，右下角另一個版本的用相同的做法也同樣能夠實現，但是想要完全還原它的投影效果可能要用到 AE 插件來完成，這里挖個小坑，感興趣的同學可以嘗試一下。

東京奧運會作為史上極具爭議的一屆奧運，帶來了不少熱點和話題。相較于它鬼畜的開幕式和一些莫名其妙的的比賽細節，它的 logo 卻實實在在的堪稱頂尖硬貨。由很多很多不規則的小方塊堆積而成，看似瑣碎無章法，但其實擁有極強的數學邏輯和藝術美感，下面我們就來看一下它的設計過程。

看到這個圖，是不是就能瞬間明白一些東西了？原來確確實實是有規律的，所以我們只需嘗試畫出其中一個部分，剩下的重復復制即可。

先畫出一個十二邊形，然后復制一個旋轉 90 度，將它們進行居中對齊，這里需要手動調整一下大小，保證里面的頂點對齊到外面的邊上，中間我們畫一個小圓，方便后面找到中心點。

這一步我們先在最上面畫出三個菱形，具體操作如圖。

然后再找到中間部分，一樣通過已經存在的三角形來進行旋轉 180 度復制，之后合并出新的菱形。

和之前一樣的手法，一樣的配方，繼續畫菱形…

繼續拼貼菱形，不過新加入的紅色部分和之前的黃色部分是重復的，所以我們直接復制過來就可以了。

繼續增加紅色部分菱形，具體操作步驟如圖。

右邊再添加最后一塊菱形，這一部分就算完成了！

下一步我們需要找到各個邊的中心點，將它們進行連接，這里給大家安利一個比較常見的小插件（百度搜索 Ai 插件很多下載地點，由于版權問題就不直接分享了）里面的等分路徑可以快速幫你定位到線段的中心點。另外里面還有很多其他的野路子，大家可以自己慢慢玩。

找到中心點之后（如上圖左）就可以將它們分別連接起來，畫出方塊！如果說之前的幾步完全不知道在干嘛的話，那么到這一步是不是有種豁然開朗的感覺？

后將畫好的部分繞中心旋轉一圈，再刪除掉外輪廓線，終于完成了…頭發掉了好多…向大師們致敬，salute！這個方法其實也是平面構成中的一種，大家可以跟著自己做一遍，一定會有自己的收獲。

Okkkkk，那么今天的教程到這里也就結束了，不知道你們能攻克到第幾關呢？臨摹不是目的，學會舉一反三才是最重要的。覺得意猶未盡的朋友抓緊跟著下方視頻版本再來溫習一遍??！總之，是很感謝今晚的相伴，感謝三連支持，朋友們，giao 辭！

▼ 點擊圖片前往原文觀看視頻版

原文地址：胡曉波工作室（公眾號）

作者：告白天

轉載請注明：學UI網》探索優秀LOGO背后的技法與思路！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

刷新在產品中屬于基礎功能，方便用戶獲取最新動態，是普及度較高的基礎功能之一。在設計表達時有系統級表達、自定義設計、多功能結合等，設計發揮的可控性較大。

今天黑馬哥就結合一些優秀的線上案例，和大家聊一下關于產品刷新設計的千奇百態，希望拋磚引玉，和大家一起進步。

分享目錄

一、關于刷新設計

二、刷新的設計形式

三、線上優秀案例分析

四、總結

一、關于刷新設計

在產品中刷新對于用戶來說并不陌生，是經常使用的基礎功能，便于用戶獲取新動態。在一些可以提供內容更新的產品中，刷新獲取內容變動是較為常見的形式。

大家都習慣將刷新稱呼為下拉刷新，其實刷新的動作不僅限于下拉手勢交互，也有產品采用單擊和上滑等手勢交互實現刷新動作。比如一些產品在滑動瀏覽內容時，底部標簽欄首頁圖標會變為刷新的操作，通過點擊實現頁面內容的刷新；也有產品在上滑頁面時實時加載完成刷新，就像很多影視類產品或者瀑布流設計的產品。

刷新動作不僅可以滿足用戶的求知欲，也能通過源源不斷的內容增加用戶黏性，提高用戶的使用體驗。

二、刷新的設計形式

簡單的刷新動作已經不是簡單的設計了，在產品設計師的創新中呈現出了眾多的優秀案例，下面為大家梳理一下不同的設計表達形式。

2.1、系統級表達

系統級表達是采用系統默認的一些處理形式，類似于花瓣循環的動態形式，屬于比較常規的表達。也有很多產品采用系統級形式，用戶理解度較高，設計創新的角度來說欠缺一些，表現形式比較生硬。

2.2、情感化文案表達

為了帶給用戶更有溫度的設計，除了在圖形層面進行情感化設計發揮，在文案上面也可以更加情感化。有產品使用俏皮可愛的話術，每次用戶刷新都呈現不同的文案，與用戶產生情感共鳴。

2.3、動態形式結合

刷新的動態表達形式非常普遍，圖形動效和動作演變等，能夠體現出加載的動作。動態形式結合可以使得趣味性更強，動畫演變的過程也能降低加載等待過程中的焦慮感。

2.4、IP 形象結合

IP 形象結合到 UI 場景中不僅可以強化品牌感，也能帶來更加情感化的體驗。IP 形象結合到刷新設計中，伴隨著動態演變，以此來體現加載的過程。設計形式動感化，趣味性強且感官體驗較佳。

2.5、品牌基因結合

立足于品牌做設計，品牌感可以帶來差異化的設計表達，也能提高用戶對品牌的記憶度。很多產品將品牌 LOGO 圖形、輔助圖形、品牌字體、品牌風格特征等融入到刷新設計中，帶來差異化的刷新體驗。

2.6、業務屬性結合

根據業務特征設計刷新圖形，讓用戶在刷新的過程中感知產品的業務屬性，也是強化記憶點的有效形式。

2.7、多功能結合

刷新設計更多的還是為了給用戶提供更多動態內容，除了這個底層需求以外，也有產品結合了多功能設計。比如下拉刷新到一定距離可以激活“二層樓”，進入活動空間或者其他功能模塊，也有結合瀏覽記錄等展示。多功能結合賦予了刷新更多玩法，在有限的資源空間發揮更多操作價值。

2.8、其他設計形式

隨著體驗的重要性升級，產品設計師會在更細微之處探索出更優的解決方案，做出差異化的體驗設計。而刷新功能也將會呈現更豐富的設計，從感官層面帶來更多視覺感的表現，從體驗層面結合更多輔助功能或者業務，發揮更多使用價值。

三、線上優秀案例分析

通過以上的梳理我們對刷新設計有了深入的了解，下面通過一些優秀的線上案例來進行分析，輔助大家掌握更多差異化的設計表達。

3.1、情感化的文案設計

刷新除了在圖形設計和動效層面發揮以外，多功能結合和文案設計也是差異化表達的方向。文案提示的設計相對比較特殊，通過不同的文案來打動用戶的體驗。

喜馬拉雅 APP 每次下拉刷新時，都會顯示不同的文案內容，有功能引導的提示文案，也有與用戶共鳴的溫馨提示等。情感化的文案設計讓刷新更有溫度，不失為一種差異化的功能設計探索。

3.2、動態化 IP 形象

針對下拉刷新這一常規操作，設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作，被很多產品設計師所采納。

美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。

3.3、刷新帶來美食誘惑

在完成刷新功能屬性的同時，還能將產品的屬性或者服務賣點強化出來，賦予了常規操作更多的功能價值。

麥當勞在麥麥商城欄目的下拉刷新設計中，采用漢堡形象結合層級動效進行表達，讓人眼前一亮。動效拉長的漢堡不僅體現出份量感，激發用戶的食欲；漢堡形象就十分麥當勞，展現出品牌關聯性。

3.4、趣味化 IP 形象

IP 形象結合到刷新設計中的案例非常多，不僅可以帶來情感化的體驗，也能增加功能操作的趣味性。半次元在下拉刷新時不僅結合 IP 形象，還通過下拉的程度將形象拉長，最后再配合表情和動態營造出趣味性。

3.5、動態 IP 完美結合

轉轉的 IP 形象頭部的轉動條是其特征所在，在下拉刷新過程中完美的結合了轉動條，還伴隨著裝飾符號散開的效果。不僅貼切的結合了 IP 形象的特點，裝飾元素的動態效果也強化了氛圍感，非常符合產品的屬性，是一個不錯的刷新設計案例。

3.6、品牌化路徑動效

刷新設計中采用路徑動效的表現形式比較多，主要集中在圖形路徑動效和品牌文字路徑動效，圖形通常是品牌 LOGO 為主，這一類比較適合圖形趨近于線性的表達中。鏈家 APP 的下拉刷新就是 LOGO 圖形進行路徑動效，完美的匹配了圖形輪廓，動效的流暢度也比較自然。

從品牌層面著手于刷新設計，如果放棄圖形層面的元素選擇，品牌字體的選擇也是一個思路。得物 APP 將品牌名稱的字體直接運用到刷新設計中，以路徑動效的形式進行表達，最終將筆畫打散散開。設計表達依然延續了品牌感，也區別于其他產品的刷新設計，在差異化方面呈現出了自身的品牌特征。

3.7、一路騎行的芒果崽

芒果 TV 的下拉刷新設計結合了吉祥物芒果崽，下拉刷新的過程就是一路騎行的芒果崽。騎行的沿途中有眾多地標建筑的剪影，下拉不松手就會一直處于騎行狀態，下拉的反饋體驗度做得很好。

3.8、漫步的卡通形象

利用動態卡通形象作為刷新設計案例較多，特別是行走和跑步，這一類都比較貼合刷新這一動態表達。比如在少年得到 APP 中，在下拉刷新過程中以一個背著書包漫步的卡通形象進行表達，流暢的動效完美的呈現了學生放學或者上學時，背著書包漫步的場景。這樣的呈現方式不僅貼合功能含義，也能與用戶產生更好的情感共鳴。

3.9、業務化的 3D 圖標

友啥 APP 利用 3D 圖標進行循環切換代表刷新過程，帶有業務屬性的圖標不僅可以直觀的突出產品特性，3D 圖標化之后視覺感十足。圖標切換帶來的動效流暢自然，匹配刷新動作的差異化也非常明顯。

3.10、刷新動作下的多功能結合

刷新已經不局限于內容更新這一單一需求，一些電商類產品也賦予了刷新多功能的屬性，帶來更多樣化的操作體驗。

比如淘寶 APP 首頁下拉刷新時，短距離下拉依然屬于刷新范圍，繼續下拉則會提示釋放進入淘寶二樓。在保持刷新基礎功能的前提下，融入了多功能場景，開發出功能或者活動的全新曝光入口。

在商品詳情頁時下拉則無法提供刷新服務，為了給予更好的反饋設計，下拉動作便會顯示我的足跡。不僅可以在用戶習慣性操作時給予反饋，足跡的提供也更方便用戶做出選擇。

同一個產品也并非只能呈現出一種刷新設計方案，不同的業務場景可以使用不同的表達。淘寶 APP 里面便根據場景的不同提供了多種刷新方案。常規界面的刷新便以品牌字“淘”作為設計出發點，刷新的過程以動態形式表達品牌字，簡單粗暴的傳遞出品牌感。

3.11、結合 Slogan 完成刷新

刷新不僅只是內容的更新，產品設計中呈現出更豐富的表達，比如輔助傳播活動、宣傳品牌形象和 Slogan 等。產品設計師都在賦予單一功能多重使命，帶來豐富多樣的使用體驗。

58 同城首頁在下拉刷新時，除了體現刷新動態以外，也展示了 Slogan “讓生活簡單美好”。借助刷新入口的曝光度，更快的將產品的定位傳遞給用戶，增加用戶對產品的好感度。

3.12、保持格調一致的設計

很多小眾的產品在設計上面呈現出比較有格調的設計，區別于常規的氛圍營造，設計風格更加簡約大氣。

屋顏 APP 整體的設計風格就屬于比較簡約文藝，在下拉刷新的設計中也保持了這個風格特征。以生活物品演變出的線形圖標體現刷新的過程，整體的過度和銜接也恰到好處。

3.13、探索式的刷新設計

刷新設計除了圖形、動效、文案等層面發揮以外，背景層發揮的案例相對較少，除了配合傳播性質的設計。

AcFun 在下拉刷新時，背景層設計成類似于宇宙空間的插畫場景，刷新的過程就像探索一樣。配合卡通形象左顧右盼的動效，帶來的感官效果也是非常不錯的。

關于刷新設計的優秀案例很多，這里就不一一例舉了，以上案例僅作為拋磚引玉形式的引導。大家根據這個框架多多體驗產品，總結更多的優秀案例。

四、總結

刷新設計作為產品中使用較為頻繁的基礎功能，與用戶的接觸也是非常密切的，設計的重要性因此不言而喻。無論是突出品牌感、趣味性、差異化還是強化感官層面的體驗，或者是多功能結合等，都是產品設計師重點發揮的模塊之一。

本文以案例分析為引導，為大家梳理了刷新設計的形式與思路，希望可以拋磚引玉，帶給大家更多的設計靈感。總結觀點屬于個人理解后的呈現，如有欠缺大家選擇性吸收和修正補全。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》刷新設計的千奇百態（UI設計）

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在UI設計中，95%以上的應用會涉及到頭像元素，例如消息列表、個人中心/主頁、會員服務、評價、排行榜等功能版塊，明明用昵稱或幾個文字就能說清楚的地方，偏偏設計了一個頭像、而且還占據該信息組的主視覺。那么，看起來簡簡單單、或方或圓的小頭像到底還有哪些我們不知道的細節知識，今天筆者就通過這篇文章跟大家聊聊頭像元素的方方面面，希望對大家有所幫助，歡迎共同探討，相互交流。

一、頭像在UI界面中的作用

1. 多賬號區分

出于特殊原因，很多銷售、客服等職業，在同一個應用中可能會存在多個賬號，需要確認自己當前登錄的是哪個賬號時，查看頭像就是最好的區分（需設置不同的頭像）方式，當然也有一些非正常需要的用戶有另外的小號，相信頭像也會有所區別，其作用這里不便多說，避免「社死」。另外，如QQ登錄、微信賬號切換頁面，也會利用突出的頭像來快速區分賬號信息。

2. 凸顯自身形象

某個用戶使用了一張成熟穩重、端莊得體的形象照作為個人頭像時，在大多數情況下，這個人一定不是個動不動就爆粗口的鍵盤俠或網絡噴子，雖然“隔著屏幕你又打不到我”，但在發表內容時會注意自己的措辭，潛意識的維護自己的網絡形象（頭像），這就是現實與網絡中頭像的人格映射。當碰到匿名社交時，為自己戴上面具后就會變得肆無忌憚，與前者相比，至少不再那么約束。

3. “面對面”溝通代表

很多時候，不管是跟好友聊天、還是在不同的應用中留言評論，有頭像的用戶總感覺是在進行平等交流，這么說感覺很抽象，下面舉個例子：

如果是一個單身男性，當社交應用中有人加好友或請教問題時，針對有美女頭像的用戶，其響應效率、質量都會比其他頭像的用戶要高，這是不爭的事實（別杠，我們不談個例），這也說明自己時刻都在注意在對方心中的形象，總擔心被對方看“穿”。

二、各場景中的頭像類型

1. 默認頭像

非強制登錄的應用，切換到個人中心時，一般會有一個默認頭像占位，可以是人物形象剪影或品牌吉祥物，以確保用戶在登錄之前保持頁面的完整性。另外，即便用戶登錄后有上傳自己的頭像，但遇到網絡延遲、頭像加載失敗、匿名操作等情況，系統默認頭像都可起到臨時替補的作用。常見的默認頭像有灰色、彩色兩種色彩模式，其二者各有利弊。

1）灰色頭像

灰色頭像色彩感較弱，可能會導致視覺不平衡，打破畫面的美感，但也正好通過這一絲的不和諧，用一種明顯且突兀的方式提醒用戶去更換頭像，強迫癥患者幾乎無法抵抗。

2）彩色頭像

絕大多數是結合品牌色、吉祥物等進行展示，還能起到豐富畫面、增加趣味性的作用，相比灰色頭像則更加生動，不管用戶是否登錄、有無更換頭像，都能保持界面的視覺平衡，唯一的缺點可能降低用戶更換頭像的欲望。

2. 系統推薦頭像

1）用戶選擇

大家早期接觸的QQ就是最典型的案例，系統提供了多種頭像以供用戶選擇，甚至將部分頭像納入了QQ會員功能，當用戶沒有合適的圖片作為頭像且難以抉擇時，使用系統推薦的頭像不僅能降低用戶的選擇成本，還能滿足部分個性化需求。如果默認頭像跟產品相關聯，也可作為品牌傳播途徑，兩全其美的選擇。

另外，最近很火的匿名社交應用Soul 只能使用系統頭像（可自定義調整），不允許上傳圖片，這源于平臺希望用戶拋開顏值，通過不同的個體審美、價值觀等進行心靈交流，找到真正的靈魂伴侶。同時，因為龐大的用戶量，圖片是否合法、質量的好壞帶來了一系列的監管問題，使用系統推薦頭像，在很大程度上能降低圖片管理成本。

（PS：強制使用系統頭像跟產品定位有著絕對的關系，并非拍腦門決定）

2）系統選擇

注冊成功后，系統會隨機匹配個人頭像，相比用戶自己在列表手動選擇，則多了一份神秘感與期待感，讓頭像的設置變的更有趣，例如小紅書、B站等應用。

3. 文字頭像

常出現在移動辦公類應用中，由系統自動處理，基于OA類應用社交屬性并不強，大多用于內部團隊工作中的溝通交流，例如釘釘、紛享銷客、飛書等。為了更清晰的獲取對方個人信息，這類產品頭像更傾向于上傳自己的真實照片（部分企業強制），在用戶未上傳照片的情況下，系統會提取中文名字中的后兩個字（兩個字的全名顯示）、英文名字前兩個字母作為個人頭像使用，方便團隊成員更好的辨認。

4. 群組頭像

只出現在群聊中，由多個群成員的頭像組合而成，不同的應用對頭像上限的設定不同，最為常見的是4個、9個兩種。群組頭像大多數不支持自定義上傳，會根據當前群成員的數量（1-4人、1-9人）進行宮格排列，且不會超出設定的上限，例如釘釘群、微信群、QQ群等。

5. 用戶頭像組

在部分應用場景中，產品將多個用戶頭像堆疊組合在一起，通過“羊群效應”引導后續用戶產生從眾心理，以提高轉化率，例如有多少用戶已購買、多少用戶已中獎等。另外，視頻平臺的直播間也會將排名靠前的用戶頭像組合排列并展示出來，吸引其他用戶關注。

6. 歷史頭像

1）同平臺

QQ會將用戶之前使用過的頭像搜集起來并單獨提供一個入口，用戶需要換頭像時，可再次選擇使用，雖然重新使用的幾率并不高，但也不失為一種情懷，用戶能清楚知道頭像更換的歷史軌跡，滿滿的回憶感。

設置微信頭像時，也可選擇使用上一張頭像，方便用戶設置新頭像后反悔，可以理解為撤銷本次更換操作，如果需要對圖片進行裁切，也方便用戶跟上一張頭像反復對比。

2）跨平臺

第三方登錄的標配，用戶無需重新編輯，就可以無差別繼承第三方賬號的頭像、昵稱等信息，節省了大量的時間及操作成本，例如微信、QQ、支付寶、微博授權登錄等。

7. 其他頭像

除了上述頭像類型外，還有如視頻頭像、GIF頭像、輪播頭像等，這些并不常用，了解一下就好。另外就是之前刮起的一陣虛擬形象社交風潮而爆火的捏臉頭像，極具針對性的新型頭像類型，如果感興趣，可以去下載Soul、崽崽APP體驗，這里不多做贅述。

三、頭像狀態與附加操作

1. 不同的用戶狀態

用彩色頭像和黑白頭像來區分用戶是否在線是最直觀的表現方式，例如打開QQ好友列表，對方當前是否在線一目了然。除此之外，QQ的在線狀態還延展了多種子級狀態，例如：離開、忙碌、聽歌中、請勿打擾…等，設置成功后，會以小圖標的樣式重疊在頭像右下角，好友看到后能清晰感知當前狀態下是否可以立即聯系你。抖音采用了較為簡單的方式，頭像右下角有綠色小圓點顯示表示在線，沒有則代表離線。

2. 事件通知

常用于非社交類應用（社交應用有更專業的處理方式）的未讀消息/事件通知，顯示在頭像右上角，點擊查看后會消失?？稍O計不同的樣式以體現視覺的強弱關系，對用戶產生不同程度的引導。

• 弱提示：小圓點提示，填充紅色或主體色，提示程度較弱；
• 中等提示：白色圓形+數字提示，數字色彩可以是紅色或主體色；
• 強提示：圓形白色描邊及紅色填充+數字反白，較突兀的提示方式。

3. 掛件/裝飾

很多掛件只是純粹的裝飾品，能起到美化、娛樂、趣味性的作用；增值服務、特權服務、認證類的標識更是一種身份的象征，體現出榮譽、尊貴的感覺；有小部分應用將用戶的勛章標識重疊在頭像某個位置，時刻給用戶帶來一種堅持完成任務之后的成就感，滿足其虛榮心的表現。

4. 交互操作

在很多應用中，個人中心頁面的頭像區域隱藏了設置功能，點擊后會進入到個人主頁、個人信息頁或更換頭像頁面。還有一些無實際功能作用、純趣味化的交互，例如雙擊微信好友的頭像“拍一拍”、拖動即刻個人中心頭像會出現一個紅心等，不同程度的給用戶制造意外驚喜。

還有部分應用，在頭像右下角通過有明確指向含義的圖標引導用戶操作。例如在完成表單過程中需要添加頭像，上傳成功后，頭像右下角會出現刪除圖標；Soul個人中心頭像右下角增加了個性商城入口；QQ、即刻則通過相機圖標提示用戶點擊可直接更換頭像，這種引導性的圖標都相對較小，需要精準點擊，為避免無效操作，在不影響其他交互的情況下，請盡量擴大圖標熱區范圍。

四、方形與圓形的定義

雖然我們用過、研究過大量的互聯網產品，但也許真的沒怎么關注過頭像的形狀，以當前幾個主流的產品為例，QQ、抖音是圓形頭像，而微信、釘釘則是方形（圓角）頭像，如果真的要分出個勝負，那么很明顯，大部分產品使用的都是圓形。方形和圓形到底有什么區別？設計時該如何選擇？下面我們就一起來嘮一嘮。

• 方形頭像對照片的空間利用率更高、降低空間損失，圓形通過裁剪讓空間更平衡、看起來更精致；
• 方形對四角、中心點均可構成聚焦區域，使用靈活，圓形則邊界完美，沒有聚焦沖突，可突出核心；
• 古埃及曾認為圓形是神賜予人們的神圣圖形，因圖形邊界完美，能給人公正、信任感，但矩形卻能給人一種專業、穩定的感覺；
• 圓形被認為是活潑，方形則顯得比較嚴肅；
• QQ團隊曾給出答案，因產品定位就要是給人一種年輕化、活躍的感覺，且人的臉也接近圓形，裁切后更能凸顯人的臉部特征（看臉時代），明顯使用圓形更適合。微信設計師的說法是圖片本來就是方形（扯遠了），方形頭像能最大程度的降低圖片損失，而且微信的定位相對成熟，方形還能給用戶一種穩定可靠的感覺，更符合用戶習慣，如果一定要用圓形，將頭像處理成圓形即可，方/圓兼具；
• ……

說了這么多，依然不知道如何選擇，那么筆者將根據一些常用到頭像的三個模塊給你一些建議：

• 個人中心/主頁：如無特別需要，大部分情況下使用圓形，不會出錯；
• 消息列表/即時會話：根據產品定位、上述的參考比較后決定，沒有明確的要求，使用其中一種形狀后，在其他同等級頁面統一即可；
• 評論/交流區：直接圓形，沒有為什么。頭像本來就小，裁切掉無關信息會更聚焦。

五、頭像設置步驟

1. 頭像來源

用移動端設備上傳頭像時，來源主要為系統推薦、歷史頭像、從相冊選擇、拍照這幾種方式，電腦端因設備限制等原因，一般只有系統推薦和上傳本地圖片。

2. 上傳限制

上傳圖片時，一般會對圖片的格式（JPG/PNG/GIF等）、尺寸（寬*高）、文件大?。ǘ嗌貹B/M）作出限制，這些需要給予明確的提示，避免用戶因操作多次失敗而受挫離開，同時也能避免因用戶不知道平臺可使用GIF、視頻等頭像格式，而雪藏了產品的多元化服務。

3. 圖片裁剪

因圖片來源、拍攝手法不一，針對橫圖、豎圖，系統會貼著邊緣（避免壓縮/拉伸）先進行一次自動裁剪進行取方，然后用戶可自行調整大小，選取最佳位置。

4. 效果預覽

需要給用戶提供真實的效果預覽圖，避免用戶因操作失誤或對處理后的頭像不滿意再次重復整個更換流程。所見即所得，通過降低用戶重復操作的概率也是提升用戶滿意度的方式之一。

六、引導用戶上傳頭像

1. 文案引導

當產品要求用戶組做某件事情時，即便是為用戶考慮，也需要給予一個合理的理由，可使用趣味、情感化或鼓勵性質的文案引導用戶主動上傳頭像，例如社交類應用“一切都很完美、就差一個帥氣的頭像了”、“換個好頭像會讓更多人認識你”等?；蛘哂脩粼诰庉媯€人信息時給予鼓勵“恭喜你，只差最后一步了，換個頭像就十分完美了”。

2. 第三方授權

前面講到過第三方登錄的方式，相信這也是對懶癌癥患者上傳頭像最直接粗暴的方式了。

3. 納入注冊流程

部分社交類應用將上傳頭像作為注冊流程中的必選步驟，任何用戶都無法跳過，切記這種方式非必要不可濫用/亂用，這相當于對用戶注冊增加了門檻，任何產品每多一點操作成本，都會有一批用戶離開，需根據產品定位以及強制上傳頭像的重要性來決定，避免得不償失。

七、結語

「無頭像不社交」，在設計界面之前，設計師應該考慮清楚產品社交屬性的等級，再來決定頭像在界面中的權重、占比，至于如何使用，還需根據產品的實際情況并結合用戶頭像的基礎知識合理的做出判斷。

「麻雀最小、五臟俱全」，頭像看似一個很簡單的UI元素，但在設計過程中需考慮的知識點還是有很多，這就需要我們平時不斷的積累、探索，并多多總結，再融合到實際的UI設計中，做出有理有據的設計。

最后，分享一個圖片轉插畫頭像的工具：https://newprofilepic.com，非常好用，如果感興趣就試試吧！

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》頭像篇 | 幫你快速掌握頭像基礎設計知識！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、表單的構成

1、表單的組成

按照原子理論，表單應該屬于一種“組織”。包括了以下組成部分：

• 標簽

主要是用來說明表單數據域的含義和填寫內容；當標簽無法明確引導用戶或者具有一定的內容限制時，需要增加幫助或者說明信息，方便用戶更好地填寫內容。

• 表單數據域

通常是數據錄入型組件，需要用戶以填寫、選擇的方式完成內容輸入。

• 操作按鈕

用來提交、保存數據信息，完成表單操作。

2、表單的類型

在B端產品審批流程中，不同的用戶會面對不同的表單形式。

對于流程發起者，需要填寫內容后提交審批，這類表單偏向于任務操作，也是我們最常見、最典型的表單形式。

而對于審批者而言，表單主要是傳遞信息，審批人依據內容做出審批決策，這類表單偏向于信息展示。由于審批類的表單相對簡單，所以我們將主要的精力放在操作型表單上。

二、表單的設計關注點

1、表單布局

表單存在兩種布局方式：單列布局和多列布局。

• 單列布局

單列布局信息自上而下，用戶視覺動線更加穩定，橫向的視覺跨度更短。所以信息閱讀和填寫的效率更高，是首選的布局方式。但是在長表單場景下，用戶需要滾動屏幕才能查看完整的表單信息。

• 多列布局

多列布局下，一屏可以容納更多信息、屏效更高，有效地避免出現滾動條。對于高頻的長表單操作，采用多列布局的方式，可以減少滾動條帶來的用戶困擾。

當然多列布局表單信息密度也更大。一般為左右兩列布局，列數最好不要超過2列，否則會影響用戶的填寫效率。

常見的搜索表單大都與表格寬度一致，可以容納3列或4列。主要是搜索關鍵詞與表格一致，業務屬性不強，并且表單項沒有強制性，用戶可以自由填寫，不會存在漏填的情況。采用多列布局對用戶操作影響不大。

2、標簽排列

標簽排列方式歷來都是設計師比較糾結的問題，常見的標簽有3種：左對齊標簽、右對齊標簽、頂部標簽。另外還有內聯標簽、浮動標簽等形式。

先看閱讀效率數據。

2006年，有專家就對3種對齊方式進行了眼動儀數據分析。研究結論表明，頂部標簽移動到輸入框效率最高，只要 50 毫秒；右對齊標簽次之，需要 240 毫秒左右；而左對齊需要消耗“500 毫秒”，效率最低。單從效率上來說，肯定首選頂部標簽。但是面對不同的場景，需要選擇合理的排列方式。

• 頂部標簽

（圖片來源于網絡）

頂部標簽的排列方式符合用戶自上而下的瀏覽習慣，標簽與輸入域聯系更加緊密，視覺橫向移動距離小。所以信息讀取的效率更高。

另外標簽單獨占據一行空間，信息擴展性更強。問題也顯而易見，標簽擠占了縱向空間，會增加表單的總體長度。

所以我個人認為，頂部標簽更適合信息量不大、簡單的表單場景。例如登錄、注冊等。

• 右對齊標簽

（圖片來源于網絡）

右對齊布局拉近了標簽與表單域的距離，并形成固定間距。但是由于標簽的長度不同，視線起始點會發生跳躍，從而影響用戶的閱讀效率。

不過對于普通表單，右對齊標簽可以兼顧效率和頁面空間，因此在B端產品中應用比較廣泛。

• 左對齊標簽

（圖片來源于網絡）

從整體性上來看，左對齊視覺結構性更強，有利于標簽信息閱讀。用戶視線不會受到輸入框的干擾，可以非常順暢地掃視標簽，方便用戶快速搜尋必填項。

但是由于標簽長度不一，為了保證所有標簽都可以正常顯示，會增加標簽與表單域的間距，導致信息讀取效率偏低。

左對齊標簽可以用在復雜場景中，減緩用戶的填寫速度，尤其是那些有大量可選輸入框，結合必*標識符快速定位必填項?；蛘咴诟呒壴O置的場景中，字段信息對用戶相對比較陌生時，讓用戶可以仔細考慮表單中的每個信息項。

• 內聯標簽

內聯標簽是將標簽放在輸入域內顯示，標簽代替了占位提示文字，告訴用戶應該填寫什么內容。常見于注冊登錄頁，如下圖。

內聯標簽解決了標簽文字過長的問題，并且可以降低表單的視覺信息量。

但是這也帶來了另一個問題，就是內置的標簽信息會隨著內容信息輸入而消失。通常僅用于登錄頁面，因為用戶對登錄頁的內容模式已經非常熟悉了，學習成本很低，不會帶給用戶困擾。

如果用在其他類型的表單頁面，就容易讓用戶產生疑惑。特別是出錯的場景下，信息提醒不到位，很容易增加用戶的理解成本和使用難度。

• 浮動標簽

浮動標簽是指用戶在錄入時，內部標題（輸入性提示信息）進行浮動位移。這在一定程度上彌補了內聯標簽消失的問題。不過需要額外的開發工作量，并且拓展性不強，不適合作為主要的標簽形式應用在業務表單中。

一個系統中最好采用相對一致、穩定的標簽排列方式，否則頻繁變化的對齊方式也容易讓用戶無所適從。

三、表單的存在形式

表單信息量可大可小。有的可能只有一個字段，有的可能是包含多層卡片內容，甚至是相互嵌套。不同的表單信息有著不同的存在形式，梳理歸納后，主要有以下5種。

1、即時表單

常見于表格或者詳情頁面，通過編輯或新增功能觸發。即時表單與原有內容保持一致，更強調操作的快捷性。

2、浮層表單

同樣是一種輕量化的表單方式，一般用于定向修改特定內容。通常浮層空間較小，不用來承載大量的信息內容。另外浮層緊隨修改內容，操作效率更高。

3、彈窗表單

在抽屜組件出現之前，彈窗應該是最為常見的表單交互形式。相比頁面跳轉，彈窗操作成本更低，但是空間比較受限，應對大表單信息會有一定的難度。另外表單填寫時，可能會出現多層彈窗的情況。

4、抽屜

抽屜組件既可以承載較多的表單信息量，又可以和彈窗一樣在當前頁面完成操作，并且相對于居中彈窗，不會對頁面核心內容造成過多遮擋。因此在B端產品中應用越來越廣泛。

5、頁面

頁面表單通常用于信息量較多的場景。一般會增加頁頭明確告知用戶在做什么，同時也要配置返回按鈕，方便用戶退出表單頁面。

以上就是表單基礎知識的解析。

下期我們來分析下表單設計的技巧~

原文地址：子牧UXD（公眾號）

作者：子牧先生

轉載請注明：學UI網》設計基礎(6): 表單基礎知識解析

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司