不同的階段，臨摹的目的不盡相同。一般來說，前期臨摹更多的是練習軟件、技法，后期練習別人的風格表達，綜合運用。所以，我把臨摹分為技法臨摹、半原創到原創 3 個階段，每一個階段沒有絕對的界限，都是在積累創意，完全是可以用到自己的項目中去的。
今天會分享一個我當年做臨摹練習并融入實際項目中的小案例。
大概是在 15 年左右，在網上看到錘子設計師設計的一個圖標，覺得非常驚艷，當時就想把它臨摹下來，這是當時臨摹的一個效果。
△ 原作
△ 這是我當時臨摹的圖
我在臨摹這張圖的時候，想達到的目標是能根據自己的 logo 色及文字，做一個半原創的設計。
然后實際練習中，不斷觀察原作發現有一些細節值得學習：
當時，對我來說，在練習的過程中有一個難點就是關于第 3 個細節水的紋理執行有些難度，因為其中包括了粗細變化、虛實變化、明暗變化等等，單純的用圖層樣式或者矢量去畫的話，難度都比較大。這個細節當時耗費了我不少時間，后面突然想到其實也可以用合成的辦法來實現，然后我去找了真實水紋的圖片進行疊加，很快就搞定了。所以，只要能達到效果，不能太過于局限某一種思路。
分析并完成這些細節后，就是你在做這個練習中學到的點，嘗試把它們學以致用。
記得當時在 360 時需要設計一套關于摩洛哥藍色小鎮的官方定制版主題圖標。從搜集的當地代表性的圖片中發現，多彩顏料是當地的一大特征，所以決定以染料為關鍵詞去畫一個圖標，又因為顏料本身自帶多彩的特點，所以以它為主題圖標就很合適了。
然后在思考這個圖標的時候，首先會應用參考圖中的配色，并結合染缸的造型做出了第一版的效果。
這個效果雖然是表達了那個意思，但缺乏亮點，聯想之前練習過水的技法表達（臨摹中第 3 點細節運用），正好可以利用水的紋理做下強化，這樣就優化出了第二版。
嗯，看起來感覺有了一些特點，但感覺缺乏細節，接著思考水除了有紋理高光，應該還會有邊緣高光（結合臨摹中第 5 點細節），所以在邊緣嘗試加了高光，增加體積感，做出水要漫出來的感覺。
如果只有這一層高光的話，細節度感覺還是不大夠，在之前的文章《如何從優秀作品中偷師，用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學到他們對于 1px 高光的使用（臨摹作用中的第 7 點），這里因為是液體的材質表現，所以增加一個高光點增加水的通透感。
到目前為止，似乎看起來已經差不多了，但考慮到現實世界中，溢出的彩色液體在透光性很好的情況下，也會對周圍環境產生影響，所以我在顏料設計的四周，配上對應的四種顏色的模糊投影（臨摹練習中的第 6 點）。
在思考下，在臨摹的圖標中為了使得圖標更加自然，作品中其實結合了很多真實世界中會發生的情況，比如水的折射，氣泡的比例，深淺等等，那對于染料來說，會有怎樣的真實情況發生呢？我當時想到一點是，染料在用的過程中其實很容易灑出來，所以圖標背板上現在太過于干凈了，增加一些細節能夠使得背板能夠跟主體物產生關聯，也更加自然。嗯，又是一個小細節。
最后，我們對比下第一版和最終版的效果，細節確實豐富了很多。
一張動態圖可以更加清晰的看到變化。
這次圖標的優化過程，我覺得有幾個要點對我來說印象深刻的：
圖標的風格可以是扁平的，但想要增加自然舒服的細節，一樣可以像畫寫實風格那樣仿照現實。你需要留心觀察這個世界，就算是一張照片中也能有非常多可以利用的細節。
碰到難做出來的細節，多想想有沒有更效率的辦法。比如在做水紋理的時候，一開始就想著完全靠鼠繪畫出來，結果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出來。
對于圖標來說，要注意其整體性。比如圖標中的主體物不要跟背景脫離，不要讓圖標背板只是作為一個容器，而要讓背板也成為圖標本身的一部分，這樣圖標的整體性會更好。
臨摹的過程中，一定要多分析，多記錄自己覺得是細節的點。每一次記錄，都可能是將來設計時提升細節的靈感來源。
以上內容只是我在日常練習中應用到實際項目中的一個小案例，其實還有非常多的靈感想法都來自于你平時做的練習，關鍵是要多動手，多總結，才能增強自己對細節的把握能力。
文章來源：優設網 作者：彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
好的，看到?家這么熱情，那班班接下來就化身Johnson
編輯導語：用戶的體驗感對于一個產品來說，是至關重要的。一個好的產品能夠充分照顧到用戶的感受，從而擁有大批的忠實用戶，而品牌升級則是體現產品定位和發展策略的不二之選。當體驗設計遇到品牌升級，設計師該如何做？本文作者對此展開分析討論，一起來看看~
01 用戶體驗設計的現狀
過去，我們在用戶體驗中一直強調以用戶為中心，追求給用戶帶來更好的體驗，不斷強調一致性、易用性、可用性等等。但如今，我們放眼手機里的app的用戶體驗，在過去十幾年的積累下，用戶的使用習慣、用戶的認知都得到了很大的提升，產品的基礎體驗也基本都做到了使用流暢、一致性的現狀。
但這卻帶來一個問題：同質化嚴重。
比如，當我們打開電商類的app，發現某東越來越像某寶，xx越來越像xx?？赡芪覀兡ㄈチ薼ogo之后就不知道這究竟是哪家app了。
甚至，我還發現有的公司在設計時是從B抄個設計樣式，再從A抄個設計樣式，最后在從T上抄個樣式，最后設計結果成了大家看到的現象：設計越來越趨同。
大廠的動向
最近這兩年，我們頻頻看到大廠的一些設計動作：品牌升級、設計語言升級。
很多外行人站在一個旁觀者角色對升級的設計嗤之以鼻：“這升級了什么？怎么跟沒做一樣？”“花了幾百萬就做了個這，真不值”…………
實際上，其中的背后不是簡單的設計樣式更換，而是戰略定位的調整。
比如支付寶去年突然換了logo的顏色，而這背后的戰略調整是支付寶升級成生活開放平臺的戰略。
比如淘寶去年也換了字體logo的設計，而這背后的戰略是新淘寶要更好的鏈接內容、用戶、商業。
所以，看到這里，我們首先明確了品牌升級、設計語言升級不僅僅是設計樣式變化，不是設計師隨隨便便設計畫了個圖形，隨隨便便吸了個顏色，而是基于品牌定位與品牌戰略調整的背景，是通過多維度調研，積累了很多有價值的信息，經過科學的分析推導明確了設計方向，最終才形成可落地的品牌升級設計方案。
那么，問題來了！既然品牌升級了，在用戶體驗設計中如何體現新升級的品牌感呢，如何能體現品牌的定位和戰略呢？
當我們在收到品牌設計方案后，就開始面臨到體驗設計升級如何體現品牌感了，這個時候不是倉促的先定義新升級的顏色等樣式問題，而是需要先充分理解戰略背后的意義，理解用戶、理解目標、理解新商業方向……，再聚焦收攏在關鍵點上，從而針對體驗設計中的設計體系定義好設計原則，在最終落地到設計元素上，比如顏色、控件、交互等。
設計過程：品牌戰略理解-收攏關鍵點-定義設計規則-落地設計元素
戰略理解實質上就是公司未來業務調整，方向調整，目標調整，我們的設計一定是基于這個方向的。
比如2016年我在公司一次紅藍戰略定位后進行了2.0生態電商改版，這個紅藍戰略從字面意思理解很抽象，但實質是內容化、視頻化的業務方向，我根據這樣的戰略定位設計了創新的2.0的生態電商設計方案獲得了認可。
理解完戰略方向后，一般會進行一些發散性的收集。比如滴滴在早期幾年前的一次品牌升級分享案例里，那時候升級前品牌語是“滴滴一下美好出行”，后來在專車、順風車業務發展后，各業務定位模糊，需要針對業務重新定位梳理，經過發散了很多關鍵詞，最后針對不同業務線聚焦在舒適、活力、正式三個關鍵詞，形成新的滴滴設計語言。
資料來源：滴滴李大聲《c12d調分享》
設計原則也就是我們設計中的一份指南，是建立在前面的分析推導后，他所傳達的是設計價值觀。指導我們在設計中什么該做什么不該做。
說到這里，這就讓我想起來經?？吹胶芏嘣O計團隊定義自己的設計原則是：清晰、高效、簡潔。這么一看沒毛病，的確設計是要保持信息的清晰傳達、有效的展示、簡潔一些。但這些定義太過寬泛，毫無意義，根本無法指導實際的設計。
設計規則應符合什么規則呢？
首先，設計規則要貼近業務，真實而有效。
比如做外賣的要突出快、服務、準時的定位。做出行的要突出安全的定位。做金融的要突出收益增長等等，我們不能就籠統的把所有的不同行業業務規則都定義成清晰、高效、簡潔，這并不能形成差異。
以平臺要升級為“安全”為例，我們需要知道什么才是“安全”的設計規則，除了綠色、藍色，還有什么行為才會產生產生信任安全感。比如規范、統一、征信公信力、理性的設計。
這樣我們就可以針對升級“安全”的設計體系規范起來，把信息以用理性化的設計來呈現表達。
設計規則要有態度
實際上，每個設計都是有意義的，每個規則的背后都是不平凡的工作。舉個動效的例子，有的設計師會認為動效看起來很酷，那就加的越多越好，結果適得其反，用戶可能因為動效太多太酷不知道該干什么了。
谷歌在他的設計體系里提到“每個動效都是有意義的”，可見谷歌對動效的態度表達了自己獨特的設計規則的魅力。
螞蟻金服在自己設計體系里提到的獨特四點設計價值觀：自然、確定、生長、意義
這每一點都不是簡單的“清晰高效”這么簡單，具有深遠的設計指導意義。以“自然”為例，用戶對圖形、色彩、圖標等視覺感受的信息，遵從自然規律，降低用戶認知成本。舉例：明明紅色是總所周知的警戒顏色，我們用綠色來做警戒色，這就違背了自然規律。
說到這里，我們大概就能清楚明白設計原則的意義了，當面對市面各種設計潮流：抽屜設計風、大字體設計風、新擬物設計風來臨時，我們就可以從設計原則來理性判斷如何取其精華，去其糟粕，為我們的業務和品牌傳播來使用，而不是盲目的追趕潮流
最后，從設計規則推導出來后，到具體的設計元素：顏色、圖標、配圖、文字設計等，我們還需要結合品牌找到具有記憶性的點，形成dna記憶符號，這個記憶符號給用戶在視覺、觸覺等感官上加深印象。
說到最具有品牌記憶點的無疑是耐克、阿迪、可口可樂這些圖形深入人心，還有蒂芙尼藍等等。
比如最近要上市的知乎，核心定位是社區價值，他的logo以及app的開屏都體現了社區交流的屬性。
比如最具阿里云更新的品牌升級，利用光標這個符號貫穿整個設計體系，形成獨特的超級符號，可以說是一個很經典的案例。
資料來源：阿里公眾號
當然，提煉出具有記憶點的品牌dna的超級符號是需要經過長期推演和長期傳播形成的品牌記憶點。
最后，總的來說，當體驗設計遇到品牌升級，不是簡單的畫個圖形，吸個顏色，每個設計背后都有遵循的依據，都有背后的科學分析推導。所以，我們不要再盲目拿清晰、高效、簡潔來作為設計語言的理念了，需要探索真正有獨特觀點，貼近業務，貼近戰略規劃的設計價值理念，來指導未來長遠的設計發展。
文章來源：人人都是產品經理 作者：Hellen詠舍
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計驅動已經成為 vivo品牌重要的產品和服務理念。作為設計師，這意味著我們在承接日常設計需求外，還要主動發現并解決產品中存在的問題。設計提案，就是針對某個問題或機會點，系統分析產品現狀并給出解決方案，以實現設計驅動的重要途徑。
除了設計提案外，設計方法復盤、行業分析報告、流程規范建設等也可作為產出對象，受限于篇幅，本文所介紹的方法主要針對設計提案的選題。
過去的兩年里，UED 團隊的同學們共輸出 40+篇設計提案，我本人也寫過幾篇，踩過一些坑，也積累了一些經驗。總體來說，一份優秀的設計提案當然離不開嚴謹的分析過程、合理的模型選取和可落地性強的解決方案，但更前置的往往是設計提案的選題。
選題體現了我們是否定位了產品中存在的重要問題或設計機會點，決定了選用什么模型分析問題、產出什么解決方案。
△ 圖1 設計提案的執行過程
選題不當可能會導致：寫了一半才發現設計側根本無法解決該問題（比如解決問題主要依賴于內容引進），或者產出了方案但因問題優先級低而無法落地。因此本文主要基于 UED 團隊的實踐經驗，對目標導向的選題常用方法進行介紹，以確保我們的提案在“解決正確的問題”。
設計提案的目的是解決問題，但難點在于：要解決的問題并不是每次都顯而易見，且不是每個問題都適合用提案的方式去解決，產品有什么體驗問題、哪些需要用提案來解決，很多時候需要我們主動去發現和定義。
目標導向的選題方法，就是指從不同的目標出發，通過分析或拆解目標，來定位問題或機會點的選題方法（除此之外，我們還可以通過用戶體驗地圖分析、行業趨勢分析等來發現問題，這些本文暫不涉及）。
“設計是圍繞目標的求解活動① “L. Bruce Archer
按照雙鉆模型，確保”做正確的事”需要經歷發現到收斂的過程，將其用于選題便是選題收集、選題評估兩個階段。在選題收集階段，我們從體驗設計所針對的不同目標出發，通過對目標的分析和拆解找到待解決問題，初步確定多個選題方向。在選題評估階段，我們需要對前一階段得到的若干選題進行價值和提升空間評估，最終定義出合理的選題方向。
△ 圖2 目標導向的提案選題方法
體驗設計是用設計的思維和方法達到某種目標，互聯網產品的體驗設計重點關心的目標主要有商業目標、用戶滿意度、戰略規劃。因此，以目標為導向來收集選題，就是指通過分析影響以上 3 個目標達成的關鍵因素，來收集多個備選選題。
通過拆解商業目標收集選題
通過對留存率、日活數等核心數據指標的拆解來定位關鍵影響因素、確定提案方向，能夠讓提案結果更易量化、產出方案更易落地。
Step 1 了解產品當前階段的主要商業目標
一般來說，產品側每個季度或每年都制定 OKR 或 KPI（如將 vivo 商城復購率從 x%提升至 y%、將瀏覽器的日活從 x 萬提升至 y 萬)。設計師需要明確產品的核心數據指標是什么，尤其關注其中與用戶體驗相關度高的指標。以信息流產品來說，如果其內容主要來自于合作商，那么我們更應該關注閱讀時長和留存等指標，而非資訊內容豐富度指標。
Step 2 對商業目標按多個維度逐層拆解
明確目標后，需要對其進行拆解，才能將結果目標轉化為設計可發力的過程目標。目標的拆解需要確保每次拆解都要符合 MECE（同一維度、不重不漏）原則，常用的拆解維度如下所示。
△ 圖3 商業目標的常用拆解維度
以 vivo 商城為例，假設其 2021 年的目標是：成交轉化率提升 47.6%，達到 0.26%（數據已經過脫敏處理）。我們可以對影響目標達成的要素按照行為路徑進行如下拆解（本案例也可按公式法進行拆解）：
△ 圖4 成交轉化率拆解案例
Step 3 定位影響目標達成的關鍵因素
結構化拆解目標后，即可結合產品迭代歷史和現狀，對影響目標達成的關鍵要素進行定位，進而初步確定提案方向。接上文案例，由于下單→支付環節（即結算頁）的體驗優化剛進行不久，且通過購物車下單的用戶占比較少，因此可將提案方向定位至商品詳頁下單轉化率提升，初步確定選題“商品詳頁下單轉化率提升設計提案”。
通過產品戰略規劃分析收集選題
如果說商業目標是產品預期達到的結果，那么戰略規劃就是達到結果所計劃采取的路徑。從戰略規劃出發，構建新功能、解決新問題，協助產品達成戰略規劃，是提案可嘗試的重要方向。
方法 1 通過構建新功能幫助產品達成規劃
不同于商業目標，戰略規劃往往已經給出了接下來要重點發力方向、或給出了功能范圍。但一些情況下，規劃并不會具體到該方向上要做哪些功能以及做成什么樣。因此，設計師可以基于戰略規劃，以提案的形式對設計機會點和方案進行詳細分析，以協助產品達成規劃。
以 vivo 的一款視頻產品為例，為了提升時長，產品側計劃 Q1 季度提升視頻內容消費深度，但尚未給出從功能層面具體要做哪些改進。因此我們將提升用戶消費深度為提案目標，深入分析了深度消費的現狀和場景，提出了若干設計優化建議。
方法 2 通過解決新問題幫助產品達成規劃
由于產品功能模塊之間存在耦合關系，規劃中的新增業務可能使得已有功能體驗跟不上業務要求（比如信息流產品發力視頻方向，可能會對下載視頻的體驗帶來新要求）。通過分析新增業務涉及的場景和使用鏈路，發現鏈路中可能出現的新問題，是從戰略規劃出發確定選題的方法之一。
以 vivo 帳號業務為例，有個性化頭像昵稱的帳號一直以來占比都較少，由于之前社交場景較少，這種現狀對產品體驗影響不大。但隨著公司在直播、視頻等內容產品投入的增加，社交場景逐漸變多，頭像和昵稱也逐漸成為用戶社交的阻礙因素（比如使得主播與觀眾無法正常打招呼）。因此我們對現狀造成的問題進行了系統摸排，確定了將“提升帳號用戶信息完整度”作為提案方向。
通過用戶滿意度分析收集選題
除幫助產品達成商業目標和戰略規劃外，提升用戶滿意度也是體驗設計的重要目標?；诋a品用戶滿意度現狀和目標分析，我們有望快速定位產品中的低滿意度模塊，確定提案方向和范圍。
方法 1 通過滿意度調研數據定位問題
選題前期可廣泛閱讀相關調研資料和用戶反饋，對產品的滿意度情況有較為全面的認識。用戶滿意度可能來自于以下渠道：
由于不同渠道（甚至同一份報告）得到的滿意度數據可能較為分散，我們需要將低滿因素按功能模塊歸類，以便更好地定位問題。以 vivo 商城為例，通過閱讀商品詳頁用戶滿意度報告，并對低滿意度反饋進行歸類，我們發現低滿因素主要集中于以下兩個方面：
△ 圖5 商品詳情頁評價數據歸類
明確了低滿模塊及問題歸因，便可從問題出發得出提案主題。通過對 vivo 商城商詳頁問題的歸因，可確定如下提案主題：“商品詳情頁信息展示優化設計提案”或“評論發表率提升設計提案”。
方法 2 通過用戶情緒曲線分析定位問題
即使沒有滿意度調研數據，或有整體滿意度數據但沒有具體到功能，我們仍然可以通過繪制用戶體驗地圖、分析用戶情緒曲線，來定位滿意度低的模塊、確定選題方向。
繪制用戶體驗地圖的方法和傳統過程的區別不大：首先明確產品中用戶的主要任務或目標，列舉出用戶的主要行為路徑；然后基于用戶的目標，考慮用戶在每個環節想要的是什么，分析當前行為路徑中可能存在的用戶痛點或機會點。需要注意的是，由于只是收集提案選題，對場景和問題的分析不必過于深入，只需發現哪個任務或模塊體驗問題較多即可。
比如通過對 vivo 視頻用戶觀影行為的興趣曲線分析，我們發現看劇方面的體驗問題不大，但找劇（尤其是看劇前的找?。┐嬖诘耐袋c較多，因此可將找劇行為優化作為提案方向。
△ 圖6 追劇行為用戶體驗地圖（已簡化，僅供參考）
方法 3 通過產品功能競品分析定位問題
如果說情緒曲線是通過分析用戶執行任務的流程來發現問題，那么競品分析則是通過分析產品所滿足的用戶需求來發現問題。雖然功能多并不能代表體驗好，但基礎功能的缺失也可能帶來體驗問題。因此從功能范圍的維度進行競品分析，定位基礎體驗較差、或設計機會點較多的模塊，也是收集提案選題的方法之一。
為了讓我們在做競品分析時更加聚焦，對于復雜度較高的產品，我們有必要先按照功能模塊拆分，復雜度越高拆分粒度越細，反之則越粗。以 vivo 瀏覽器為例，若只拆分為搜索、信息流模塊則粒度太粗，可將某個模塊繼續拆分，以便進行競品對比時更加聚焦。
△ 圖7 瀏覽器信息流功能模塊拆分示例
拆分功能模塊后，接下來就是選擇競品了。需要強調的是，針對某個模塊做競品分析，競品應優先選取該功能模塊做的相對成熟的、有特點的競品，而不是只選擇主屬性相同的產品。比如要分析瀏覽器信息流評論功能與競品的差距，選取的競品可不局限于瀏覽器類產品，網易云音樂、今日頭條等 APP 都可作為對比對象。
選取競品后，可從結構層、框架層等方面對本品和競品間的體驗進行對比，以便發現存在明顯體驗短板的功能模塊。為了方便定位問題，可通過模塊子功能對照表對完整性進行可視化對比。當然也可以從操作反饋、美觀度等維度對比。
△ 圖8 信息流評論與主流競品功能對比
找出功能缺失嚴重、或使用體驗明顯低于競品的模塊后，可考慮將優化該模塊的體驗作為選題。比如通過將瀏覽器信息流評論模塊與競品對比后發現，其整體體驗均遠低于競品，因此可考慮將“信息流評論優化設計”作為提案選題方向。
小結
以上是 3 個以目標為導向發現問題、收集提案方向的方法，可根據產品現狀選擇部分或全部使用。發現問題階段一般來說需要至少得到 3 個以上待選提案主題，以便進一步評估確定。
得到多個備選主題后，接下來我們需要對其進行綜合評估，并最終篩選確定一個（如果是多人參與，也可以確定多個）當前階段重點著手解決的問題。
規范化選題描述
僅僅一行選題題目并不能幫助我們清晰地了解其價值和背景，為了方便評估和對比，我們需要將選題的描述規范化。由于設計提案選題和研究論文選題過程類似，因此可以借用《研究是一門藝術》②中給出的論文選題三段式模板：“我打算寫_，因為我想_，這樣就能_”來清楚定義選題的題目、要解決的問題、以及期望達成的目標。比如，我們打算以提升商城評價發表率為提案方向，可將其規范化描述如下：
△ 圖9 提案選題描述模板
對選題的價值和預期結果進行評估
通過模板我們描述了提案要解決什么問題、以及解決該問題給業務帶來的價值。接下來需要對備選選題按業務價值和提升空間兩個維度進行評估，目的是排除“問題存在但價值較小”或“價值大但設計側難以解決”的選題。
當備選選題難以決策時，我們也可以繪制一個簡單的二維坐標對其進行量化評估。比如，假設選題 1 是優化購物車使用體驗，選題 2 是提升商品搜索效率，如果前期預研發現設計側提升空間差異不大，但優化搜索帶來的價值相對較高，那我們就可初步確定選題 2 為提案方向。
△ 圖10 提案選題評估維度
與設計 leader 或產品經理溝通確認
受限于經驗和視野，設計師個人對選題價值的評估和設計 leader、產品經理間可能有所不同。因此正式敲定選題前，最好與設計 leader 及產品經理進行同步，達成一致后方可正式開始提案的撰寫。
小結
該階段的目的是對前期發散得到的選題方向進行評估篩選，以便將個人精力聚焦在提升空間大、價值大的選題上。為此我們首先需要按模板對選題方向進行整理，再對選題按設計側提升空間、業務價值大小兩個維度進行評估，最后與相關方溝通確認，最終敲定選題方向。
文章來源：優設 作者：VMIC UED.Vector
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
招行估計是考慮到沒有配置現任經理的詳情，又不想浪費標題右側的空間，才作此設計。
其他相關：這部分包含的基金公司、基金檔案、交易規則屬于并列關系，理應出現的分割線卻沒有體現，雖不影響投資者使用但反映出UI組件規范缺乏一定邏輯性。
交易規則：在購買時間點缺少了T日（交易日）收盤時間（15:00前）提示和周歷提示。頁面空間是富余的，完全可以將信息曝光提高投資者的時間感知度，而不是跳轉二級頁面才能了解詳情。
功能模塊十分豐富，cover了關于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測、持倉、經理介紹等內容，間接的包含了問答、討論、資訊、公告等內容。
在產品的廣度與深度方面，天天基金選擇了把廣度拉寬，將很多二級內容拍平，嵌入到一級頁面中，可以說非常適合經驗型投資者，但隨之而來的劣勢也十分明顯 - 頁面過長。
非常直觀，天天的基金頁面長度是招行（或螞蟻）的兩倍不止。
有了上面招行基金詳情頁的大致結構做支撐，這里就不把天天基金的頁面逐個模塊拆解分析了，我們挑一些有意思的來說。
基金概況：跟隨漲跌變化的紅/綠頁頭，這是天天最具標志性的設計之一，個人對此保留意見，這么大面積綠色在過去的一周，實在是令人焦慮。
凈值行情/歷史數據：天天基金在凈值模塊單列出了“單位凈值”和“累計凈值”的走勢圖，還直接標明了不同時段區間內的最高最低值。（“累計凈值”是基金自成立之日起至今的凈值表現，“單位凈值”是基金運作期間扣除分紅和份額拆分影響之后的凈值表現。）
聽說這是區分老基民和新人小白最直接的一道坎，當然作為一個UX設計師，我也就摻這一句，畢竟資格還遠遠夠不上老基民。
非常貼心的一點是，天天在這添加了定投該產品的收益可視化。根據歷史收益率回測和不同定投算法，進行一段時間內的收益率估算。與此類似設計的產品還有漲樂財富通。
特色數據：這也是經驗投資者非常重視的三個指標。波動率反映收益率波動的程度，越小越好；夏普比率指基金每承受一點風險能夠獲得多少超額收益，越高越好；最大回撤指基金凈值從最高到最低的降幅，越小越好。
基金持倉：這又是一個老基民的福利專區。上面分析過招行基金持倉tab的優勢，而天天直接把帶有重倉股盤中行情的持倉列表、資產/行業分布餅圖直接嵌入到一級頁面里，雖然默認只顯示前五只重倉股，但對于了解相關板塊行情也很有幫助。
這一模塊的二級頁面也支持投資者切換時間去觀察基金經理每一季度的調倉風格。其實我個人更傾向于直接把十大重倉股行情全都放進來，默認折疊需要時展開。畢竟調倉不是個高頻動作，我不會需要頻繁地跳進二級頁面去觀察調倉。
基金經理：作為后臺烹飪的cook，這塊的簡介過于“簡潔”了。其實次一級的經理詳情頁里有非常詳實的背景概述和任期間業績回報評估，完全可以精選一些標簽化的內容在一級模塊里完善包裝。
社交化：然后比較有意思的就是“社區”概念。天天基金上每只基金都分別有兩個“bar”，一個問答吧一個貼吧，貼吧包含了問答吧。
這里能體現出天天對于細分場景的重視。貼吧里的話題天南海北，吐槽的、圍觀的、提問的、表態的、發小作文的、曬收益/虧損的，啥都有。
天天的產品經理還是為提問用戶單獨開辟了一片凈土，讓內容的傳播與觸達更加高效。
回到UI層面，天天基金頁面的文本內容在邏輯結構上比較復雜，但視覺上沒有將不同層級的對比度拉開，導致文本信息過于平均，不利于重點信息的快速檢索。
財富號視頻：視頻可以展開和收起。產品還給它配置了觀看人次，側面為該基金公司和旗下基金產品做熱度營銷。
基金概況：除了基金相關的基本信息以外，模塊內展示了晨星評級和關注人氣。既有客觀權威評估體系，也有用戶層的氛圍烘托，通過兩層信任力建設占領用戶心智。
信任力背書：“支付寶金選”是由支付寶理財智庫、中國證券報聯合推出的一套理財產品評估體系，背后有一些專家KOL背書。能夠篩選出部分歷史業績表現優異、基金經理業績突出的產品。
相比于前幾個信任力的營造，這一點的重要性和優先級遠遠勝出。因此在視覺層面也用黑金配色體現出權威性和尊享感。
能夠很明顯地察覺到互金平臺和金融機構在產品包裝上的玩法不同：互金平臺傾向于權威背書和人氣營銷，金融機構傾向于指標構建和數據展示。
行情/數據：這一模塊增加了一個可以手動關閉的tag，是關于“風險回報比率”的描述，一個聽上去類似“夏普比率”的指標。優勢在于螞蟻直接量化轉譯了指標的結果——“好于同類98%基金”，省去了投資者分析指標的過程。
基金經理介紹：關于這部分，雖然在基金經理介紹的二級詳情頁里，天天基金比螞蟻財富要詳實得多，但一級模塊里螞蟻的人物包裝還是更到位。“金牛獎得主”和學歷/從業背景簡述能直觀地提高產品在用戶側的信任力。
持倉行情：這可以說是該頁面視覺創新的重頭戲。螞蟻財富由于相關個股數據缺失，并不能像招行和天天基金那樣橫向比對每個季度基金經理的調倉動作，對于經驗投資者研判這只基金來說，少了一個觀察維度。
而視覺層面的創新則顯得十分取巧，原本枯燥的個股行情列表被轉譯為可視化的矩陣，矩形的大小和底色能直接映射該股票的持倉占比和實時行情。并且橫向滑動的組件也支持在不跳轉的情況下完整顯示10只重倉股。
對于持有或長期關注這只基金的用戶而言，除非你要分析調倉，否則是不需要頻繁進入二級頁面查看持倉明細的。
以及細致到小數點后兩位的持倉占比，意義也不大，了解大致的配比關系即可。螞蟻這個可視化組件在帶來新穎視覺觀感的同時，也解決了這一問題。
對于產品而言，信息架構往往是最容易有爭議的部分。而金融產品的信息深度和業務復雜度尤為明顯，與之俱來的必然是各平臺在架構策略上百花齊放。
文章來源：站酷 作者：loven
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章目錄
一.函數防抖
二、函數節流
1.時間戳實現
2.定時器實現
3.用節流優化防抖(定時器+時間戳)
三、總結
四、例子
一.函數防抖
當持續觸發事件時，并不執行事件處理函數，一定時間段內沒有再觸發事件，事件處理函數才會執行一次；如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。
function debounce(fn, delay) {
// 定時器
let timer = null
// 將debounce處理結果當作函數返回
return function () {
// 保留調用時的this上下文
let context = this
// 保留調用時傳入的參數
let args = arguments
// 每次事件被觸發時，都去清除之前的舊定時器
if(timer) {
clearTimeout(timer)
}
// 設立新定時器
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}
當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。
3.用節流優化防抖(定時器+時間戳)
防抖的問題在于如果用戶的操作十分頻繁——他每次都不等 設置的 delay 時間結束就進行下一次操作，于是每次都為該用戶重新生成定時器，回調函數被延遲了不計其數次。 頻繁的延遲會導致用戶遲遲得不到響應，用戶同樣會產生“這個頁面卡死了”的觀感。
用節流來優化，保證在一定時間段內會調用一次事件處理函數。
function throttle(fn, delay) {
// last為上一次觸發回調的時間, timer是定時器
let last = 0, timer = null
// 將throttle處理結果當作函數返回
return function () {
// 保留調用時的this上下文
let context = this
// 保留調用時傳入的參數
let args = arguments
// 記錄本次觸發回調的時間
let now = +new Date()
// +是一元操作符，利用js隱式轉換將其他類型變為數字類型
// 判斷上次觸發的時間和本次觸發的時間差是否小于時間間隔的閾值
if (now - last < delay) {
// 如果時間間隔小于我們設定的時間間隔閾值，則為本次觸發操作設立一個新的定時器
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, delay)
} else {
// 如果時間間隔超出了我們設定的時間間隔閾值，那就不等了，無論如何要反饋給用戶一次響應
last = now
fn.apply(context, args)
}
}
}
三、總結
函數防抖：將幾次操作合并為一此操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。
函數節流：使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。
區別： 函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最后一次事件后才觸發一次函數。
場景：比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流技術來實現。
轉自：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
異常包括的主要關鍵字有try{}catch（）{}finally{} throw和throws五個關鍵字 。
下面我們來細說一下這五個關鍵字分別有什么用。
try catch關鍵字 這兩個關鍵字是連用的
1.如果try塊中的語句正常執行完畢，不會發生異常則catch塊中的語句都將會被忽略。
2.如果try語句塊在執行中遇到異常。并且這個異常與catch中聲明的異常類型相匹配，那么在try塊中其余剩下的代碼都將被忽略。
3.如果try語句塊在執行過程中遇到異常，而拋出的異常在catch塊中沒有被聲明，那么程序立刻退出。
finally關鍵字這個關鍵字中的代碼總能被執行（怎么我都要執行 ）
1.只要try中所有語句正常執行完畢，那么finally塊就會被執行。
2.如果try語句塊在執行過程中碰到異常，無論這種異常能否被catch塊捕獲到，都將執行finally塊中的代碼。
注：try—catch—finally結構中try塊是必需的catch和finally塊為可選，但兩者至少須出現其中之一。
如果catch中存在return，finally也會執行只不過執行的順序有一定差異 ，先執行catch里的代碼塊，之后執行finally里的代碼塊，最后執行return語句。
throw關鍵字拋出異常
throws關鍵字聲明捕捉異常
那么throw和throws有什么區別呢
1.作用不同：throw用于在程序中拋出異常；throws用于聲明在該方法內拋出異常。
2.使用的位置不同：throw位于方法體內部，可以作為單獨語句使用；throws必須跟在方法參數列表的后面，不能單獨使用。
3.內容不同：throw拋出一個異常對象，而且只能有一個；throws后面跟異常類，而且可以跟多個異常類。
知道了這五個關鍵字的用法下面我們來說一下幾個常用的異常代碼：
1.ArithmeticException 試圖除以0。
2.NullpointerException 當程序訪問一個空對象的成員變量或方法，訪問一個空數組的成員時發生。
3.ClassCastException 發生多態后，吐過強制轉換的并不是父類的子類時發生。編譯的時候可以通過，以為編譯的時候并不會檢查類型轉換的問題。
4.ArraylndwxOutOfBoundsException 訪問的元素下標超過數組長度
5.NumberFormatException 數字格式異常。
6.Exception 一般的異常都包括。
轉自：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
運動對數字產品的用戶體驗產生了深遠的影響，但是，如果界面元素沒有表現出基本的運動設計原理，則可用性會受到損害。在用戶界面的上下文中，動作不僅僅是視覺裝飾。它是一種強大的力量，可增強產品參與度并擴展設計交流的范圍。
我們的世界是運動之一。即使在靜止的瞬間，葉子也會發抖，肺部也會擴張。在數字產品設計領域，運動似乎是第二自然，這是對日常工作的擴展，可以毫不費力地加以利用。
從理論上講，使UI元素移動很容易。在預定路徑上定義點，然后軟件對間隙進行補間。實際上，它不是那樣工作的。工具和技術是必不可少的，但它們是從原理中獲取力量的。如果要提高數字產品的可用性，就必須以適用于無數用例的不變行為規則為基礎。
運動設計的起源
運動設計與UX的結合相對較新，但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運動的基本定律。它們使繪制的角色能夠移動和表情，但不能充分滿足現代用戶界面對交互運動的需求。
當代設計師試圖彌合這一差距。更具說明性的示例之一是動畫設計的十項原則，這是迪士尼動畫專家Jorge R. Canedo Estrada的改編作品。
在建立運動中用戶體驗的原則時，可以從以下幾點入手
A. 從UI動畫中區分運動設計
B. 闡明運動如何幫助可用性
C. 解開核心運動行為的內部運作方式
運動不僅僅是裝飾
動作設計不是UI動畫的代名詞。這一點很關鍵，因為UI動畫幾乎總是被當作一種經過深思熟慮的外觀，而與UX沒有任何關系（除了增加魅力）。動作不是裝飾，而是行為，行為只能幫助或阻礙用戶體驗。
兩種互動類型：實時與非實時
運動設計涉及兩個基本交互：實時和非實時。
當用戶在屏幕上操作UI元素時，實時交互可提供即時反饋。換句話說，動作行為會立即響應用戶輸入。
用戶輸入后會發生非實時交互，這意味著用戶必須短暫暫停并觀察所產生的運動行為，然后才能繼續。
實時交互：運動行為會立即響應用戶輸入。
非實時交互：交互后，用戶必須短暫等待并觀察動作行為。
運動支持可用性
運動設計必須以四種不同的方式支持可用性。
A. 期望：當用戶與UI元素交互時，他們期望看到哪些運動行為？運動是否符合預期或引起混亂？
B. 連續性：交互是否在整個用戶體驗中產生一致的運動行為？
C. 敘述：交互及其觸發的動作行為是否與滿足用戶意圖的事件的邏輯進程相關聯？
D. 關系： UI元素的空間，美學和層次屬性如何相互關聯并影響用戶的決策？運動如何影響存在的各種元素關系？
數字產品的12種運動設計原理
1.緩和
緩和模仿現實對象隨時間加速和減速的方式。它適用于所有顯示運動的UI元素。
放松的反面是線性運動。顯示線性運動的UI元素立即從固定速度變為全速，從全速變為固定。這種行為在物理世界中不存在，并且對于用戶而言似乎停滯不前。
UI卡和相應的椅子移動很快，但是由于緩和，它們可以平穩且受控地停下來。
2.偏移和延遲
當多個UI元素同時且快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素可能具有其自身功能的可能性。
偏移和延遲會在同時移動的UI元素之間創建層次結構，并傳達它們是相關的但又不同的信息。元素的時序，速度和間距不是完全同步，而是交錯排列，從而產生微妙的“一個接一個”的效果。
當用戶在屏幕之間漫游時，偏移和延遲表明存在多個交互選項。
這個加密貨幣應用程序一次引入了多個UI元素。它們的到來有些交錯，以通知用戶這些元素是相關的，但又是截然不同的。
3.父子元素關聯
父子元素關聯將一個UI元素的屬性鏈接到其他UI元素的屬性。當父元素中的屬性更改時，子元素的鏈接屬性也會更改。所有元素屬性可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當父元素移動時，子元素的大小會增加或減小。
父子元素關聯會在UI元素之間創建關系，建立層次結構，并允許多個元素立即與用戶進行通信。因此，關聯在實時交互中使用時影響最大。
藍色滑塊的位置控制背景遮罩的不透明度，燈泡周圍的發光效果的散布以及光強度標度的數值。
4.轉型
當一個UI元素變成另一個UI元素時，將發生轉換。例如，下載按鈕將轉換為進度條，該進度條將轉換為完成圖標。
從UX的角度來看，轉換是一種向用戶顯示其相對于目標的狀態（系統狀態的可見性）的有效方法。當UI元素之間的進度鏈接到帶有開始和結束的過程（例如，下載文件）時，這特別有用。
轉換表示下載的開始，中間和完成。
5.數據變化
在數字界面中，數據表示（數字，基于文本或圖形的表示）豐富，出現在從銀行應用程序到個人日歷到電子商務站點的產品中。由于這些表示形式與實際存在的數據集相關聯，因此它們可能會發生變化。
值的變化傳達了數據表示的動態性質，并告知用戶數據是交互式的，并且可能會受到一定程度的影響。當沒有動靜地引入值時，用戶參與數據的意愿降低。
動態引入值以向用戶顯示他們有能力影響數據。
6.遮罩
遮罩是UI元素各部分的戰略性揭示和隱藏。通過更改元素外圍的形狀和比例，遮罩會發出信號，表示實用性發生了變化，同時允許元素本身保持可識別性。因此，理想的選擇是諸如照片和插圖之類的詳細視覺效果。
從可用性的角度來看，設計人員可以實施屏蔽以向用戶顯示他們正在通過一系列交互進行中。
遮罩用于從圖像捕獲到上傳到在線店面中的過渡。
7.疊加
在2D空間中，沒有深度，UI元素只能沿X軸或Y軸移動。疊加會在UI的2D空間中產生前景色/背景色的錯覺。通過模擬深度，覆蓋可以根據用戶需要隱藏和顯示元素。
使用重疊時，信息層次結構是一個重要的考慮因素。例如，用戶在做筆記應用程序中應該首先看到的是他們的筆記列表。然后，可以使用滑動來公開每個消息的輔助選項，例如刪除或存檔。
重疊式運動可讓用戶快速歸檔或刪除此記事應用中的條目。
8.克隆
克隆是一種運動行為，其中一個UI元素拆分為其他元素。這是突出顯示重要信息或交互選項的聰明方法。
當UI元素在界面中實現時，它們需要一個清晰的起點來鏈接到屏幕上已經存在的元素。如果元素只是無處不在而突然爆發或消失，則用戶將缺乏進行自信交互所需要的上下文。
用戶可以放心地單擊彩色圓圈，因為它們顯然源自“添加注釋”圖標。
9.模糊
想象磨砂玻璃門。它需要交互才能打開，但是可以（在某種程度上）辨別另一端正在等待什么。
它為用戶提供了一個界面，該界面要求進行交互，同時顯示要跟隨的屏幕提示。導航菜單，密碼屏幕和文件夾/文件窗口是常見的示例。
模糊處理為用戶提供了重要的互動方式，同時讓他們保持產品敘事的方向。
10.視差
當兩個（或多個）UI元素同時移動但速度不同時，將顯示視差。在此，目的是建立層次結構。
A. 交互式元素移動速度更快，并顯示在前景中。
B. 非交互式元素的移動速度變慢并退回到背景。
視差引導用戶使用交互式UI元素，同時允許非交互式元素保留在屏幕上并保持設計統一性。
使用視差時，最重要的交互式元素移動最快，而非交互式元素移動較慢并退回到背景。
11.維度
維度使UI元素似乎具有多個交互方面，就像物理世界中的對象一樣。通過使元素看起來像是可折疊的，可翻轉的，浮動的或具有逼真的深度屬性而實現的。
作為一種敘事設備，維度意味著UI元素的不同側面被鏈接在一起，并實現了無縫的屏幕過渡。
維度意味著2D UI元素具有多個交互方面，就像物理世界中的對象一樣。
12.變焦
滾動和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細節。
A. 滾動：滾動視角發生在用戶的角度更接近（或遠離）UI元素時。想象一下，一個拿著照相機的人走到一朵花前要近距離拍攝。
B. 縮放：使用縮放時，用戶的視點和UI元素保持固定，但是該元素在用戶屏幕內的大小增加（或減?。，F在，假設該人保持姿勢并使用相機的變焦功能使花朵顯得更大。
滾動：用戶的視點似乎越來越接近背景圖像。
縮放：用戶的視角不會更接近圖像。而是圖像的比例會增加。
運動就是溝通
互動體驗的需求運動在其所有的輕快和微妙的形式。當堅持運動設計原則時，即使最基本的UI元素也成為人類交流的復雜媒介。當這些原理被忽略時，運動就體現了自然界所沒有的特征。
運動設計與數字產品UX之間的關系正在迅速成熟。原則上的運動方法可以防止過度依賴趨勢，工具和技術的短暫使用。更好的是，它跨越了2D屏幕上元素的抽象運動與3D世界中運動感知之間的鴻溝。
文章來源：站酷 作者：DuiaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn