地理空間數據可視化 (Geo Spatial Data Visualization) 是近年來興起的一個熱門領域，越來越多的政府、企業青睞于通過這種強視覺的形式來展示政績與實力。市場需求的增長也吸引了越來越多的設計師投身于這個領域。而在這樣一個細分領域，也對設計師的能力提出了全新的要求。在該領域，我們團隊沉淀出一套固定且可復用的設計模式。
不同的階段，臨摹的目的不盡相同。一般來說，前期臨摹更多的是練習軟件、技法，后期練習別人的風格表達，綜合運用。所以，我把臨摹分為技法臨摹、半原創到原創 3 個階段，每一個階段沒有絕對的界限，都是在積累創意，完全是可以用到自己的項目中去的。
今天會分享一個我當年做臨摹練習并融入實際項目中的小案例。
大概是在 15 年左右，在網上看到錘子設計師設計的一個圖標，覺得非常驚艷，當時就想把它臨摹下來，這是當時臨摹的一個效果。
△ 原作
△ 這是我當時臨摹的圖
我在臨摹這張圖的時候，想達到的目標是能根據自己的 logo 色及文字，做一個半原創的設計。
然后實際練習中，不斷觀察原作發現有一些細節值得學習：
當時，對我來說，在練習的過程中有一個難點就是關于第 3 個細節水的紋理執行有些難度，因為其中包括了粗細變化、虛實變化、明暗變化等等，單純的用圖層樣式或者矢量去畫的話，難度都比較大。這個細節當時耗費了我不少時間，后面突然想到其實也可以用合成的辦法來實現，然后我去找了真實水紋的圖片進行疊加，很快就搞定了。所以，只要能達到效果，不能太過于局限某一種思路。
分析并完成這些細節后，就是你在做這個練習中學到的點，嘗試把它們學以致用。
記得當時在 360 時需要設計一套關于摩洛哥藍色小鎮的官方定制版主題圖標。從搜集的當地代表性的圖片中發現，多彩顏料是當地的一大特征，所以決定以染料為關鍵詞去畫一個圖標，又因為顏料本身自帶多彩的特點，所以以它為主題圖標就很合適了。
然后在思考這個圖標的時候，首先會應用參考圖中的配色，并結合染缸的造型做出了第一版的效果。
這個效果雖然是表達了那個意思，但缺乏亮點，聯想之前練習過水的技法表達（臨摹中第 3 點細節運用），正好可以利用水的紋理做下強化，這樣就優化出了第二版。
嗯，看起來感覺有了一些特點，但感覺缺乏細節，接著思考水除了有紋理高光，應該還會有邊緣高光（結合臨摹中第 5 點細節），所以在邊緣嘗試加了高光，增加體積感，做出水要漫出來的感覺。
如果只有這一層高光的話，細節度感覺還是不大夠，在之前的文章《如何從優秀作品中偷師，用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學到他們對于 1px 高光的使用（臨摹作用中的第 7 點），這里因為是液體的材質表現，所以增加一個高光點增加水的通透感。
到目前為止，似乎看起來已經差不多了，但考慮到現實世界中，溢出的彩色液體在透光性很好的情況下，也會對周圍環境產生影響，所以我在顏料設計的四周，配上對應的四種顏色的模糊投影（臨摹練習中的第 6 點）。
在思考下，在臨摹的圖標中為了使得圖標更加自然，作品中其實結合了很多真實世界中會發生的情況，比如水的折射，氣泡的比例，深淺等等，那對于染料來說，會有怎樣的真實情況發生呢？我當時想到一點是，染料在用的過程中其實很容易灑出來，所以圖標背板上現在太過于干凈了，增加一些細節能夠使得背板能夠跟主體物產生關聯，也更加自然。嗯，又是一個小細節。
最后，我們對比下第一版和最終版的效果，細節確實豐富了很多。
一張動態圖可以更加清晰的看到變化。
這次圖標的優化過程，我覺得有幾個要點對我來說印象深刻的：
圖標的風格可以是扁平的，但想要增加自然舒服的細節，一樣可以像畫寫實風格那樣仿照現實。你需要留心觀察這個世界，就算是一張照片中也能有非常多可以利用的細節。
碰到難做出來的細節，多想想有沒有更效率的辦法。比如在做水紋理的時候，一開始就想著完全靠鼠繪畫出來，結果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出來。
對于圖標來說，要注意其整體性。比如圖標中的主體物不要跟背景脫離，不要讓圖標背板只是作為一個容器，而要讓背板也成為圖標本身的一部分，這樣圖標的整體性會更好。
臨摹的過程中，一定要多分析，多記錄自己覺得是細節的點。每一次記錄，都可能是將來設計時提升細節的靈感來源。
以上內容只是我在日常練習中應用到實際項目中的一個小案例，其實還有非常多的靈感想法都來自于你平時做的練習，關鍵是要多動手，多總結，才能增強自己對細節的把握能力。
文章來源：優設網 作者：彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近負責的新項目快上線了（感覺我好像一直在做 0-1），給大家總結了5個一定會遇到的新項目盲區及最新的解法，希望能幫助大家在交付開發前就順利完成設計輸出。
2020 年 4 月后，我們在設計 iOS 登錄界面的時候都知道必須加上蘋果官方強行要求的 Apple 賬戶登錄按鈕，但關于這個按鈕的設計規范其實有比較硬性的規定，沒有注意的話到了開發還原的時候就容易踩坑。
在國內的 iOS 登錄設計中通常突出的主流登錄方式是“微信”，手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現。
蘋果官方是允許對 Apple 賬戶登錄按鈕進行一定的自定義的，其中就包含將其弱化為一個圓形的圖標按鈕，只是圖標與圓形按鈕的大小比例是官方固定的比例（這個大家直接下載官方提供的圖標，它是自帶留白的區域的，保持圖標與高寬一致就符合要求了）。
而國外的 iOS 登錄設計中通常沒有那么多的第三方登錄方式并存，主要的“Facebook”與手機登錄通常會與 Apple 賬戶登錄按鈕同一級出現在界面中。
這個時候需要特別注意的是，蘋果官方對于這種大按鈕的限制主要在于 3 個部分：
剩下的按鈕樣式，比如顏色和描邊也非常有限，只可以使用白色填充黑色描邊與純黑色底這 2 種。
想了解更多具體內容，可以參考官方貼：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
還記的早幾年做安卓項目的時候上架應用商店的啟動圖標輸出還是和 iOS 差異不大的，基本就是尺寸換換。這次輸出啟動圖標，被安卓的開發大大告知，安卓可以出這種帶動效效果的啟動圖標了，它的原理和效果，如下圖：
實現這個效果的設計配合輸出也很簡單，只需要整理一下的具體啟動圖標輸出就可以：
1. 啟動圖標（前景，不帶背景的）-108dp（324px）
當然以上僅針對純色背景，可以與 logo 主體輕易分隔的啟動圖標。如果是混為一體的話就需要調整輸出方式為以下：
想了解更多具體內容的鐵汁，戳底下官方傳送門：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
這次新項目又遇到了開發中改稿的問題，大部分都因為全屏的背景圖切圖大小問題。
個別全屏視覺的界面，比如閃屏、登錄頁、音視頻語音等等，我們通常設計時不考慮切圖的大小問題就會比較放飛去設計。
但實際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右，就算把壓縮率提到 80%+（市面上大部分壓縮軟件的壓縮率都很有限，比如大家常用的 tinypng、pp 鴨等），就算你重復壓縮，也有至少 200 多 KB，遠遠超出開發 100k 以內的切圖大小限制。
所以不得不要求我們在輸出格式的時候拋棄 png 格式，啟用 JPG。
不過實際設計時候我們可能仍然會遇到不能用 JPG，必須用 PNG 格式的情況（透明度蒙層），那么建議大家可以嘗試以下 2 個小技巧：
最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會不會超標嚴重（盡量控制在 100k 以內），不然無法落地再好看也沒有用咯。
目前關于移動端界面里個別小動效的導出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。
Gif、逐幀、包括前幾年流行的 Lottie 大家應該都比較熟悉了，這里稍微科普 2 個陌生一點的格式：
目前我覺得性價比最高的就是 webp，它的優勢主要在于：
唯一的 2 個問題在于：
我度娘過一些導出 webp 的方式都不是很好用，問了我司的動效設計師，推薦一個比較簡單靠譜的方式分享給大家：
1. 先從 AE 導出逐幀圖（記得需要循環的動效做好循環）
不知道如何到逐幀圖的看這里：渲染→渲染設置→格式→選擇“PNG”序列→導出即可
2.下載 isparta
3. 直接將 AE 導出的逐幀圖文件包拖到 isparta 里導出 webp 格式（可選）
設計交付的協同平臺現在市面上很多，很多大廠也有自己內部的協同平臺來承載設計交付，俺們豬廠用的叫 dbox（非常滴不好用），在強推之下開始申請經費改用 Figma 了。之前為了更換協同平臺，把交付的協同平臺都做了一番調研，這里給大家直接看表格吧。
看完圖大家就會發現除了 Figma 大家的使用情況不會差很多，差的主要還是錢?？偟膩碚f的建議就是，如果已經從sketch改用Figma的土豪團隊就可以直接分享Figma文件鏈接給開發搞定切圖標注以及文件存檔這2件事兒了。
如果還在用 sketch 和 XD 的鐵汁，交付型的協同平臺我個人比較推薦 Zeplin，雖然有的人會說它服務器在國外很卡，我覺得其實還好吧，同時 Zeplin 近幾年還解決了 Win 系統適配的問題。
然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的，因為高清度、流暢度到美感幾乎都比較完美。一直到我發現了它居然是個完全開放的交付協作平臺，也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項目文件，瞬間安全系數降為 0。作為一個明顯對標企業級的協作平臺這么瘋狂的植入社交功能，到底是企鵝的社交基因太強大還是怎么肥四？
文章來源：優設網 作者：Nana的設計錦囊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
國內互聯網近幾年發展迅速，在很多方面都超過了一些其他國家互聯網的發展階段。隨著國內互聯網產品競爭日趨激烈，很多企業都把目光投向了用戶量龐大的海外市場。而疫情對于全球經濟的影響更是加速了海外市場的數字化進程。據 Sensor Tower 數據顯示，2020年Q1全球移動互聯網應用下載量達336億次，同比增長了20.3%。
產品出海的第一道屏障就是語言。但若想打造一款能夠適應海外市場的產品，只完成不同語種的翻譯是遠遠不夠的。在產品設計的過程中，我們需要考慮兩個方面：國際化與本土化。
國際化+本地化的策略，也就是“glocal—global+local”，指的是結合國際統一和地區差異。這種策略在統一的前提下，通過靈活配置保障地區的個性化體驗，既能滿足統一維護提升產品效率，也能保障當地用戶的特殊訴求，是一種性價比很高的設計方案。
產品設計的國際化
產品的國際化，即全球化。國際化的通用設計能夠為產品打造一個全球統一的形象與內核。
Chrome的不同地區首頁功能與樣式基本一致
一套通用的設計系統和設計規范，既可以幫助我們在產品的國際化設計中 樹立產品調性，又可以保證操作的 一致性，同時提升設計的 高效性。阿里旗下面向東南亞市場的購物平臺Lazada在開發之初，通過使用Fusion Design的設計系統，大大節省了設計的時間。在如此復雜的電商業務場景之下，整套產品的設計最終僅3靠個設計師就完成了。
設計系統對產品研發成本的影響
除此之外，一致的內核也能夠幫助企業在全球范圍內建立起統一的品牌形象，增強 品牌的識別度與知名度。
產品設計的本土化
想要讓產品在某一個市場上站穩腳跟，對于本土化的思考是必不可少的。本土化的核心是 因地制宜，根據地區差異相應調整產品策略。
UC瀏覽器在不同地區的首頁布局
為什么說本土化對于產品的出海非常重要？其原因并不難理解。Charles Eames說過，“Recognizing the need is the primary condition for design.” 任何設計的本質都脫離不開對需求和問題本身的理解。好的設計是在對需求、動機、心理、環境等相關因素有了充分了解之后所產出的解決方案。
針對海外設計研究的思維框架
在考慮產品的本土化時，我們需要關注到用戶的需求是什么、是否仍然成立，用戶的行為模式是什么樣的，以及整個外在社會物質、精神環境等方面的狀況。螞蟻金服團隊通過海外本土化設計實踐，總結出了一套“環境-人-需求“的研究框架，列出了可以去調研的多個方面。
螞蟻金服-“環境-人-需求”出海產品設計研究框架（做了小部分修改）
需求（價值）
首先，我們要做的第一步判斷就是原來的 用戶需求是否成立。產品在原市場想要解決的問題，是否在新的市場仍然存在，即我們的產品是否 有用？這個問題的答案決定了原先的產品是否對于該市場的用戶是有 價值的。如果有價值，那么就可以深入探索如何讓用戶用起來；如果沒有價值，那么就需要進一步判斷是否要繼續開拓這個市場，以及如果繼續開拓這個市場，在原有的產品形態上，我們能否通過改造的手段讓它符合在新市場的用戶群中挖掘出來的、不一樣的 新價值？達到了“有用”的標準，我們則需要開始考慮“ 好用”的問題。只有滿足“好用”這一條件，產品才能夠被用戶用起來、從而真正在新市場落地。在實現“好用”的過程中，我們可以關注以下幾個層面的影響因素：
生活形態、價值觀
生活環境與社會環境會塑造當地用戶的生活形態與習慣。下圖分別是日本和北美地區的新聞資訊類App。同樣是推送新聞資訊，兩者在表現形式上卻大相徑庭?？梢钥闯鋈毡镜男侣凙pp布局緊湊、信息量大、頁面坪效很高；而北美的新聞App則更注重突出重點內容，信息密度相對來說并不高。
日本-新聞資訊類App
北美-新聞資訊類App
這種差異的背后，其實是兩地上班族生活形態的差異。日本城市小、人口密度大，上班族通勤大多會選擇地鐵。而北美地區面積大，大部分人會駕車上班。駕車的人雙手需要長時間控制方向盤，同時開車也需要持續注意路況，只能在間隙中查看新聞內容；而乘坐地鐵的人雙手更加自由，也有較長的通勤時間需要消磨，故可以接受更多的信息，也能夠接受更繁瑣的操作。
北美（左）和日本（右）各自的生活形態
有時候，某個地區的用戶長期習慣的操作模式，會與主流的操作模式有所差異。設計師junu在個人博客中講述了他為Melon（一個韓國主流音樂播放器）進行體驗優化的一段經歷。他發現Melon當時的播放操作邏輯比較冗長，用戶需要先點選列表中的多首樂曲，再點擊底下的播放鍵，此時Melon會將用戶所選歌曲自動生成一個列表并進行播放。這和當時Spotify等音樂播放器“點擊即播放”的主流交互邏輯相比，要更復雜和麻煩，尤其是在用戶只是想要立即聽到某一首歌曲的時候。因此，junu 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后，卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪。基于用戶反饋，最終，他們采取了一個折中的方案，既保留了原先的復選框作為多選操作的區域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時又引入了點擊單曲直接播放的操作。相比第一版優化方案，用戶的接受程度有了明顯提升。
Melon播放器的點選操作邏輯
設備環境
10年前，高端大屏幕手機在東南亞和非洲市場普及率并不高，因此產品出海時需要考慮當地常見的設備是什么，并作出相應的適配。近幾年，隨著市場經濟的發展以及中國手機的成功出海，即使是東南亞和非州的發展中國家，高端移動設備的普及率也已經很高，這為設計師在考慮通用性的過程中減輕了不少負擔。不過，在為每個地區的用戶做產品設計時，仍然需要調研清楚當地設備的使用情況，比如什么樣設備更流行、普及率更高；如果某一地區的設備不夠發達，那么設計的操作也需要考慮到設備不同所造成的差異。
業態/監管
在不同的國家或者地區，各個行業的標準與制度也可能存在很大區別。例如財會軟件行業中，在北美和英國占據了重要市場份額的Quickbooks、Xero等公司，卻無法成功打入歐洲一些國家的市場。因為財會軟件本身的功能、流程設計與當地的財務制度是緊密相關的。在這樣的情況下，歐洲本土的企業顯然會對當地的政策和制度更加熟悉，也更容易設計出符合當地企業與會計需求的財會產品。
2015年，Airbnb進入中國市場。在最初的市場調研和用戶調研之后，針對本土化，他們所邁出的第一步就是根據中國的業態環境對產品的前10%和后10%做了改造。其中，產品的前10%指的是登錄這一類用戶開始使用產品所需要進行的步驟，而后10%指的則是支付等用戶完成一個完整流程所需要進行的操作。因為當用戶進入到產品主要鏈路中時，其功能流程基本相通（搜索地點、挑選房間、瀏覽信息等），不需要做過多的改變；但產品的前10%和后10%則決定了用戶能不能把產品用起來并不遇到障礙。因此，針對登錄的部分，愛彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號的登錄；而在支付的部分，愛彼迎引入了支付寶與微信支付的方式，打破了中國本土用戶進入產品和完成訂單的壁壘。
Airbnb產品中國本土化的“前10%與后10%”策略
社會經濟
社會經濟環境的不同代表著社會階層狀況的不同，它會影響人們在消費時的行為方式。螞蟻金服在調研菲律賓市場時發現，當地擁有銀行賬戶的人口僅占了總人口的34%，同期中國擁有銀行賬戶的人口則占了總人口的85%。而這34%的人基本上都是當地的富人及中產階層。在貧富分化嚴重的菲律賓，大部分普通民眾是沒有銀行賬戶的。這一人口學特征很大程度影響了螞蟻金服電子錢包業務對菲律賓目標用戶的描繪，繼而影響了產品各個層面的設計。
文化/宗教
在各個文化/宗教里存在著不同的意象，也會有各自的表達方式與禁忌等等。在某個文化下表示友好的行為，在另一種文化下可能是一種冒犯。這些都是在設計時需要去注意的。除此之外，在不同的文化/宗教語境下，人們會有不同的行為模式與價值取向，這里我們會引入一個模型——霍夫斯泰德文化維度模式，來對這一問題進行更詳細的解讀。
霍夫斯泰德文化維度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化維度模式是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個理論框架。它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解，從而更明白該文化群體中人們的行為傾向。此理論總結了衡量各文化價值觀的六個維度：
使用他們官方網站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查詢到各個國家的文化維度指數，也可以選擇不同的國家進行對比。
在為特定地區的用戶設計產品時，我們可以以從這些維度去解讀他們的行為傾向，并據此提出相應的解決方案或者設計方案。滴滴團隊在開拓墨西哥市場時，根據墨西哥的文化維度指數在產品的本土化上制定了從功能到外觀等不同層面上的設計策略。
墨西哥地區的文化特征指數
滴滴墨西哥的本土化設計策略
這類源于文化差異的設計差異并不少見。在淘寶等國內的電商平臺上，“按照銷量排序”是一個被高頻使用的功能，消費者們認為什么產品買的人多，什么產品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當在北美的電商平臺亞馬遜上，我們會發現并沒有按銷量排序這個選項。因為美國的用戶相對來說個人主義更強、更相信自己的判斷和選擇，他們不認為他人推薦的就一定是好的。
國內外電商平臺對比
在企業即時通訊工具行業，國內的主流產品，如企業微信、釘釘等，都選擇了藍色這一比較沉穩的顏色作為主色調，在產品功能的形態上也偏向于嚴肅。而海外的辦公產品Slack，視覺色彩更加豐富；整體的產品定位也更加活潑歡樂，常常會有“不嚴肅”的表達，比如在界面多處都使用了emoji。這樣的產品形態差異，其背后是兩種文化在放縱（享樂）/克制（嚴肅）這一維度上的差異。
企業微信與slack的產品風格對比
內容本土化
除了功能框架上的設計需要考慮本土化外，產品中運營內容的本土化也是不可輕視的一環。Spotify Design 團隊在《 Designing for Belonging: Why Image Localization Matters 》一文中，記錄了他們對于內容本地化的一些經驗和思考。同樣，內容的翻譯僅僅是本土化的第一步。在地區之間區別不大時，完成內容的翻譯便能夠滿足其他地區的需求。如下圖中 “浴室歌單（ Songs to sing in the shower）”的播放列表，列表上的文案一經翻譯，就能夠推送給德國、波蘭、以色列、意大利等一眾國家的用戶。但當內容的閱讀群體有著更顯著的差異時，僅僅翻譯是不夠的。在看到這張圖片的時候，其他人種比如亞洲人可能就不會產生很強的代入感，也會缺少對產品的一種歸屬感（這個產品并不是為”我“設計的）。
Spotify "Songs to sing in the shower" 歌單
下圖展示的是Spotify另一個歌單—— “快樂時光（ Happy Hits)" 的封面在不同國家的呈現形式?？梢钥吹剑鎸ξ幕町惛蟮娜后w時，Spotify在保持了統一的樣式風格的基礎上，針對每一個國家和地區都展示了當地人在他們的生活中“快樂”的樣子。這種本地化內容更加貼近當地用戶，也能夠讓用戶產生更強的連結感與共感。
Spotify "Happy Hits" 歌單
結語
回到那句話 —— ”Recognizing the need is the primary condition for design.“ 產品的出海其實只是我們在設計中會遇到的一種場景，在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計，我們始終應該保持對用戶的好奇，讓最終的設計實現我們期望達成的目標。
文章來源：UI中國 作者：酷家樂用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文字，是最常見的動效對象之一。我們可以通過對透明度、位置或者角度的改變，制作出豐富的動態效果。但你可能不知道的是，AE內置了超多的文字預設，只需用鼠標點擊幾下，就可以完成復雜絲滑的文字動效。
在AE的窗口中打開“效果和預設”面板，所有和文字有關的效果都在動畫預設中的Text文件夾內，共十七種動效類型
將動效預設拖動到對象上，即可應用動效。
十七種類型分別為：3D文字動效、入場動效、離場動效、模糊動效、曲線動效、表達式動效、填充與描邊動效、圖形動效、亮度與透明度動效、機械化動效、多樣化動效、多行文案動效、擬態化動效、路徑動效、旋轉動效、縮放動效以及字間距動效。
有些效果可以相互疊加組合，理論上我們能做出成百上千種不同的效果。
文章來源：UI中國 作者：設計師深海
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
調查問卷，是一個低成本快速收集資料的定量分析工具。這是個看起來簡單，產出的問卷也看似很簡單，但是在整體設計的過程卻是需要很多的思考和預備。
關于調查問卷，會分成三個部分來解說，
廢話不說，直接開干！
1. 為什么做問卷
這個是問卷的目的，也直接影響后面問題的設計。
2. 如何使用問卷的研究結果
這是關于問卷解決方案的落地。不需要太過細致的落地計劃，但是至少要清楚，這份問卷的研究成果，可以獲得多少支持力度。不管問卷發現了多么偉大的問題，如果沒有落地，其實是沒有無意義。也切忌不要今年做的研究結果，明年來實施，那問卷的時效性和準確性就會大打折扣了，因為市場的瞬息萬變。
這是做所有事前，都要問的問題，「為什么做 Why」。而這個問題為什么重要呢，因為這會關系到設計問卷的核心內容是什么，會影響問卷的構成，當然最后也會產出不同的結果。
問卷的目的主要可以分為六個方面
1. 收集用戶信息
很多時候，我們或許知道理想目標用戶是誰，但是誰才是真正使用我們產品的用戶呢？了解真正使用的用戶，可以對用戶進行更針對性的分析和設計。
2. 了解用戶使用習慣
了解用戶在產品上是如何使用產品的，以及用戶的使用路徑是否按著我們期待的方式進行，這是很有必要，這也是一個驗證的過程。
2. 滿意度
了解用戶對產品的滿意程度，對于用戶不滿意的方面，可以進行歸納總結，并給出合理的解決方案
3. 建議反饋、吐槽、好評
從問卷中收集用戶的心聲，明白槽點是什么。同時也收集用戶的好評，這也是激勵團隊一個很好的方法，因為是直接來自用戶。
4. 體驗優化
對一個成功的產品來說，它要好用，它也要好看。產品有大改版前，可以用問卷來評估整體產品的體驗如何，以便在重新設計的方向上能更好聚焦。
5. 需求驗證
很多時候，需求可能沒那么明確，用戶和產品間始終存在著 gap， 所以我們有時對方案琢磨不定時，可能會試運行，后續看用戶反饋。通過合理設計問卷，我們也可以稍微窺探到用戶的想法
但是對需求的驗證，單通過問卷還是比較難的，只能窺探到比較淺的一層，最好后續可以對用戶進行訪談來做后續跟蹤，以便了解事情的全面。
這里要注意的是，問卷不適合探索用戶的新的需求，或者要驗證很精準的信息等比較復雜性的問題。
如果你問用戶，近期會推出新功能，問他會不會用。大致上，你得到的回答都是肯定。很多時候，同意比拒絕更簡單。
根據提問的方式，可以分為 「是什么」「怎么樣」「怎么辦」
1. 是什么
主要是用戶信息、使用習慣等問題。
例如，年齡層、職業、使用產品目的、知道產品的渠道、使用頻率、使用競品軟件、整體滿意度等
2. 怎么樣
主要是詢問用戶原因，比如打這個分數的原因，某功能使用如何等
3. 怎么辦
主要是詢問用戶的建議、期待產品改進的地方
問卷中并不是所有問題都適合問，有一些比較敏感的問題需要去避免，以免激起用戶的負面情緒
1. 敏感性問題
個人信息類的問題比較容易會有敏感信息存在，就像你問用戶工資區間，和在問卷最后告知用戶參與問卷都有獎品，需要填寫收貨地址。很明顯收貨地址的準確性會比工資更高。
2. 措辭嚴謹
3. 問卷的順序
先簡單后復雜，并注意整體邏輯性的表達。循序漸進，如果一開頭就是很難的問題，用戶很容易放棄答題
4. 問題長度
盡量保持所有問題在一個差不多的長度呢，保持一樣的節奏。避免時長時短
5. 避免專業詞匯
很多時候，我們會用一些所謂的“行話”來表達，但是在問卷當中，無法保證用戶同樣是理解的，而且也會讓用戶產生距離感，非必要情況下，不要使用專業詞匯
6. 選擇題枚舉要窮盡
題目數最好不多于 7 個，太多也會造成用戶選擇困難，最后記得加個其他并提供文本框輸入
7. 避免互斥、重復、相似
問題避免前后矛盾，造成用戶困擾，也不要重復或相似度極高的問題，除非這個問題是陷阱題，為了檢驗用戶是否認真答題。但是在數量有限的問題中，一般比較少使用陷阱題
8. 保持開放性
為所有選擇的選項，加入「其他——」「以上都不是」「不知道」，用戶可能會覺得問題或答案不匹配，而不知道選什么，這時需要給用戶一個出口，避免產生無效數據
9. 避免詢問引導性的問題
大部分用戶認為 XX 功能，很好用，你覺得呢？
如果看到這樣問題，大概可以從中讀出兩個信息，1. 大家都覺得好用 2. 平臺希望我說好用。
這個問題所傳達出來的隱藏含義會引導用戶做出不真實的反饋，這是沒有意義的問題
10. 避免讓用戶選擇「 是/否」「真/假」「好/壞」
強制選擇非黑即白，大部分情況下沒什么意思，因為用戶可能不確定。這個問題本身也沒有太大價值，也會錯過用戶一些比較有趣的回答。
所以如果這個問題的目的，是一定要知道的，可以更改提問的方式。
對于用戶的問題，答案要可以量化表達，來產生數據，才便于后續數據的分析
11. 避免問用戶將來的事，或回憶許久前的事
當人們將自己的行為投射到未來時，通常會過于簡單化和理想化，人們更擅于解釋當下進行的內容。
所以，如果要知道特定環境下用戶的操作，則要配合合適的場景預設，并且是用戶熟悉的場景?；蛘呖梢灾苯訂枺裉炷銜绾稳绾?
所以可以通過詢問今天的行為來，確定將來會不會使用。當然這不是絕對的，畢竟未來存在太多變數。
對于許久前的用戶的操作行為，也盡量不詢問，因為會忘記，而當強迫他去思考時，他可能自己腦補，產生不準確的記憶，進而對研究結果產生偏差。
12. 其他
問卷中存在多選題，必選題，選填題，記得預覽問卷時，注意問題平臺有無自動添加文字說明。
不要用 checkbox, radio 來區別多選和單選，這是不能準確的傳達，也有可能用戶沒有注意到，或者就不清楚，而使用文字的表述會更清晰，不會產生歧義。
必選題，選填題，如果問卷平臺，也只是用*號來表達必選時，建議在文字上也加上這樣的說明
整體問卷的過程需要時間，所以也需要的具體的日程安排，以便整體問卷的進行是井然有序。
日程安排中，要包括：
調查問卷從準備到產出報告，需要一個過程，建議與其他設計師或 PD 來一起配搭工作，更高效的完成，一個人去做，總是會有一些盲點，并且會比較大的壓力。
如果你在問卷方面是新手，也建議找個有經驗的設計師或 PD 來做你顧問，減少一些不必要的坑。
文章來源：優設網 作者：箴鹽設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：在一個團隊里，成員之間“協同合作”是非常有必要的，比如一些崗位沒辦法完全理解設計師的想法，多溝通可以避免一些不必要的摩擦；在出現問題時，現在自己的環節找找問題，再進行溝通；本文作者分享了關于精準還原設計稿的環節，我們一起來看一下。
UI設計師作為展示產品形態的執行層，產品上線前走查視覺與交互還原是必經環節。
設計師可能都遇到過一個問題，作圖時連一像素的分割線都糾結好幾次，但是開發完的效果卻不盡人意，UI驗收不通過；然后前端這邊委屈的想拿出藏在鍵盤下的四十米大刀找你來血拼。
我們經常會聽到身邊的設計師與開發哥的一些對話，關于對齊、大小、間距等設計還原問題經常會討論很久；甚至有時會覺得，幾個像素的間距是不是有必要這么糾結？
「還原」是指事物恢復到原來的狀況或形狀，互聯網中的「設計還原」是說開發后實際界面和設計稿效果有偏差，進行設計校對。
一直以來，設計驗收都不太受重視：
不同的項目類型還原度也不同：用戶產品>B端產品>后臺；對于用戶產品最好是能做到像素級還原。
在這個快速發展、迭代、更新的時代，互聯網產品的用戶體驗重視度越來越高，而其中的產品設計還原也成為了工作流中重要的一環。
我相信每一名UI設計師，心里應該都有一個前端能100%還原設計稿的夢想，畢竟那是我們艱苦奮斗的勞動成果。
而視覺還原的高低與否，則直接取決于設計——開發——測試這些環節的協作質量；不僅僅影響上線產品的用戶體驗，還影響著作為產品設計最后一環的工作質量。
經過走訪UI/UX設計師、前端工程師和測試工程師的還原設計圖的工作場景。
深究原因后，線上效果的失真率其實涉及到設計、前端開發、測試這三個環節，分析造成這種現象出現的原因大概有以下幾點：
了解開發依據哪些規則還原設計稿，前期的準備工作是重中之重，設定好每一個細節規則，后期落地還原時才會將頁面的失真率降到最低。
UI 設計中，設計規范是設計還原一個關鍵步驟；一個好的規范應該是高效的、簡單易懂的。
設計規范通?？梢园杨伾⒆煮w、組件等內容制定成規范，不僅僅保證視覺的一致性，也極大方便樣式和組件的復用，后期的維護和開發；在規范的輔助下，開發在搭建全局共用控件時規則更加清晰明了，如按鈕、行間距、字體大小、色值等等。
3.1.1 色彩規范
顏色是設計中最重要的元素，顏色的運用與搭配決定設計的品質感；在 UI 設計中，顏色的使用規范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。
3.1.2 字體規范
文字是APP主要信息的表現，尤其是新聞閱讀、社區APP等制定標準的設計規范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點很重要。
不同的字體氣質不一樣，并且不同場景下帶給人的感受也不一樣；所以需要在設計的時候考慮到字體的設計效果，然后在設計規范中注明；主要規范標準字的大小，標準字要注意跟上文的標準色進行組合，突出APP重要的信息和弱化次要的信息。
3.1.3 圖標規范
在 UI 界面中，具有標識性質的圖形就是圖標。作為 UI 設計中重要的設計模塊，產品的每個頁面中都有可能存在圖標。
設計規范中，圖標一般按照用途分為兩類：應用圖標、功能圖標。
圖標還應該根據不同的功能需求設計不同的狀態：如常態、選中態、點擊態等。
應用圖標：各種應用程序的識別標志，在應用商店里下載的一些應用程序的標志。
功能圖標：規范中最好標明圖標格式與使用方式。比如 Web 設計，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發；如果是原生 APP，那么需要標注圖標導出格式與尺寸。
3.1.4 圖片規范
圖片作為界面設計的重要組成部分，需要標明尺寸規范，分為不同用途的種類。
3.1.5 控件規范
控件是指產品界面中可操作的部件，與組件是有一些區別的：控件翻譯為 Control，組件翻譯為 Component。
通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素組合而成。
常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。
3.1.5.1 按鈕
按鈕有 5 個狀態：正常、點擊、懸停、加載、禁用。
需要在規范中分別羅列出這五個狀態，標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值；如果是圖標按鈕的話，除了上述參數值以外，還需要標注 icon 和按鈕文本之間的間距，icon 圖標的大小。
3.1.5.2 輸入框
用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對特定格式的文本進行處理：密碼隱藏顯示、身份證、卡號分段顯示，標注寬高。
3.1.5.3 選擇
選擇可分為單選與多選，并且也有五種不同狀態：未選擇、已選中、未選懸停、已選失效、未選失效項，規范中需展示出所有效果狀態。
3.1.5.4 進度條
用于向用戶展示步驟的步數以及當前所處的進程。
3.1.6 缺省頁
常用的 UI 組件（Component）：表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。
如果UI忽略規范，前端在不知道有可復用組件的情況下，很可能每一次都要手動書寫代碼；寫的代碼越多，遺漏掉細節和犯錯的可能性越大，導致效率降低。
最關鍵的是——對于今后的迭代，前端又得一個頁面一個頁面修改。
3.2.1 組件的好處
統一性：
高效性：
延續性：
3.2.2 組件化的特點
3.2.3 組件化分類
我們根據當下現有的業務場景和對往后一段時期的業務發展方向進行規劃，將組件庫的組件類型分為通用組件和業務組件；一般業務組件庫是不對外的，所以在Ant Design官網只能看到通用組件部分。
3.2.3.1 通用組件
指適用范圍廣，擴大頻次高，可重復使用多個業務且不包含業務邏輯。某些導航欄，按鈕，吐司，彈窗等。我們將通用組件細分為五個子類別：基礎組件，導航，數據錄入，數據展示，操作反饋。
2.3.2 業務組件
這類組件對比通用組件而言最大的特點就是包含了一系列業務屬性，跟產品功能有重疊的關聯性，因此影響到適用范圍可能僅限于于1?2個業務系統或特殊場景，且復使用頻次不高。畢竟使用場景特殊也有限，放出參考意義不大。
2.3.3 組件化搭建流程場景
組件化的搭建在兩種場景下進行：
1）產品立項前就開始組件化，在產品0到1之前，擁有一套組件和設計規范。設計師可以從以前項目的組件庫和設計規范直接套用并修改，這樣項目前期設計做起來更加方便且省時省力少挖坑。
2）產品經歷過0到1后，產品趨于成熟，這個時候開始做組件化。組件化搭建最多會有六個步驟，分別為：梳理類目、場景走查、問題分析、方案設計、生成插件庫、驗證開發。
具體的組件化設計升級流程我總結成了下圖：
當團隊搭建完成組件化之后，接下來就是成員間的使用，這一過程有業務需求產生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。
組件庫重建之初無法一應俱全，是需要后續設計師不斷的維護與迭代的。
關于設計輸出，現在很多像藍湖、zeplin、Pxcooker這種標注軟件把設計師從手動標注解救出來，往往把視覺稿在藍湖一扔就完事，前端開發完界面視覺還原度還是不高。
因為標注軟件只能負責生成元素的尺寸、樣式，遇到復雜樣式即使你反復衡量的一些像素，開發還是會漏掉——這樣很有可能出現視覺災難。
所以，一些復雜而又關鍵的頁面我建議可以貼心的做些手動標注，主動告訴開發重要性和注意點。
我們現在工作中會有兩種標注情景：
3.3.1 運營標注
因為很多數據是后臺傳輸到前端，有圖片、有文字，每個內容都需要給運營設置一個上傳標準。
3.3.2 開發標注
開發標注是從設計稿落地成代碼的主要參考，除了藍湖提供的標注，我們還需要寫一些重要部分設計說明，例如：模塊區分、局部特殊設計（該內容根據自身產品而確定）。
3.3.2.1 常規手動標注
3.3.2.2 特殊模塊/頁面劃分說明
復雜的表單設計，是很具有代表性的復雜頁面，根據頁面的布局進行原型化示例，幫助前端更好的搭建代碼框架。
關于切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質量好，單色使時還能替換顏色；PNG則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。
如果要做分層動畫，那我們就涉及到分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖；所有的特殊切圖合特殊樣式，我們都應該提前跟開發溝通好。
設計-開發這個環節的協作質量對視覺還原起著決定性的重要影響；但是，由于本身的工作性質，我們和開發之間溝通是個棘手又麻煩的歷史遺留難題；設計師與開發雞同鴨講從而導致視覺還原度低下的局面，幾乎每天都在上演。
俗話說“知己知彼百戰百勝”，如果設計師能夠了解一些基本的開發術語以及開發流程，就可以更好的打破溝通隔閡。
那網頁設計稿的實現具體是怎樣操作的呢？
步驟可以概括如下：
3.5.1 設計師的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在開發的工作流當中反復提到的盒子模型。雖然不需要完全了解前端是怎么通過代碼來落地你的設計稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基礎知識，在「盒子模型」理論中，頁面中的所有元素都可以看成一個盒子，并且占據著一定的頁面空間。
一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。
3.5.1.2 盒子模型的組成
每個元素都看成一個盒子，盒子模型是由 content（內容）、padding（內邊距）、margin（外邊距）和 border（邊框）這 4 個屬性組成的；此外，在盒子模型中，還有寬度 width 和高度 height 兩大輔助性屬性。
舉一個真實界面示例，我們在瀏覽器中打開「開發者模式」可以看到網頁的樣式代碼以及當前界面是如何通過「盒子模型」來布局的。
前端并不能簡單的像UI畫圖時一樣，隨意地拖放一個可見元素到某一個位置；他們要通過把每一個元素裝進一個「盒子」中，再去界面中定位它所處的位置。
3.5.1.3 了解盒子模型對于UI的好處
當你摸清了前端是如何布局實現你的設計稿后，你在作圖的過程中就會開始懂得站在落地的角度思考問題，善用「盒子」，將界面中每一塊布局「盒子化」。
我舉一個示例，如果我們不使用「盒子」，當我們在做一個卡片時，前端并不知道UI是如何定義每一個元素的間距；比如，然后將這一個間距套用在他也不知道應該設置為多高的「盒子」當中。
所以UI在出稿時就帶入「盒子模型」思維，合理地構思好每一塊元素的布局，一方面可以幫助自己在輸出頁面時，布局更加合理；另一方面可以在前端落地時輔助前端準確還原。
優秀的設計離不開開發人員的落地支持，作為設計師，協同開發人員完成設計落地也是工作中重要的一環。
做好以下幾點，站在開發人員的角度為他們“多想一步”，高質量的設計還原指日可待。
在進行設計還原的時候我更希望大家把設計評審的環節重視起來，之前也有詳細的講到過《如何進行設計評審》的，因為我認為評審對于設計還原的意義是把問題前置化。
通過設計評審可以把改版視覺變化最大的地方和開發說明清楚，這些改版布局框架改變都會增加開發工作量；這個環節把握好了，那基本都能實現出來，特殊情況除外，比如前期忽略了一些后臺數據的問題。
有些細微的地方需要我們特別像開發說明，也加深他們的印象，在實現時候就減少出錯；像開發走讀的時候，只把關鍵核心點，規則講清楚；我們前面每走一步，都是為了后面我們檢視還原度的時候要輕松一些，開發也輕松一些，就比如前期基礎沒打好，后面深入很難。
設計師做好會議記錄（記錄問題及解決方案，以及達成的共識），并且在會議結束后以郵件形式發送前端們，抄送產品和運營，確保會議內容的傳達到位；讓設計師與前端工程師相關問題達成一致，提升工作效率。
在開發緊張環節中，即使我們前面所有工作都準備好了，也很難避免開發不找我溝通；這時候我們要積極回應他們，并且和他們一起處理問題。
比如某些難度大一點的頁面，開發實現效果和設計稿差異不?。荒敲催@時候，開發會截一張他們實現的效果圖給你看，這時你就要仔細去找問題，不要一口咬定就是開發的原因；先溝通具體原因，然后找出解決辦法，如果是標注出現問題，比如標注標死了，頁面不靈活，適配局限性很大。
在視覺走查的時候我們可以把test環境下的頁面和設計稿拿出來對比，走查頭部、尾部等位置是否完整統一，按鈕樣式、反饋狀態、報錯等樣式是否統一；是否有缺少的場景和狀態，根據任務流程對場景和狀態進行排查，保證設計的完整性。
這里給大家推薦兩個視覺走查方法：
1）大家來找茬法
驗收的時候，我們需要把開發實現后的效果截圖，然后再去和設計稿做對比。
我們可以直接把截圖放在設計圖上方，降低透明度，大致比對下，就知道哪里不太對，然后再具體標注需要修改地方的參數。
2）頁面重構走查
走查還原的時候，在Chrome瀏覽器的空白處右鍵點擊檢查，找到里面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。
有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之后再給到具體的數值給開發；這樣就不用在我們搖擺不定的情況下，造成雙方的困擾
4.3.1 確?？捎眯?/span>
設計任務流程，進行設計走查，在移動App端，我們所設計的應用是建立在手指點擊操作的基礎上進行使用的。
我們的手指不像鼠標一樣能夠精確定位和響應，所以我們需要在設計的過程中確?？牲c擊的區域能夠較為明顯的識別。
4.3.2 確保易讀性
文本內容是大部分產品的重要組成部分，所以文本的排版是非常重要的（很多人說中文排版不好看，那是因為你不會用中文排版的方式去做排版）；確保文字清晰、易閱讀是在文字處理上的必須保證的。
在眾多設計原理中，格式塔原理一直被廣泛應用，它可以很好的梳理界面信息結構、層級關系，從而提升設計的可讀性；在自查過程中，我們可以通過格式塔原理檢驗頁面中的元素是否符合標準。
4.3.3 反饋機制
當用戶和產品需要交互時，會使用不同的模式反饋信息或結果，為用戶在各個階段提供必要、積極、及時的反饋，避免過度反饋，以免帶來不必要的打擾。
常見的三種反饋信息如下，大家可以在此基礎上自查是否有反饋、反饋是否傳達清晰，是否對用戶有即時的響應等細節
4.3.4 動效還原
動效這塊是產品中比較高規格的一個存在，所以在使用的過程中一定要謹慎，不能隨意加入多余的動效，導致在使用產品的過程中出現問題。
在我走查的經驗多了以后，發現 最容易造成落地頁面與設計稿視覺差異的，其實就是顏色與間距還有圖標的視覺錯覺。不要小看這兩個細節元素，把控不好它們會讓落地頁面效果大打折扣。所以在進行頁面還原的可以著重對比一下幾點:
4.4.1 分割線
在驗收的時候要特別注意分割線的問題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個，或者說設計師在開發前沒有特別說明；程序員就寫成了1pt，因為pt是1x下的單位，px是實際單位。
所以在做分割線的是，單位需要是「px」，這樣才能保證每個屏幕的分割線都是1像素。
下面主要以3個主要場景來分點解釋分割線的標注：
4.4.2 投影
陰影作為一個重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級呈現給用戶。
常規投影與彌散陰影推薦使用css代碼完美實現；特殊情況下還需提前與開發人員溝通權衡各種方式的利弊，選擇適合項目產品的實現方式。
結合自己實際的工作經驗和與開發人員溝通的心得，實現彌散投影的方法，可以通過兩個方法實現：
1）切圖對接開發人員
雖然切圖可以解決這個問題，但是切圖也有一些弊端，因為每個卡片都使用切圖的話，會使開發的包變大，可能會出現加載慢、閃退等情況，這些體驗也是很糟糕了；所以在這個過程中的一些問題務必要提前與開發人員及項目人員溝通好。
2）CSS代碼實現
常規情況下，效果都比較好，但是也會遇到一些遇到異常情況，比如不規則形狀，通常用代碼也比較復雜，這個時候需要提前與開發人員溝通切圖情況，避免后期一些問題。
在做設計的過程中，我們需要更好地理解下游的工作，達到一個高效的溝通。
不管是哪一種方法，沒有對錯之分，關鍵是要懂得“權衡利弊”，提前與開發人員溝通到位；只要是適合自己公司項目且能夠高效還原設計稿的方法，都是值得一用的。
4.4.3 文字行高
文本間距也是影響落地效果的關鍵因素之一，文本間距指的是——純文本與其他元素之間的間距。
UI出稿時應該注意 文本行高可能導致前端的測量誤差，文本間距主要的原因是 sketch 與 ios 系統中字體的行高不同；最簡單的解決方法是通過手動調整 sketch 中字體的行高，業界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。
首先我們要理解什么是行高（line-height）。
我以 Sketch 為例，當我們設置了一個70px的文本，Sketch 會默認給我們設置文本為98px行高，文本的上下會包含一定的空白像素。
如果UI不設定行高規范，落地過程中就會出現以下問題：
行高的解決辦法：
面對行高的問題，我一般會在設計的過程中，輸出規范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），和前端進行對接落地。
最簡單的解決方法是通過手動調整 sketch 中字體的行高，業界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。
最近看到了一個新的公式可以同步開發根據字號設置行高。
設字號為x，行高=x+2ceil（x/10），ceil（）的意思是向上取整數 L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意這里適用于單行行高，由于多行涉及到的排版問題不僅僅是行高帶來的，有機會的話可以單獨聊一下。
推薦DoraemonKit 是一個功能平臺，能夠讓每一個 App 快速接入一些常用的或者你沒有實現的一些輔助開發工具、測試效率工具、視覺輔助工具；而且能夠完美在 Doraemon 面板中接入你已經實現的與業務緊密耦合的一些非通有的輔助工具；并搭配滴滴的dokit平臺，讓功能得到延伸，接入方便，便于擴展。
4.4.4 視覺重心修正
在設計上為了保證界面的視覺平衡，往往不是設計軟件直接精準對齊，我們總是會通過調整間距、大小或者角度補齊一些負空間，讓畫面保持視覺平衡。
還有設計中通常向右箭頭來表示模塊入口，當我們把箭頭和文字右對齊，箭頭視覺上會更外突；這時候我們會往里面縮進1至2像素，但是切圖完給完全不知情的前端后，設計師要主動講解一下，或者寫進規范里。
項目會有些需要展示logo的地方， 有的圓形、有的長方形、有的純文字，尺寸差距比較懸殊。
這種情況下，我們需要給他限制一個高度，在這個高度以內，再根據logo本身的體量來調整圖形的大小，處理好logo的視覺平衡。
特殊場景在設計過程中常常會被忽略，等到在現實中碰到才會意識到缺失異常狀態會非常尷尬，所以大家在完成主流程設計后，一定也要考慮到特殊場景。
大家可以參照以下幾種場景對設計進行自查優化調整：
1）網絡異常
考慮到網絡異常情況時，通常產品會通過異常狀態頁面或者交互反饋來告知用戶當前的異常狀態和如何解決問題（解決方案引導、刷新、toast）。
2）服務器異常
服務器異常狀況較少出現，時間也較短，通常不提示具體原因，設計處理方式為在新頁面展示缺省頁，文案+插畫的形式給予用戶提示及重試引導。
3）空狀態
空狀態指的是頁面中無內容，主要的幾個情況，設計師需要根據不同的場景給出文案+插畫的表現形式引導用戶：
4）內容缺失
內容缺失展示效果的考慮，設定頁面圖片缺失的占位圖。
5）加載頁面的表達方
考慮網絡加載或者數據加載的時候會等待幾秒鐘，通常產品會有一個簡單頁面的占位圖形式來減輕用戶在等待時的焦慮感；可以是loading，也可以是整體頁面的刷新動效。
設計還原的時候最后還還看一下不同機型適配的問題。保證不同機型的界面呈現效果一致。
4.6.1 動態眼光
手機適配的時候很多設計師會遇到一個問題，就是在750*1335的屏幕上做的設計圖；但是適配到640*1136的屏幕上就有元素放不下，所以設計師在出圖時需要用動態的眼光去考慮問題。
知識點：在簡單的界面中，由于本身界面的內容比較少，確定位置就會比較難，因為要考慮到不同的界面內容要怎么放才能保持視覺統一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內的固定內容，再確定自適應的內容。
4.6.2 固定適配內容
在簡單的界面中，由于本身界面的內容比較少，確定位置就會比較難，因為要考慮到不同的界面內容要怎么放才能保持視覺統一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內的固定內容，再確定自適應的內容。
4.6.2.1 圖標或按鈕
4.6.2.2 搜索框
4.6.2.3 Y軸間距
一般來說，Y軸的間如果在相近的組件里，都會是固定的，不會有變化。
4.6.2.4 圖片
像這種圖片的列表或者，十字縱橫的頭像或文字，大小都是固定的，變得會是間距或者數量，如下圖所示：
對于比較復雜的模塊，快速找到將以上所說的固定因素和自適應因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現開發完成后才發現某機型適配效果不理想的情況。
4.6.3 自適配內容
自適配內容也給大家梳理出來。
4.6.3.1 文字彈性適配
文字流指在多行文字的情況下，文字數量變化會影像頁面布局和元素大小，如下圖所示：
文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁邊距，中間彈性拉伸。
當文字左右兩邊有內容的時候，我們需要標明文字可顯示的范圍，也就是說它最多能顯示幾個字——這種方式可以做到較好的適配，也是做快速常用的適配方法。
4.6.3.2 banner
這里說的圖片是指banner或者feed流里的圖片，適配的方法大多都是自適應，界面中的元素間距和數量不變，元素尺寸進行等比縮放，比較適用于固定比例；但尺寸隨屏幕寬度變化的元素，如下圖所示：
對于比較復雜的模塊，快速找到將以上所說的固定因素和自適應因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現開發完成后才發現某機型適配效果不理想的情況。
假設視覺還原上真的出了問題，首先要尋找原因，是自己沒做到位？還是對方沒理解你的想法？
我感覺可以按照以下幾個方法去做：
設計團隊內部先弄明白改版的意義，畫好標注色值、像素的示意圖和文檔，做好產品原型等任何能讓對方不需糾結，直接可以上手的工作。
做好前期的準備工作，盡可能的多做思考，完善設計稿；尤其是邊界情況，把自己的問題留給自己，這樣可能產生的設計還原問題就會大幅減少。
多向開發同學請教，即便遇到技術確實難以實現的情況，不要逃避或者過于固執，了解具體原因，不斷累積自己的技術知識；自己的專業、努力是贏得程序員尊重的前提，贏得他們的尊重你才能順利開展工作。
這是一個比較復雜而且需要長期努力的話題，每個公司都會有其實際情況存在，團隊越大，情況越復雜。
設計師團隊或者個人的話語權如果很弱，確實會面對十分被動的處境；首先需要說明的是，話語權是贏得的，而不是賦予的；想要改善被動的局面，要認清所處的環境，問題的癥結，調整定位，并付出努力；只有證明了設計確實能夠解決問題，甚至驅動商業價值，才會逐步提升話語權。
完成一項任務時最重要的是團隊的思維模式是否統一，設計師在乎用戶體驗，工程師只在乎開發成本，那問題沒辦法達成一致是很正常的。
想要讓大家認同你的看法，就要在平常不斷的潛移默化影響別人；比如沒事多跟公司其他人聊產品、聊體驗、聊感受，慢慢給他們灌輸體驗的重要性。
只要你的話題有趣，人有趣，沒有人會拒絕跟你聊；時間長了，整個團隊的思路就會有所轉變。
設計師自己可以先按優先級去排布還原順序，看這1像素是否對當前產品重要性。
在搞清楚產品進度、優先級的情況下，記錄所有還原問題，自己標記優先級，整理完畢后一次性給他，再跟程序員解決方案和時間；也可以與開發同學共同摸索一套雙方都能接受的清單模式，標明問題，修改建議，重要層級，根據實際情況詳細說明或者簡要說明，能夠當面溝通更佳。
良好的團隊合作氛圍是有效的潤滑劑；好的合作關系如同一條戰壕里的戰友，哪怕多年后回想起來，也應該是一起沖鋒陷陣的光輝歲月。
設計師應該認識到自己在整個項目流程中的位置，不卑不亢，把麻煩留給自己，不要推卸責任或者互相推諉，逐步打造自己的聲譽和氣場。
一個優質的項目落地是各部門協同合作的成果，就像我們玩游戲，后期高質量的輸出也需要前期優秀的輔助來打鋪墊。
在“協同作戰”的基礎上，靈活運用規范、標注和走查的方法來主動推動項目的進行；不僅可以讓設計稿得到最大程度的還原，也可以提升我們協作能力和對環節的把控能力。
任何問題只要多交流，會避免很多阻塞情況；出于設計師的角度當然都希望每一張視覺稿得到100%的還原；因為用戶只看你上線效果，但是往往排期緊張需要一些取舍，我希望能在有限的時間內做到最好。
在后期視覺驗收的時候，我們可以換位思考，把自己當做程序員，站在他們的角度去思考問題；怎么樣的驗收方式會更方便開發修改，減少重復返工的次數，情愿驗收標注的時候多花10分鐘，也要把修改意見寫詳細，幫開發節省時間，反過來也幫我們自己減少了二次驗收的成本。
文章來源：人人都是產品經理 作者：郝小七
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源：tob.design 作者：三魚先生
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2016 年玩追波的時候，有幸加入了 FreedomUnion 團隊，當時團隊內的小D（Dea_n）的界面漸變風很受歡迎，他使用的顏色干凈、舒服、有感染力，很快形成了自己特有的設計風格。
我被他的配色深深吸引了，特別想研究他的配色，就嘗試把他的作品在 PS 中打開，嘗試吸色，找找他經常使用的配色范圍。為什么他配出來的顏色就很吸引人，長時間看眼睛也不會太累？下面先欣賞一下小D（Dea_n）的設計作品。
作品已經過了三年了，如果是一般的配色作品應該看上去會有些過時，但是小D（Dea_n）的作品看上去并沒有，還是有不少作品的配色現在看上去也是很前衛的。一起來看看我對小D（Dea_n）的大部分作品的吸色情況吧。
小D（Dea_n）的用色著實很大膽，很多都是貼邊用色。我上大學的時候，老師曾經說過盡量少用貼邊的顏色設計，包括灰色也可以使用帶有顏色傾向的高級灰。這下終于明白了為什么小D（Dea_n）的配色這么亮眼。
當然我也有自己的小發現，我發現每個的作品主配色的 CMYK 值總會有兩種色值為 0%，比如C：0%、M：91%、Y：95%、K：0%。
難道只是偶然？當時我也請教過小D（Dea_n）是否是刻意的，得到的答案是并沒有。然后小D（Dea_n）靠自己卓越的配色能力進入小米 RIGO 設計團隊。
當小米 miui9 系統官網海報出來的時候，我把作品拿到 PS 一吸色，結果告訴我小D 一定參與了這個作品的配色設計。那為什么只有黃色的 CMYK 的色值是有 3 種顏色混合而成的。
難道僅靠著一點吸色就可以肯定 CMYK 配色方法的存在？CMYK 配色方法是不是只存在 UI 界面設計中？CMYK 配色方法可不可以增加它的擴展性？CMYK 配色方法可以作為一種配色方法幫助設計師完成色彩搭配的工作嗎？帶著這些疑問我繼續研究配色。
我們來看一下「子彈短信」的應用圖標，它的用色基本符合之前說的 CMYK 配色方法，當然是不包含子彈上的深色調。漸漸地我發現 CMYK 配色方法的路子越來越寬了。
Asher 是追波繪畫寫實圖標的大神，他的寫實作品配色飽和度高，光影通透到位，需要很強的手繪功底。在他的設計作品中除去暗色調和深色調的部分，其他配色基本都使用了 CMYK 配色的技巧。
我們都知道 iOS 系統和 Android 系統，在他們各自的系統規范中對配色也有相應的規范。我們提取兩大系統規范中的配色進行吸色分析。
一頓猛吸之后，發現大廠系統規范的用色也基本符合 CMYK 配色方法的標準。
前段時間 IBM 重新定義了他們的設計語言，在產品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。
近期很多互聯網公司進行了品牌改版，深亮色調到淺亮色調慢慢成為一種趨勢。
新版的 Facebook LOGO 從深藍色變為亮藍色，字體則繼續保持原樣。其中 CMY 值進行適當減少。除此之外，圖標部分也由原來的圓角正方形變為圓形，圖標中的「f」從偏右的位置移到圓形的中間位置。
全球旅行者喜愛的民宿預訂平臺 Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。
微信 7.0 版本使用了經過調整的全新圖標。圖標除了原來綠色漸變的背板變淺外，兩個標志性的對話氣泡與背景板的比例也做了相應的調整。色彩的 CY 值減少了。調整后的新版圖標除了空間感和符號感也更強外，整體變得「更輕」了。
在網易云音樂 6.0 版本中，對品牌 LOGO 再次進行了調整。新版網易云音樂圖標最明顯的變化為紅色的主色調，其次為「留聲機」和「音符」組合而成的圖形部分。
紅色較之前變得更加明亮，同時圖標紅色背景由之前的純色改為輕微的紅色漸變填充。新的紅色著重考慮了用戶長時間使用屏幕造成的視覺疲勞，采用比較「輕」的色彩可有效降低這種問題。其中顏色 CMY 三種色值都有減少。圖形部分，新版圖形縮小了中間交叉部分的面積，頂部向右彎曲的弧形變大。整體效果較之前更加清晰，特別是在更小的應用尺寸中，其展示的效果明顯要比之前的好。
看到上面的描述是不是特別想知道當 CMYK 中的兩個色值同時為 0 時，不同顏色的色域范圍？帶著這樣的想法，把紅橙黃綠青藍紫中每類選一種顏色進行區域研究。打開 PS，在拾色器中截取不同顏色的色域范圍如下：
上圖白色區域就是在紅色 C 值為 0、K值為 0 時的色域范圍，范圍還是很小的。
黃色的 CMYK 色域很奇怪，在色相 38-58 度的黃色純度最高時，CMY 都有色值。也就是 PS 里面最純的黃色也是由 CMY 復色調和而成的。這也是為什么之前黃色使用時，CMYK 色值是由三種顏色混合而成的。
上圖白色區域就是在綠色 M 值為 0、K 值為 0 時的色域范圍，范圍開始慢慢變大，意味著綠色高飽和度的可使用顏色越來越多。
上圖白色區域就是在綠色 M 值為 0、K 值為 0 時的色域范圍，范圍也開始慢慢變大，大體范圍和綠色相當。
上圖白色區域就是在藍色 Y 值為 0、K 值為 0 時的色域范圍，范圍應該很大了。
上圖白色區域就是在紫色 Y 值為 0、K 值為 0 時的色域范圍，范圍和藍色的色域范圍相當。
上圖白色區域就是在洋紅色 Y 值為 0、K 值為 0 時的色域范圍，范圍和藍色、紫色的色域范圍相當。
1. CIE
從理論上講，可見光分布的色彩域就是 CIE 所表示的色域。在顏色感知的研究中，CIE 1931 XYZ 色彩空間（也叫做CIE 1931色彩空間）是其中一個最先采用數學方式來定義的色彩空間。從 CIE 圖中能看出冷色的區域遠遠大于暖色的區域。其中黃色和紅色的色域范圍相對較少，完全符合 PS 拾色器里面的色域范圍。
2. RGB
RGB 是計算機熒光屏顯示顏色的色彩方式，它們是由 R、G、B 三種發光質通過加光混合產生的。RGB 色彩模式是一種加色模式，將紅光、綠光和藍光以不同的比例相加可以合成各種各樣的色光。R、G、B 三種顏色各能產生 2 的 8 次冪，即 256 級不同等級亮度的顏色。256*256*256 即 16777216種顏色。RGB 色彩模式主要用在電腦顯示器和電視上。RGB 色彩模式是繪圖軟件最常用的一種顏色模式。
3. CMYK
CMYK 由C（青）、M（品紅）、Y（黃）、K（黑）四色高飽和度的油墨以不同角度的網屏疊印形成復雜的彩色圖片。CMYK 色彩模式是一種顏料模式，它利用色料三原色混色原理，加上黑色油墨，形成各種各樣的色彩。
這種模式屬于相減混色模式，廣泛運用于繪畫和印刷領域。CMYK 的色域范圍比 RGB 的色域范圍要小，某些色彩無法用 CMYK 油墨印刷出來。當這些不能印刷出來的顏色出現時，在 PS 的「拾色器」對話框上會顯示一個帶感嘆號的三角形警告標志，表示這些顏色超出 CMYK 的色域。即使設計了比較鮮艷的顏色，如果超出了 CMYK 印刷顏色的色域，計算機就會用一個接近它的較灰暗的顏色去頂替它?？梢姶蟛糠?CMYK 印刷顏色的色域小于 RGB 屏幕顏色的色域。
我們來仔細研究下 CIE 色域范圍，CMYK 當中的黃色色域值有一小段超過了 RGM 的色域值。這就說明黃色的更飽和的 CMYK 的原色和間色可能在 RGB 的范圍之外。
其他的我們還有一個方法去驗證。就是在 PS 里面新建顏色模式為 CMYK 的文件，打開拾色器界面，把顏色調到右上角改變色相值的 0-360度 的范圍。色相在 38-58 度的黃色區域對話框上不會顯示帶感嘆號的三角形警告標志，表示黃色區域的 CMYK 色域值是超過 RGB 的色域值。這就是為什么 iOS 系統規范中的黃色色值必須是三種顏色混合而成的。這時候特殊的顏色就需要特殊處理。
CMYK 配色法就是兩種顏色的色值為 0%，但是黃色因為色域問題是由三色組成的（c值盡量小于10）。
色域集中在純色系的范圍，濁（灰）色系和暗色系除外。
界面的主色（純色系為主）、圖標設計、品牌色（純色系為主）都可以使用 CMYK 配色法。
CMYK 配色法目前多適用于互聯網產品，雖說在創意上要敢于創新，但在實際的工作中還是需要理性地根據公司品牌和產品定位，合理地進行色彩搭配。目前此方法沒有更多的理論依據支撐，如有疑問希望多多交流。
文章來源：優設網 作者：水手哥
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
題圖來自Saurageresearch
企業對客戶旅程總體的認知與應用比例為25%，屬于初期水平。2C類企業、大型企業、金融行業對客戶旅程的認知和應用水平明顯高于其他類型的企業。大多數企業在最近兩年才開始嘗試客戶旅程方法，主要由研究、設計、客服部門在主導客戶旅程的應用，客戶旅程地圖的繪制頻率大部分是每年或半年繪制一次。
企業目前主要將客戶旅程應用于客戶需求分析、產品和服務的設計、以及客戶旅程測量與分析等領域，并在提升客戶滿意度、促進以客戶為中的企業文化，以及提升營銷和運營的轉化率方面效果最明顯。大部分企業對認為客戶旅程有積極的效果，極少給出負面評價。客戶旅程方法使用時間越長，客戶旅程地圖繪制頻次越高的企業獲得效果越明顯，并且2B企業比2C企業獲得效果更明顯。
雖然目前由市場部門（包括營銷、銷售和品牌部門）主導的比例較少，但由市場部門主導客戶旅程應用獲得效果明顯好于其他部門主導的情況，由客服部門主導的效果低于其他部門。這與MyCustomer在2018年在歐美的研究結論相反，這可能說明市場部門在客戶體驗領域的主導權在逐步上升。
對于未來一年的使用客戶旅程的意愿，雖然各類企業對客戶旅程方法的效果表示肯定，并且明確表示不會使用的比例很少，但相當比例的企業存在較大不確定性。存在的主要困難和挑戰包括專業知識、方法和技能的欠缺，以及專業工具和平臺的不足。未來客戶旅程方法要在整體應用水平上取得突破，這些方面是需要重點聚焦的領域。
02：
不同類型的企業，在客戶旅程的認知和應用程度上也表現出較大差異：2C企業的應用程度明顯高于2B類型的企業，總體認知和應用比例分別為30%和20%。大型企業也明顯高出中小型企業，分別為29%、22%和19%?？蛻袈贸淌且粋€相對比較復雜的系統性方法，真正的應用需要人員、資金等各項資源的投入，大型企業更具備優勢。相比而言，小型企業的在。分行業來看，認知和應用程度最高是銀行/金融/保險行業（30%），一方面是由于這個行業的本身的客戶決策流程長、金額大、風險大，另外一方面也是由于這個行業的利潤較高，企業有相對較為充足的資源進行投入。
由客戶研究部門和團隊主導客戶旅程的繪制時目前的最常見的模式，其次是設計部門，以及客服、品質部門主導。但產品、戰略、營銷、銷售部門主導的情況也一定的比例，這也說明目前開展客戶旅程應用的企業，其目的存在多樣性。不同部門來主導，其方法和應用上也會存在差異。
在繪制客戶旅程的過程中，目前主要用的是客戶調查數據和客戶訪談數據，這也是客戶研究團隊最擅長和最容易采集的數據。其次最常用的數據來源是客戶行為和客戶反饋/投訴數據，總體上對外部數據應用多于內部數據，對小數據多于大數據。
在客戶旅程地圖繪制工具方面，使用最多的是PowerPoint，處于絕對領先的地位；其次是常用的繪圖和設計工具，例如Visio、Photoshop、Adobe Illustrator等；專用的客戶旅程地圖繪制工作使用比例非常低，最主要的客戶旅程地圖專用繪制工具UXpressia的使用比例也只有10%，其他的則更低，使用比例只有2%-4%。主要是目前客戶旅程地圖繪制并不是一項常見工作，所以通用型的文編編輯和繪圖工具會是常用選擇，而目前的客戶旅程地圖繪制工具多為英文版本，國內還沒有出現較好的客戶旅程地圖繪制工具，這也是客戶旅程地圖專用工具使用比例較低的重要原因。
不同情況下，客戶旅程的應用效果也不盡相同。調查數據顯示，使用客戶旅程方法時間越長，繪制客戶旅程地圖頻率越高，客戶旅程方法取得的效果越好。使用2年以上的企業和2年以下的企業表示有效的比例（包括“比較有效”和“非常有效”，下同）分別為83%和69%；每年繪制多次客戶旅程地圖的企業和多年繪制一次地圖的企業的表示有效的比例分別為81%和62%。
在將客戶旅程方法進行具體應用時，最常見是用于客戶需求分析、產品和服務設計、客戶旅程分析和測量。其次是在企業文化建設、工作管理和溝通方面的應用。在具體操作層面，例如客戶旅程編排、營銷和互動，目前也有一定比例的具體應用。隨著客戶旅程方法應用的進一步深入，直接到操作層面的應用將逐步提升。
客戶旅程在不同領域的應用對最終的效果有明顯的影響：表示客戶旅程應用效果一般的企業在各個具體應用領域的應用比例均低于獲得明顯效果的企業。效果一般的企業在客戶需求研究和分析、客戶旅程編排、市場營銷和推廣，以及品牌傳播與互動方面的應用差距最大（落后超過10%的比例）。從調查數據來看，雖然用于編排、營銷和品牌的總體比例不高，但確實影響最終應用效果的顯著因素。
通過以上在不同領域的應用，客戶旅程方法在各個方面的效果都有所體現，尤其是在提升客戶滿意度、強化以客戶為中心的企業文化、提升營銷和運營的轉化率方面最為明顯，分別由59%、54%和37%的企業表示在這三個方面得到了提升。
不同類型的企業未來使用客戶旅程方法的可能性也存在明顯差異。使用客戶旅程越久、使用頻率越高，獲得的效果越好的企業，繼續使用客戶旅程方法的傾向越高。2C企業比2B企業未來更愿意使用客戶旅程，雖然2B企業獲得效果更明顯，但2B企業使用客戶旅程的難度和成本更多到，導致2B企業的使用意愿要明顯低于2C企業。另外，相對于中型和小型企業，大型企業的使用意愿明顯更高，表示可能會使用的比例達到了61%，明顯高出中小型企業。
對于在客戶旅程應用過程中的挑戰，最大的困難不是預算不足，而是知識、方法、技能、工具和人員的欠缺和不足，尤其是專業知識和方法的掌握不夠，是最大的兩項困難。其次碰到的問題是企業高層，以及其他部門的支持不夠。
文章來源：UXOOLS
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關于按鈕的一些知識和我的一些觀點分享給大家。
按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認識這個組件，今天我把關于按鈕的一些知識和我的一些觀點分享給大家。
一 按鈕的作用
在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時候該用按鈕。
1）什么是按鈕
按鈕用于觸發一個及時操作。
2）有什么作用
2.1 功能操作
比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當弱化，重點強調功能，突出主體信息。
2.2 指引用戶下一步操作
這個是最常見的使用場景，每個可交互頁面上都有這類按鈕的出現，用來指引用戶下一步該怎么做。比如：創建、保存...
2.3 培養用戶習慣
當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長此以往用戶就會形成使用習慣。如果某操作能夠為用戶持續帶來價值，那就可以在按鈕的位置讓它更醒目，持續培養用戶點擊習慣。
二 按鈕有哪些類型
· 主按鈕：用于主動行動點，一個操作區域內只有且只能有一個主按鈕；
· 默認按鈕：用戶內有主次之分的一組行動點；
· 虛線按鈕：常用于【添加】操作；
· 文本按鈕：用于次級的行動點；
· 鏈接按鈕：用于作為外鏈的行動點。
三 按鈕的狀態
1）交互狀態
1.1 Normal 正常狀態
此狀態為按鈕的正常顯示狀態，就是按鈕在也頁面中的常規狀態。
1.2 Hover 懸浮狀態
此狀態為按鈕的懸浮狀態，當鼠標滑過時候的狀態會給用戶一個交互反饋，因為它只是一個視覺上的反饋并無實際作用，所以在移動端就把此狀態去掉了。
此狀態的效果并沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.3 Click 點擊狀態
此狀態為按鈕的鼠標 / 手指按鈕狀態，操作完此狀態后，就會引發此按鈕的真實作用。
同時，此狀態的效果也沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.4 Disable 禁用狀態
此狀態為按鈕的不可操作狀態。
當頁面中有未完成的任務或頁面中有錯誤導致不可提交頁面時，按鈕會處于 Disable 狀態。這個狀態在產品中也是很常用的，而且這種情況下應該引導用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個通用的展示方案。
一般方案有兩種：
· 無論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；
· Disable 狀態為 Normal 狀態的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。
2）狀態屬性
· 常規：常規樣式的按鈕，主操作按鈕；
· 危險按鈕：刪除/移動/修改權限等危險操作，一般需要二次確認；
· 幽靈按鈕：用于背景色比較復雜的地方，常用在首頁/產品頁等展示場景；
· 加載：用于異步操作等待反饋的時候，可以避免多次提交。
四 按鈕的使用方法 / 禁忌
1）一個操作區有且只有一個主按鈕
一個操作區有且只有一個主按鈕去引導用戶操作，如有有多個或沒有則會影響用戶的判斷。盡可能少的讓用戶去做選擇，產品的終極目標應該是“傻瓜式”產品，不要讓用戶有學習成本。
2）圓角值
根據產品風格，三種圓角值的設定：
2.1 圓角值為 0
這種適合用在比較嚴謹 / 企業級產品中，比如：阿里云；
2.2 小圓角值
這種是最常用的形式，在不失嚴謹的同時還有一些細節，如果可以的話，盡量選這種的；
2.3 超大圓角值
這種一般需要有獨特的產品風格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。
較大圓角值，此類千萬不要用，不要問，問就是太丑。
3）精簡文字
按鈕里面的文字一定是精簡的，不要展示過多文字，更不要折行。
4）文字與按鈕比例要適中
文字與按鈕的比例要適中，文字不要太大或太小，都會影響視覺展示。
5）彌散陰影
如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級別的不要用，不然識別度會變差，并且會讓按鈕的體驗變得很差。
6）主次操作按鈕樣式統一
主次操作按鈕樣式要統一，不要濫用樣式。
7）按鈕樣式與其他組件要有區別
實際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產生誤解，做一些不必要的操作和思考。
8）不同場景適配
現在暗黑模式也是常用的場景了，所以黑/白場景下都要考慮到識別度的問題。
9）主次按鈕的位置
主次按鈕左右的問題，也常常出現在設計討論會中，這次我直接放個結論吧，以后不要再為這件事吵架了。
在提交頁面、彈窗中，主按鈕在右；在其他常規頁面上，酌情考慮。
五 按鈕尺寸
按鈕尺寸具體用多大的，這里我總結了一個規范（僅代表個人意見）。
· 高 = 文字行高 + Xn，X=自然數，n=4
· 寬 = 文字寬度 + Xn，X=自然數，n=4
在其他地方也可以用類似的公式去做規范，比如卡片的間距，你可以設置 n 為基礎值，在此基礎上用 Xn 去選取合適的值。
注意：常用的字號為 12px、14px，盡量不要用太大的字號在按鈕上。
小結
按鈕只是眾多組件中的其中一個，也是最常用的組件之一。對于設計師來說，無論大小組件，我們都要精益求精的去思考，只有把每一個細節做好了，才能做好產品。日積月累的把每一個知識點掌握了，我們也就成長了。
文章來源：優設網 作者：友設青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
