圖標在設計中是一個最為基礎的設計元素之一，對這部分知識花再多時間研究練習都是值得的，哪怕是工作多年的設計老手，也很難說自己把圖標設計，做到出類拔萃了。所以不論是溫故知新又或是學習精進，花上幾分鐘看看這篇超干的文章，定有收獲。
本文會著重介紹圖標基礎規則，深入探討圖標的視覺重量和對齊問題。
一個界面中的圖標通?？梢越频乜闯墒且恍┗拘蔚慕M合：橫向矩形、縱向矩形、傾斜矩形、圓形、三角形、正方形。模糊地看它們有相同的視覺重量，因為它們或多或少的變成了相同的斑點。
△ 圖標的基本輪廓
根據圖標的形狀，將其嵌入到對應柵格中。例如，方形圖標比三角形或細長的圖標更緊湊些。
△ 圖標在柵格中
△ 柵格中的基本圖形
圖標越緊湊，需要的空間就越少。圖標銳利的邊緣或小細節越多，它在畫板上占據的空間就越大。
△ 圖標示例，柵格中可以放不同異形的圖標
△ 柵格中放更多細節的基本圖形：方形，圓形，三角形
當心成為柵格的奴隸，柵格是用來輔助你而不是去限制你的。如果一個圖標因為一些突出的元素而在視覺上有更好的效果，那就讓它們突出。
為了使圖標在非視網膜屏幕上清晰可見，請堅持使用像素網格并在線性圖標上優先使用2px粗細的描邊。2px居中對齊的描邊通常會提供足夠的粗細和清晰的輪廓
△ 2像素線型圖標示例
△ 2像素線型圖標示例
如果圖標選擇了1px的描邊，則應該使用內描邊或外描邊而不是居中的。
△ 1像素外描邊圖標示例
△ 1像素外描邊圖標示例
1px的居中描邊會使圖標在放大到100%的情況下變的模糊，但如果放的更大會顯的清晰。
△ 1像素居中描邊線型圖標示例
△ 1像素居中描邊線型圖標示例
根據像素網格去設置斜線的起點和終點。當斜線的角度為45°，30°和60°時會比不規則角度（像13.7°或81°）更清晰。如今仍有數百萬人在使用低分辨率的屏幕設備，這就是為什么圖標的清晰度仍然很重要的原因。
△ 矢量和位圖圖標示例
最好從復雜的圖標開始去創建一個圖標集。它將定義詳細程度，并且對設計具有相同視覺重量的圖標們有幫助。
△ 不同細節程度的圖標示例
當圖標的細節程度不一樣時，細節越多的圖標越能吸引用戶的注意力，并且看起來視覺重量越大。
△ 細節不一致
在整個圖標集中，圖標內部相鄰元素的間距不應太小或不一致。定義最小間距并在各處以同樣的方式使用，以避免輪廓「粘連」。
△ 不一致的間隙
△ 間隙統一
對于線型圖標，最好使最小間距和線條的粗細相等。線條要么清晰地分開，要么精確地連在一起，永遠不要含糊不清。
△ 不一致的間隙
△ 間隙統一
在圖標集中，可能會有些重復的細節。刪掉它們，讓用戶的注意力集中在它們不同的地方，就像是數學里分數要約分（化簡分數）一樣。你看到的視覺干擾越少，你對它的理解就越清晰。
如果目標用戶已經明白他或她使用的是什么，那就沒必要一遍遍的重復。例如：避免使用基于信封的圖標不會讓人覺得這不是一個郵箱類app。（有點繞口，意思是：不用添加相關系列類的輔助圖標也會讓人知道這是一個郵箱類app）
這條規則也適用于圖標周圍的裝飾（框架，背景）。如果這些對圖標的識別性沒幫助，則它們就會對圖標識別產生阻礙。
不要將不同樣式，不同角度地元素混合在同一個圖標集中。一致的風格會對用戶識別圖標有所幫助并讓用戶明白這些圖標有同等的重要性和狀態。
△ 同一緯度的圖標
△ 不同維度的圖標
同樣的原理也適用于線型圖標和面型圖標。如果你把它們混在一起，人們可能會認為它們有不同的重要性或狀態。當然，除非你是故意的。例如，面型圖標用于關鍵的指令，線型圖標用于其他的指令。
△ 一組一致性圖標
△ 一組不一致的圖標
在界面中擁有兩種不同的圖標是很好的。線型圖標用作不可點擊或正常狀態，面型圖標用于點擊狀態。
8px網格和12列布局常用于許多界面，與基于十進制的尺寸相比更加靈活。12可以被2、3、4、6整除。因此24或48px的圖標已成為了標準。如果需要更大的尺寸，可以對他們進行縮放。
完美主義不是我們的目標：沒有人需要為了像素完美而去追求完美的線條。但是，這對于產品中最終呈現正確而不失真的圖標是很重要的。記住圖形中錨點數量達到最少并且相鄰元素之間不要有間隙。
△ 矢量圖標的調整與優化
還有那些煩人的「8.999px」或「100.001px」呢？如果錨點的位置很準確，圖標的邊緣看起來就會很清晰。此外，在合并形狀時，也不會有出現多余錨點和間隙的風險。
△ 矢量圖標的調整與優化
許多設計軟件（例如sketch）生成的svg文件都帶有不必要的文件——多余的編組，顏色圖層和剪切蒙版。讓我們看看，在sketch中，一切看起來似乎都不錯。
△ sketch中的圖標示例
在其它軟件中打開這個SVG文件（例如Ai中），你會看到很多空圖層，不必要的編組，有時還會有剪切蒙版。當前端開發人員將圖標轉換成圖標字體或在網頁上使用SVG文件的時候，這些都可能導致出現問題。
△ Ai中的圖標示例
你可以刪除這些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator編輯后生成的SVG文件（picture_new.svg）在文件查看器中預覽的效果不一樣。順便說下，也可以在代碼編輯器中刪除這些垃圾圖層。如果你知道SVG代碼的樣子，可以嘗試下直接刪除不必要的數據字符串。
當然，這些建議并不是不可打破的規則。如果你知道自己在做什么，請隨時跳過它們。在我看來至少在兩種情況下嚴肅的幾何圖標不是最好的選擇。
空狀態。如果你正在設計一個頁面的空狀態（缺省頁）如「沒有任務了」或「所有郵件已讀」，那么最好是用情感化的圖標來表現或者只用文字去說明。情感化圖標會使用戶感到快樂，而沒有情感的幾何圖標不會增加任何交互價值。
吉祥物和插圖。如果屏幕上你的界面中有吉祥物或者插圖，這種圖案應該是感性的。我不知道設計師是如何通過有限的形狀選擇和堅持使用網格去刻畫一個角色的。
還有一件事。在一些特殊情況下最好問問自己是否真的需要圖標。這是解決問題的最好方式嗎？寫點有意義的文字呢？要注意使用時的平衡，否則，可愛、時髦的圖標將會讓人感到沮喪，所有的努力都將是徒勞的。
文章來源：優設網 作者：彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么那么多人覺得應該先學UI設計再學交互設計，因為UI門檻低所以入手快。其實交互比UI更早出現，從需求理論可以看出人們在追逐主觀體驗的感受，在基礎需求未被滿足前是不會出現更高層次的需求的。所以UI設計讓更多用戶感受到了舒適和更好的體驗。殊不知，如果底層的交互和產品的可用性未被滿足，那么UI做的再好也是徒勞。
市面上大量出現同質化產品、設計，就是因為大家都在按照現有的，常用的模版在設計，現在其實比早兩年會好很多，很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。
例如下面的案例，這是一個電瓶車電池租賃的一個產品。
從美觀角度，左側的界面更加簡潔信息也有規律，有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時，大家在第一反應中，有多少人可以重啟自己的視角，還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢？
如果讓你盯著第一個界面進行改版，我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來，或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的，即便將錯誤路徑3改成了路徑2，你以然還是在錯誤的路徑上，本質沒變。所以為什么我們說要做正確的事而不是正確的做事。
交互不僅僅能夠讓產品好用的，也要讓產品走對方向。
另外，UI也是交互的一部分，屬于看的懂。好用可以分為看得懂，學的快，用的會，交互體現在人們日常所接觸到的大部分媒介，并且與之產生聯系。例如一把水壺，水壺的設計形式首先通過視覺讓你感知這是一個水壺，如果把水壺的外形做成一個馬桶，你覺得它還是一個水壺嗎，這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作，例如裝水、倒水。而用的會就是這個水壺更多的附加功能，例如燒水、定時、調溫等等。
交互的媒介是不可缺少的，大家是否去研究過為什么古代人們撰寫文字是從上至下，從右往左而現代人的習慣是從左右的？古代受限于工具、媒介，竹簡是主流的記錄文字信息的媒介， 有人會說竹簡可以從做往右寫不是非要從上往下啊，但是大家可以看到人們是如何打開進行閱讀的，如果是橫著閱讀但是打開是上下展開就會非常不自然了。
所以在當時人們為了適應非常有限的工具資源，改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮，那基本也就涼涼了。
從2g到5g時代的發展，除了生活方式發生翻天覆地的變化外，我們所接觸到的媒介也發生了變化，從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步，讓人們對信息的獲取更加方便快捷。除了內容，外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化，從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機，改變了我們的認知也改變了我們的生活方式。
平臺遷移的交互成本，很多同學可能都玩過moba類游戲-dota，這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制，鍵盤用來控制技能的釋放和其他快捷物品的使用，都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標，這是端游中基本的交互行為與操作。
在現在非?；馃岵⑶夷Ｊ胶蚫ota相似度很高的王者榮耀手游中，我們看到了，如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動，右手拇指來控制技能的釋放，在這里大家要注意，在端游中技能的釋放是可以非常精準的，并且可以指向性釋放在某一個角色中，但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能，但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上，所以手游中只能進行非指向性的預判技能釋放。
同樣在端游和手游的吃雞游戲中，端游鍵盤控制人物移動，鼠標控制射擊與視角，但是在手游中控制射擊與視角就需要2個手指來完成非常不方便，也很影響射擊的精度，但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備，專門用來給多余的手指進行射擊操作。
另外，大家如果做b端的同學應該也深有感觸，平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事，因為在網頁端我們有大量的空間和更自由的控件形式去承載信息，比如聯動的左側標簽導航和頂部聯動的標簽導航，在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航，但是頁面顯示實在有限，很多的信息完全無法在一個界面中呈現，所以要么將頁面進行左右滑動，要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。
web端的工具和網頁通常都會有撤銷操作，按CMD（ctrl）+Z大部分都可進行撤銷上一步操作，但是在移動端我們無法通過特定、或者統一的手勢進行撤銷，所以很多時候在表單輸入的時候會有一鍵刪除圖標，卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后，刪除按鈕變為撤銷按鈕，有待考量。
到底什么是交互設計，這個問題其實是比較復雜的，也是我一直在思考的問題。所以也翻閱了很多文獻，嘗試做更多的案例來解釋。交互設計的概念真的挺多的，光網上能夠找到的定義就不下5種，這些對交互設計的定義中，比較頻繁出現的是行為、場景、用戶等詞匯，交互設計到底設計的是用戶的行為，還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情，我覺得可能還是沒有能夠解釋清楚交互設計的本質。
中國歷史文字的演變，它并不是一個模仿的過程，而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿，更多的是擔心用戶成本過高而妥協為滿足用戶預期。
事實上，為什么我們講不清楚什么是交互設計，其實UI設計也一樣，她絕不可能單純的指代用工具繪制出用戶界面，其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語
例如“你可以意思一下”，單就這句話，我們大概知道最關鍵的是“意思”二字，包含了特別多的含義，含義需要通過語境、使用場景來區分，說者的“意思”是想告訴聽者什么呢？沒人知道，是一口氣干完一瓶酒，還是喝一口？還是送一點禮還是？應付一下？
當然這句話中的“可以”也很有講究，加上“可以”說明你也能選擇不“意思”，是不是覺得這7個字讓我們整一句話都活了起來，說者與聽者如果不在一個境中，聽著就壓根不知道說者的具體表達含義。
同樣的，在設計領域，很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲，還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞，這個詞聽起來比較抽象，讓聽者都有點不太好意思追問什么是呼吸感，其實你問了，說者也不知道怎么描述?？赡苷f者覺得現在信息太密集讓人無法呼吸，但設計者覺得現在剛好，所以本身就沒有一個標準，更多的就是主觀的感受，讓你不得不接受這個建議的原因是因為兩者的身份。
我們用我們能夠講述的語言去描繪我們不懂的事物，再例如設計師和開發還原只會說往左移動10px，而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識，設計師通常喜歡描述從左到右或者從上到下，但是在開發的語音認知理，他需要知道的是空間坐標，并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識，開發也盡可能的去補充設計背景。
在這里，交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通，所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。
再舉個例子，不知道大家有沒有編輯過問卷或者做過用戶訪談，很多時候是不是覺得收集到的信息無效、無用，其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道，比如：你的問卷問的是，您喝酒的頻率是多少，選項有：從不、偶爾、經常，在用戶的眼里偶爾可能是1年喝一次，而我們覺得差不多1個月喝一次算偶爾，再比如訪談的時候問用戶這個問題：您覺得您喜歡下面哪個頁面的風格？用戶：“什么是風格？”
所以交互設計師有一個能力久顯得很重要了：讓萬物都可與之對話的能力，對話需要什么，是語言。
我們都知道，語言是我們溝通的根本，語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言，不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等，例如在模型手辦中有分線、滲線、勾線、補土等，這也都是在特頂專業領域中的一些術語，但這些并不是語言，只是在某個領域中大家總結出來便于溝通的文字符號。
所以我們再回到上方看一下定義，首先語言是由詞匯所組成，詞匯是由符號做組成，大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法，但這些都僅僅只是規范，而并不是語言。語言擁有更強的普適性和通用性。
那么我所認為的語言他首先包含了能夠組成詞匯的符號，這些符號大概就是指：點、線、面、體、色彩由這些點線面體可以組成的詞匯有：按鈕、文字、圖標、圖片等。但是光有詞匯不行，在漢語中有12種詞類：名詞、動詞、形容詞，在由句子組成的詞匯中包含了不同的成分：主、謂、賓、定、狀、補...這里不過多敘述。
語言很重要的一點它具有語境，語言的運用包含了看聽讀寫4個方面，看和聽指的是輸入，讀和寫指的是輸出，那么交互設計語言中，也包含輸入和輸出兩種屬性，例如輸入指的是由不同“詞匯”組成的“句子”，比如由標題、箭頭、色塊組成的一個itme，是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。
這里的控件雖然有兩個屬性，但是還需要語境來幫助我們理解，一個是它本身所能夠輸出的默認狀態的，比如點擊之后的跳轉頁面，另外他也可以具備產品賦予的自定義屬性，例如底部滑出picker。
還有，在漢語中“去買兩個桃子吧”，這里的“兩”肯能是虛數也可能是實數，但是在交互設計中，我們如何表示點擊1下和兩下或者是多次呢，一般單擊的屬性通?？梢杂幸恍┨匦缘姆枌傩运硎境鰜恚缂酉聞澗€的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等，那么雙擊的話可以用雙箭頭來表示嗎，當然不可以，雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。
那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思，并且有用的。這會讓更多信息不對稱的情況消失，不僅僅是設計師，在產品團隊中大家都能夠有一套共性的交互語言系統，無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中，大多都是多種元素的拼合，給出常用的、可復用的控件、組件，但是大家依然還是無法從語言角度去創新，這就導致了很難會有新的、有用的交互形式的出現，比如很多搜索控件都是承載在頂部導航欄中，那么在做規范的時候也只能在這個組件上去微調，殊不知搜索這個控件的“語境”并不單單只能在頁面頂部，例如高德地圖做的就很好。這樣一來，這個組件的常規規范形式就能和很多產品區分開來了，當然要視產品形態不同。
市面上有許多的新零售電商產品，頁面中的信息流也是大同小異，但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式，但是我們要知道，30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示，但是3000個就不行了，很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。
所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中，首屏基本上都是呈現這樣的策略，從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局，從基本上能夠滿足一個大量sku電商產品的所有需求，但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢？
從交互角度入手，那么既然我們無法做到大而全，那么我們至少可以做到精準、限時，讓用戶上癮的策略，上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具，以及時間軸的商品推薦，讓有限的資源呈現更多的形式變化以及讓用戶有時間概念，每天固定時間來進行活躍。
通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經常看到的營銷瓷片可以劃分為非常多樣式與可能性，并且在后臺工具中靈活控制，同時除了日常的營銷目的之外，在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。
最后總結一下，我認為交互設計也包含了視覺，所以我們在決定用什么樣的設計形式之前需要考慮更多，入業務、用戶價值等等，從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。
不管是做UI設計還是畫插畫，有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠，其實不然。一個可能是大家總結的太少，從來都是憑感覺和運氣去配色，但其實都是有講究的。本文不會給大家重復講解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩，并且在產品設計中使用的。
大家都知道，對于不同的顏色，我們對其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道我們眼睛內存在兩種感光細胞：視錐細胞和視桿細胞，視桿細胞能夠感知光線強弱但無法感知顏色，而視錐細胞卻相反，視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞，而視桿細胞卻用的少，更多的是在黑暗的環境中使用的多。
視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞，分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感，它的范圍包含的比較廣，特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。
大家在平時生活中都能看到，在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識，因為這些非常醒目。更容易被紅視錐細胞感知到，但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。
我們來做個實驗，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學看上去都會覺得是個漸變色，但其實它就是一個純色，不信的同學可以自己在工具中嘗試一下。
但如果你把這個色塊拿出來后，不在這個環境中直接進行邊緣對比，那就不會出現漸變的情況了。那光說原理，我們也來看一下在產品設計中需要注意的地方，因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置，這樣就會造成邊緣視覺的對比，本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。
如果你想要讓兩個顏色接近的元素具有識別度，那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設計，背景色一定不要過于灰暗也不要過于淺白，過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比，顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。
還有，為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理，因為文字和背景疊加產生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號，當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊，但依然還是不夠明顯，所以為了強化可點擊這個感覺，我們才用了線框、背景色、箭頭等方式。
一般來說，產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非常活潑、有趣、好玩的特性，無論是線上還是線下都使用了這個品牌黃色，從每一個線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的，所以在線上的界面用起來會非常不和諧，和整體偏淺色、輕的風格對比起來太強烈，引起不適。
而且線上覺得還OK的顏色，由于印刷的原理，實物也會更加偏低飽和和偏暗。
我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息，提到了一個視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品，使用了高亮色來引導用戶視覺。
當然色彩的運用也會講整個頁面的層級凸顯出來，而不單純的用中性色來區分層級。
同樣是上兩張圖，大家可以清晰的看到，美團中的附近熱賣好點、滿減標簽、價格，其實都只具備信息的呈現，但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣，“展開”使用了輔助藍色，這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上，當然也會有其他的色彩來表示可點擊。
所以不是所有的元素都要賦予顏色，這樣會使整個頁面非?；靵y
另外，UI設計中主色除了引導用戶的作用外，也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面，當前板塊標簽和正在播放劇集的激活狀態。
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標，或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造
在色彩的心理學上，大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面，可以看下方多種色彩的描述。
然而其實很多的產品使用的色彩和我們所認知的會有一些差別，比如咖啡品牌的主色選擇，在我們常規人之中，咖啡應該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色
在瑞幸剛出來的時候，很多人其實不太習慣把這個藍色和咖啡結合起來，但是為了塑造品牌差異化，瑞幸一直將“藍色”作為品牌的主基調，“小藍杯”這一稱呼不但讓消費者感到親切，也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中，主基調同樣是使用藍色，不但符合了當下消費者的視覺偏好，也在為用戶留下記憶點之后，也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。
會讓人產生“幻覺”！讓人產生視覺疲勞，例如我將餓了么這個界面的色調調整一下大家看一下，不亮瞎算我輸。
為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的
讓界面或者插畫看起來非常混亂。一般來說顏色的使用也需要有側重點，所以我們常用的方法是6、3、1的色彩配比。
熒光色絕對不可以使用在UI界面中，尤其是主色。會讓你瞬間失明！
在很多dribbble的飛機稿中，經常能看到這樣的配色和練習。無論是在練習中還是實際項目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點且輕飄飄的感覺。
說真的，這樣的風格確實耳目一新，但個人覺得可能不會成為主流。因為它就和第五種一樣：信息可識別性很差。就不說色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調，這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點自相矛盾的感覺。
為了營造這樣的“新擬物”的輕量氛圍，還不得不在整個界面中簡化大部分元素，能不加文字就不能加文字，說的好聽叫做使用了奧卡姆剃刀原則，有一句話一直非常影響我做設計：“設計是需要被簡化的，但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。
例如下方，兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼
首先我們必須要說，色彩肯定是需要結合產品和用戶的定位去指定和提煉的，所以前期會需要去做一些研究例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”，從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑，并且對市面上的app進行總結，我們發現大部分的產品色，簡單來講在我們HSB模式中去色都在一個固定的范圍，就像這樣。
在上文中也說到用色比例的631法則，所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎，其實輔助色沒有非常明顯的1種或者兩種，都是多色的輔助色方案，都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略，一個主色搭配多個輔色，如果有其他獨立的板塊可能需要重新定義專屬的配色策略。
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對比，顯示層級，那么通常給2-3種層級即可，至少2種，至多3種。在選擇3個層次的中性色文字是，給大家一個建議：標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50，默認文字不要大于80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：站酷 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
ajax 即 “Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式、快速動態網頁應用的技術。早期只有同步的方式，多個請求，只能順序執行，只能等待執行。有了ajax異步技術，可以無需等待上一個請求執行完成，就可以直接發起請求。服務端返回后，ajax通過回調技術通知客戶端程序，把響應的結果傳遞給用戶事先寫好的回調函數。通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁進行局部更新，提升網頁的效率，用戶無需等待頁面的刷新，嗖的一下內容就變化了。改變原有整個頁面刷新，造成頁面晃眼的現象。所以這項技術一出現，就得到業界的推崇。
關鍵字：異步、回調、局部刷新。
主流方式：
技術棧
用戶頁面中觸發ajax請求，訪問后端服務器，Web 中間件 攔截用戶請求，轉發后端程序進行數據處理，一般還需訪問數據庫，然后逐層返回。數據庫返回數據處理服務，數據處理服務返回Web中間件，Web中間件返回ajax調用，將數據封裝到返回的js對象中，目前主流返回數據為json字符串（可以通過Jsonp格式實現跨域訪問）。在回調callback的方法中解析json中的數據，最終回顯到頁面上。通常我們使用jquery封裝過的ajax，寫法更加簡潔靈活。
$.ajax({ //交互方式 $.get，$.post，$.getJSON
async: //請求同步異步，默認true異步
type: //請求類型：GET/POST
url: //請求的網站地址
data: //提交的數據，參數
contentType: //請求的MIME媒體類型：application/x-www-form-urlencoded（默認）、application/json;charset=UTF-8
dataType: //服務器返回MIME類型：xml/html/script/json/jsonp
success: function(data){ //請求成功，回調函數，data封裝網站返回的數據
console.log( data );
},
error: function(e){ //請求失敗回調函數，e封裝錯誤信息
console.log(e.status); //狀態碼
console.log(e.responseText); //錯誤信息
}
})
json請求返回就是json格式，而jsonp請求返回是fun(json)格式。
查詢網址：http://p.3.cn/prices/mgets?skuIds=J_1411013,J_1411014
[{"p":"-1.00","op":"3888.00","cbf":"0","id":"J_1411013","m":"6699.00"}, {"p":"-1.00","op":"799.00","cbf":"0","id":"J_1411014","m":"1398.00"}]
查詢網址：https://d.3.cn/desc/1411000
通過JSONView插件展示數據：
網站有一個跨域問題，非同一個網站的請求默認是禁止的**（同源策略）**，那我們的頁面要訪問其他網站啊，例如：我們訪問京東獲取其商品的價格信息。這時就必須用jsonp方式進行跨域請求。
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數據是會報錯的。
json字符串: { "id":"100","name":"tony","salary":"30000" }
js對象： { "id":100,"name":"tony","salary":30000 }
可以看出js對象中value值如果是整數，小數，無需加雙引號
Vue中封裝了ajax并增強了它，在異步并發處理優于原生ajax。稱為：axios（ajax input output system）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> //引入js支持,axios.min.js文件 <script src="../js/axios.min.js"></script> </head> <body> <div id="app"> 商品價格：{{info}} </div> </body> <script> new Vue({ el: "#app", data(){ //data的ES6函數寫法 return { info : null } }, mounted(){ axios.get('../data/price.json') .then( //箭頭函數，res為返回值，res.data 返回的json數據對象 res => ( this.info = res.data.price ) ) .catch(function (e){ console.log(e) }) } }) </script> </html>
注意：
axios請求頭的 Content-Type 默認是 application/json，而postman默認的是 application/x-www-form-urlencoded。
ajax一般采用@RequestParam接收參數：
@ResponseBody public Result testpost(@RequestParam String username) {}
axiso采用@RequestBody的json方式接收參數
@ResponseBody public Result testget(@RequestBody Map map) {}
傳統 Ajax 指的是 XMLHttpRequest（XHR）， 最早出現的發送后端請求技術，隸屬于原始js中，核心使用XMLHttpRequest對象，多個請求之間如果有先后關系的話，就會出現回調地獄。
JQuery ajax 是對原生XHR的封裝，除此以外還增添了對JSONP的支持。經過多年的更新維護，真的已經是非常的方便了，優點無需多言；如果是硬要舉出幾個缺點，那可能只有：
Vue2.0之后，尤雨溪推薦大家用axios替換JQuery ajax，想必讓axios進入了很多人的目光中。
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規范，它本身具有以下特征：
防止CSRF：就是讓你的每個請求都帶一個從cookie中拿到的key，根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，后臺就可以輕松辨別出這個請求是否是用戶在假冒網站上的誤導輸入，從而采取正確的策略。
fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise對象。Fetch是基于promise設計的。Fetch的代碼結構比起ajax簡單多了，參數有點像jQuery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
總得來說：axios既提供了并發的封裝，也沒有fetch的各種問題，而且體積也較小，當之無愧現在最應該選用的請求的方式。
轉自：csdn 論壇 作者：布諾i
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
文章編輯:孔宇SEO
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近發現一些能提高圖標細節和高級感的小技巧，今天與大家分享下這幾種風格的設計思路，以及需要注意的點。
分享大綱：
顧名思義圖標之間有縱深前后關系，通過這樣去處理，可以讓圖標層次豐富，增加設計細節，打破枯燥無味的單色扁平圖標。
通常大部分人設計一個圖標就直接將圖形畫出來后，這樣就完事了，沒有繼續深入下去。這樣圖標看著枯燥乏味，普通了一些。
如上圖，將圖標在接口處進行細節弱透明度處理，那么效果就完全不一樣了。
這里需要注意，一般都是在圖標的接口處進行層疊處理，從A到B的一個線性漸變。
下面來看看案例：
△ Atlassian的品牌圖標系統
使用建議：運用在面形圖標效果會更好些，或者線條粗一些的圖標，一般運用在TabBar上面居多。
這種比較好用，將圖標進行抽象放大化處理，變成一種圖形方式。一般運用在卡片設計上面居多。
左側卡片上面，圖標直接使用描邊效果?？ㄆ锩骐m然加了一些底紋圖形，但是整體效果略顯平庸了一些 。
重新將圖標進行圖形化處理，既能夠表達當前含義，同時設計上細節和品質感有所提升。
其他思路延展示例：
當然還有一種類似的思路，可以將圖標進行放大化，并進行色彩分割處理為背景，前景放圖標和文案等。
如圖，我將前面兩個思路綜合運用，圖形化背景和層疊圖標。這里的圖形希望大家不要亂用，盡量使用圖標的圖形來演變。
圖標通過弱漸變透明處理，其思路有點類似第一個。但是這個方法圖標整體帶透明度的范圍更大。
先來直接看個案例：
這種圖標給人比較新穎的時尚感，層次也豐富。
如何處理這種圖標？
非常重要的一點，需要注意不識別度問題。如左側圖，圖標和背景之間幾乎融為一體，看不清主體元素。右側處理剛好，能夠識別出圖標含義。
處理時候一定要注意透明度的關系，當然也與卡片背景色有關系。
關于圖標設計三個小技巧，可多看幾遍，思路比較簡單直接。當然最重要的是靈活運用，也可以將三個思路都融合起來去設計圖標。
本文只是拋磚引玉，這些圖標處理的技法，并不是能適用所有場景。大家還是需要根據自己產品特征，找到合適的突破點去設計。
文章來源：優設網 作者：功夫UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
成本思維是什么？
今天跟大家聊聊一種思維，不是產品思維也不是交互思維而是：成本思維
為什么設計師要有成本思維，以及成本思維在做我們做設計時對我們有什么幫助。
不僅僅在工作中我們需要思考成本，在生活中我們也無時無刻都在計算成本。成本總是和收益掛鉤，所以貝克爾在《人類行為的經濟學分析》中提到：人的任何行為都是理性選擇的結果，無利可圖的事人們事不會去做。雖然這句話不能覆蓋所有的人，但是大多數人就是如此。
在夜深人靜的夜晚你饑腸轆轆想吃夜宵，你可以選擇下樓到周邊小吃店就餐，也可以選擇叫外賣，前者付出的成本是你需要通過身體行動來交換最后的結果，后者則是花費一定的金錢來代替前者的行動。
那么我們通常會如何選擇呢？如果這兩種成本有很大的差異，比如需要到很遙遠的地方那么除了身體行動成本外，時間成本也會計算其中，所以相比后者成本陡然增大，于是我們就會選擇成本低收益大的方式。但是假如你現在極度想要吃那家的夜宵，外賣點餐會特別影響口感，那么你可能會選擇前者，這里由于外賣口感和主觀意愿影響到了我們理性的選擇。
成本決定了收益的效率、大小和方式，小到你伸手拿一支筆你會選擇最近的，大到我們人生的投資。成本與收益之間并非是直接關系，收益的大小的不取決于成本的大小，還有風險因素。例如我們在對 UI 界面進行優化，可以選擇的方式有很多：
我們的目標是讓用戶獲得更好的體驗并且提升業務價值。3 種方式需要的成本高低不同，我們都希望付出最小的成本達到最好的效果，于是我們就會考慮到風險因素，假如新流程用戶不會用怎么辦，假如新版本導致的數據下滑怎么辦，假如行業出了新政策了怎么辦等等。所以除了這些成本外也要考慮應對風險的成本。
你看為什么有錢人都會坐頭等艙是因為頭等艙可以幫他們節約更多的時間，提供更好的環境與服務，讓他們產出更多的價值。還有假如你的車壞了，你最直接的方法就是花錢找人幫你修而不是自學自修，因為你將花費太高的成本。
再舉一個例子，我們想提升能力，有的人選擇自學、白嫖，有的人選擇報培訓班，這也只是時間和金錢上的成本選擇，如果你的自學（白嫖）在短時間收益很大那就毫無疑問幫你省了一大筆錢，但是如果自學很久都毫無效果，那么時間就是你花費的成本，時間和金錢不同的是，時間不可逆?？雌饋砘ㄥX比花時間更好？不是，花錢也有風險，比如課程質量和服務很差，錢沒了還學不到，甚至賠上了時間。但如果你選對了，那么收益就遠遠會大于自學。
1. 實現成本
實現成本指的是想法與落地中間需要付出的行為、時間和其他損耗，例如我們希望提升用戶下單的轉化率，我們可以選擇：
在這幾個方案中最低成本是 「按鈕設計更明顯」，因為只需要調整樣式和簡單開發就可以實現，但收益并不是最高的，而其他的方案需要更多的角色花費更多的時間來參與，但是收益也不是顯而易見的。所以如果你的產品比較成熟，那么我們一定選擇成本更低的方案，反之我們會進行更高成本的嘗試。
還有比如我們找工作，新公司福利待遇比現在公司好 50%，平臺也更大，是否不需要思考直接去呢？當然不是，你需要考慮通勤成本、生活成本、自身成長成本等等因素。如果你 50%薪資漲幅換來的是 996、每天通勤時間 3、4 個小時，不僅僅是時間精力，還有我們的身體健康的成本，我會覺得遠遠不值，成本太高。
2. 機會成本
我們先來看一下定義：機會成本是指面臨多方案抉擇時，被舍棄的選項中價值最高的就是本次決策的機會成本。舉個例子，比如當前版本我們有 1 個開發一個設計一個產品，我們面臨著兩個需求，但是資源和時間只夠我們做一個需求，這時候 2 選 1，那個被拋棄的需求所擁有的價值就是我們所選擇的那個需求的機會成本，相當于我們放棄了那個需求所擁有的價值。
再通俗一點講，我現在有 100 萬，面臨著兩個選擇：1.銀行理財，年收益 4%，40000. 2.做生意投資，年收益 8%，80000，那么就相當于我花費了這 4w 的潛在成本獲得了 8 萬的收益。
3. 邊際成本
邊際成本的理解很簡單，我們可以理解為我們每付出一定的成本收貨的收益或者每收獲 1 個單位的收益所付出的成本。用一個通俗一點的例子來講，比如你一共學習 10 天，第一天學完你考了 30 分，第二天學完你考了 50 分……第8天學完你考了94分，第9天學完你考了98分第10天學完你考了100分，花費的單位天數一樣但是每次增加的分數卻越來越少，收益也就越來越少。
在做產品設計的時候，我們往往會有一個板塊叫為你推薦，比如微信閱讀中的這個板塊，它一次提供了用戶 6 本書，雖然算法可以算出有許多書，但是這里每次只提供給用戶 6 本，是因為涉及到了邊際成本，少量多次提供能夠讓用戶更聚焦，更快的選擇好書本進行閱讀，每多提供幾本書，用戶選擇閱讀的時間成本就會越大。有同學會問：那我只給 1 本不就好了，用戶就能馬上讀了，何必要推薦 6 本？
我們如何保證那一本剛好是用戶想讀的，沒有辦法做到如此精準，如果每次只推薦一本書，而用戶嘗試了幾次都不喜歡，他們就會放棄，所以這里就會選擇一個臨界值，比如我們可以選擇每次放不同數量的書，根據數據判斷在給用戶幾本書的時候用戶閱讀轉化和選擇時間成本更低。
4. 體驗成本
體驗成本也是我們設計師需要時刻關注的，俞軍老師在產品方法論中提到，用戶價值=新體驗-舊體驗-替換成本，體驗成本可以包含很多信息，最主要的就是認知與交互的成本。
認知成本
如何降低認知成本可以從以下這些點進行優化
1.文案
文案的設計要求是簡單易懂，避免產生歧義，之前給大家舉過的一個高德地圖導航在到達目的地之后給出一個“原路返回”按鈕的分析，大家可以再思考一下，是否會產生歧義。還有確定、確認大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、帶負面情緒的問題等等。
2.樣式
視覺最為直觀，一個按鈕一個控件的樣式是否能滿足用戶的心智和預期，將會影響用戶的認知，例如以下的幾個按鈕，出現在不同場景用戶會出現一系列問題：為什么我點了沒用？為什么還不能點？我到底該點哪里？
還有你的品牌是否識別度高，也決定了用戶對你的認知，最近小米花了百萬請大師做了新的 logo，在視覺上更加圓潤，在圓 logo 的基礎上做了很多的微調，實際上也是避免了太大的 logo 變化導致品牌認知成本的提高，認知成本一旦太高，品牌市場的敏感度和曝光度還有各種替換、衍生、配套的隱性成本也會大大增加。所以這一舉動是明智的。
3.信息
比如我們希望新用戶去關注一些大咖、kol 獲得更好的推薦，但是如果我們只是將推薦者的頭像和昵稱給新用戶，那么這個策略就是失敗的。因為我們沒有考慮新用戶的認知：1. 我為什么要關注她 2. 關注她我能獲得什么。所以僅僅依靠頭像和名字在這里對用戶的認知是沒有任何幫助的。
行為成本
我們通過利用肢體來和媒介進行交互，目的是完成某項任務。其實只需要你抬手，那么就是產生了成本，只不過某些成本是固定的無法減少的，比如你要去騎車那就需要去解鎖，如果沒有鎖車可能就會被偷走，這是出于安全考慮。
行為成本在具體數字產品中我們可以發現很多，例如你只需要將手機拿起，屏幕就會亮，相比于找到解鎖鍵再按一下成本就低了很多。而亮屏后不直接解鎖是為了防止誤觸或者隱私，所以還需要通過指紋或者人臉進行識別。
例如幾種不同的驗證方式，利用滑動拼圖來解鎖和輸入相關驗證碼解鎖，前者比后者的學習成本和操作成本都低。
在移動端我總結了幾個減少交互成本的方法，不妨來看下：
soul 音頻處理；日期選擇；iPhone 底部橫條切換窗口
游戲昵稱隨機；股票買入數量
這里也有同學會問，既然都可以代替，那滑動能否代替輸入？必須也是可以的，例如 iOS 自帶的計時器中選擇時間的控制器，還有鬧鐘設置，這里要注意的是，滑動代替輸入是要基于本身該信息是由范圍內并且不需要精細化控制的，比如房價篩選，房價本身量級很大，用戶篩選也不會精確到個位數，在這里用點擊和輸入會比滑動的成本更低。
反例就是音量、明暗控制，大家可以感受一下輸入在這里的雞肋。你需要精確控制選輸入，需要大致的范圍選點擊，非常模糊的感受選擇滑動。
例如我們在開車進行導航的時候，打字輸入非常不便，于是加入了語音輸入。還有在微信進行賬號切換時，我們可以選擇利用語音輸入數字來驗證身份。
對于新用戶操作復雜功能和界面的時候，提供更多提示能夠很大程度上減少用戶的操作成本。
在 iOS 或者安卓的手勢控制中，我們會發現又一些常用的手勢比如：點擊、拖動、輕掃、雙擊、縮放，這里我們可以定義為一級手勢。還有一些不常用的比如：重按、長按、三指滑動、三指縮放等，這些手勢的認知成本和行為成本都很高，定義為二級手勢，不建議頻繁使用。
設計師在日常工作中接到的需求繁多，無論是在做需求之前還是在思考設計方案的時候，成本思維可以幫助我們很好的規避一些問題和風險，我們追求控制成本使收益最大化。所以學會控制成本的設計師不僅僅題可以提高個人工作效率還可以幫助公司創造更多價值。
文章來源：優設 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：隨著公司和業務的不斷發展，原先的系統不一定適用于現在的場景，因此需要進行升級改造。作為設計師，我們是如何系統性地去為業務帶來更多的體系化的價值？本文作者將從五個方面進行分析，與你分享。
項目背景：
當公司的發展規模到一定程度時，考慮到信息安全、持續采購成本與相關風險，企業會采取自研的方式來實現部分協同工作軟件的自產與自用，本文將以內部目標管理系統為例，闡述我們是如何系統化的做企業系統設計改版？
什么是OKR？
OKR，是Objectives 和Key Results 的縮寫，即目標和關鍵結果，它是企業進行目標制定和過程管理的重要手段。采取OKR的管理方法，將公司目標層層分解到團隊，部門再到個人，在各個層面貫穿和統一起來，以幫助實現目標達成。
改版的契機是什么？
改版不是設計說想改就能改，在做新的OKR系統之前，之前是通過「績效系統」來進行目標管理和績效評估，支持簡單的制定和結果的評估的使用，因系統操作流程、界面體驗、業務場景已經嚴重的影響到目標管理的效率和效果，具體體現在幾個方面：
總之，工具的體驗已經是嚴重影響公司員工目標管理的一道障礙，所以如何將整體的系統操作體驗提升起來是設計急需去解決的問題。
那么，確定有問題需要改，作為設計師，我們是如何去系統性的去為業務帶來更多的體系化的價值？
理清業務目標，制定設計策略，是系統性改版產品的前提，在實際工作中設計師很容易被產品的原型、對產品的描述蒙蔽，只有非常清楚的理清業務的目標，才能制定系統性、合理的設計策略來支撐業務，通過專業的設計方法來助力業務結果的達成，在這個項目中我們是如何做的呢？
對焦業務目標：
OKR系統的改版項目最開始是高層的訴求，提的業務要求很簡單“讓大家用起來，目標管理起來”，那么如何讓大家用起來、利用系統將目標管理起來是當前需要解決的的問題。
“讓大家用起來，目標管理起來”需要去解析的是，為什么舊的系統大家用不起來？為什么目標管理有這個管理機制，但是沒有依賴于系統管理起來？
制定系統的設計支持策略：
設計師同行可能會問：不都是做需求嗎，有啥做啥，有啥策略可言？如果是以這樣的方式來做設計改版，很有可能會被業務方牽著跑，即便是知道對方堅持的不是很合理，但也沒有辦法來推動這件事往更好的方向發展。
理解用戶，溯源本質問題，是最設計環節必不可少的環節，通過對用戶的深入研究，挖掘本質的共性的問題。在這個項目中，我們通過定量+定性的手段獲取用戶的心聲：
定量問卷——獲取用戶的基礎的問題：
前期在公司內部針對普通員工、MGR、HRBP、高層4種角色，調研了100多位內部用戶的心聲，將不同崗位和職級對于績效系統的問題真實反饋收集匯總。
定性訪談——深入獲取用戶的訴求：
因為系統面向對象是企業內部員工，所以針對每個角色都做了訪談調研，深入的挖掘他們對當前的產品使用問題，并將問題按照核心流程中所涉及的角色在不同階段所需的操作和流程進行了梳理，整個階段拆解為：制定階段、執行階段、結束回顧三個主要階段，拆解每個角色在這些階段中的觸點和機會點。
結合問卷、專訪談的分析和梳理，篩選出目前系統的核心問題：制定流程、對齊關系、過程跟蹤、信息觸達。
在前面已經初步發現和定義了問題，這么多分散的問題如果平鋪出來可能會嚇到產品和研發，所以接下來需要將其系統化的變為整體的設計方案，我們需要將其串聯成完整的場景，然后逐步擊破，我們是如何做的呢？
重點模塊及爭議點的討論：
在場景分析前期，我們設計內部針對“核心階段”、”對齊關系“、”權限管理“、”全員OKR“進行了討論和范疇的界定，對以下問題進行了討論：
梳理清楚角色關系圖，有助于多方去理解各個維度的關系：
結合業務需求，賦予體驗價值：
OKR系統雖然最為一個內部管理系統，我們也逐步在設計側去從“具有功能價值”往”“賦予體驗價值”去發力，將更多的“能”和“可以”轉變為“方便”、“簡單”和“輕量化”等，來提升各個流程階段中的體驗，比如：
具體到串聯場景怎么去理解？
一個新的OKR周期會經歷三個主要階段，每個階段會涉及到多個節點，在每個一個節點上去思考發力方向：
為了便于理解，將關鍵的場景提供了比較簡短的描述，這個描述就是從舊到新的過程，后面的設計展示也是圍繞著這些內容進行展開，具體如下：
1）制定階段，包含寫、看、評、管
寫：輕松撰寫，高效共創
看：簡單查看，便于跟進
評：輕量互動，便于記錄
管：高效審核，隨時跟進；條條對齊，事事關聯；
2）執行階段，包含更、改、推
更：隨時更新，條條追溯
改：慎重修改，條條有據
推：合理推送，終端打通
3）結束回顧，包含查看、追溯、復盤
查看：快捷查看歷史周期
追溯：記錄明顯標記，事事追蹤溯源
復盤：復盤總結，目標達成
經過前面一系列的調研、分析總結，設計圍繞著3個階段的關鍵結論進行展開，即OKR制定、執行、結束三個階段。
（因每個階段篇幅較長，方案設計部分僅展示部分頁面的思考過程和頁面展示）
在寫OKR時，設計讓撰寫輕松、可以高效的共創，主要通過以下3點：
1）清晰的頁面結構
讓用戶能明確的感知到系統的整體結構是有規律的，可以簡單被理解的，即左邊全局控制，右邊內容展示左邊導航全局控制著寫、審、查、通4個功能
右邊內容展示跟隨著導航內容變化
2）O與KR的錄入快速切換
為了讓用戶可以沉浸在一個頁面寫內容同時，還能縱覽全局結構，在寫OKR的頁面增加了OKR大綱的錨點切換功能，便于多個KR之間的切換，避免因頁面過長帶來的翻閱困難的問題。
3）減少步驟，減少跳轉
減少步驟，減少跳轉有很多場景都有涉及到，比如：
查看和跟進屬于第三方的協同伙伴，為了讓伙伴更輕松的跟進，做了2個設計處理：
在管理者審核下屬員工時，簡化了大量信息，前置待處理信息以及待處理的關鍵信息，讓管理者比較直觀的知道有哪些人提交了，哪些人修改了，哪些人需要重寫等等。
為了讓員工便捷的進度管理，在OKR管理頁面以輕量的臨時彈窗，來方便用戶快速發起和輸入內容，每條更新記錄同時也能同步給關聯方。
慎重修改、條條有據主要是滿足管理者和關聯管理訴求，OKR可以在中途被修改，但是修改的結果是需要明確告知相關人，在增加、刪除、減少的內容上，以特殊的示意對比來記錄依據，同時也督促發起方能審慎修改。
OKR的消息推送在整個階段中占據了非常重要的信息觸達的作用，在整個OKR的制定階段和執行階段不可或缺的部分，而消息推送過多將會導致信息冗余，那么如何合理進行推送消息也是重要一環。
我們把消息類型通過兩個維度定義消息的優先級：“重要性”和“緊急度”，通過四象限法則，我們拆出來了：
通過此模型和產品確定了每一個消息類型的所在位置，且清晰表達的了每個消息應當的位置。
每個渠道都有相應的特點，我們結合渠道的特點去確定不同優先級的消息應當推送的渠道。
最終在實現方案上，實現了有層次、分場景的消息推送方案，盡量做到少打擾用戶同時，可以及時了解重要信息。
桌面端是主力生產平臺，通常是多窗口多任務，鍵鼠操作精確高效。在專注姿態下，我們可以盡量安靜地展示更多常用功能，讓用戶在一個視圖中即可完成相對復雜的任務。同時在列表頁中，更大的空間讓我們可以把目錄樹展開，減少導航跳轉。
手機端的特點是專注當前任務?？梢酝ㄟ^信息降噪，加強對比來讓信息傳達能明確，幫助用戶完成單個任務；而清晰的導航可以避免小屏幕上頁面頻繁切換所帶來的導航負擔。
1）最終實現方案
結合終端的差異，把移動端定位為：側重便捷快速的查看和溝通，同時將重編輯的場景在移動端去除了，更加側重于查看、互動和進展更新的低成本操作的場景。
2）中途驗證效果，確保上線的效果
在設計的過程中，為了進一步的驗證設計合理性和易用性，針對角色代表進行了8組可用性測試，最終普遍反饋新版的操作體驗更好。
針對了項目的設計效果落地，設計除了在過程中不斷的跟進產品和研發提出的問題，在測試階段提出效果走查文檔，不斷的打磨細節，才能保證最終的設計效果，當然付出總會有回報，新版的系統上線除了制定、管理、查看關鍵模塊的UV和PV的業務數據達到了比較好的效果外，在新老版本的滿意度和流程操作犯錯率上也得到了一個比較好的驗證。
在OKR系統項目的整體流程中，針對產品大改版的時候，我們設計需要前置思考業務，全局看待產品，系統性的去思考和設計，助力業務結果達成的同時讓設計價值更好的體現出來，最后再回顧下整體流程：
文章來源：人人都是產品經理 作者：酷家樂用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在工作中常常被問到如何表達講述自己的設計，為了讓自己的設計有理可依，對接上下游匯報工作的時候，總結以下一些方法和觀點，幫助不知從何講述自己設計的人一些語言技巧。
以下僅是個人觀點，用作探討交流，文中所有舉例均為本人工作設計輸出。
設計師能做出好的設計，卻缺乏系統化的語言包裝，“如何講設計”不該讓它成為難題，做一個有產品思維的設計師，讓你的設計以理服人，我們要不止停留在視覺表層，更要從多緯度看待產品設計，本文將從以下三點簡述：01.產品設計的五個層面，02.講述設計的流程，03.關于本次總結
做好產品設計的第一步，是了解產品， 要對于產品的需求如何確定、產品定位如何決定有一個基本的認識，在產品常識里面最重要也最常用的就是產品設計的五個層面，也簡稱用戶體驗五要素——
作為UI設計師，所處的視覺設計是表現層，是確定產品的最終形態，因此也處于產品設計的頂層（能被看到），是一個具象畫的呈現；其次，往里推框架層，是確定產品外觀，將界面信息和導航設計有序歸類，讓用戶使用或者理解；結構層是為用戶設計一個結構化的體驗，將零散的元素轉化為有序立體的空間；范圍層確定產品的功能和需求；最后戰略層是確定產品目標和用戶需求；底層邏輯結構決定上層意識形態表現，因此在設計前我們要知道產品是屬于洞察階段，設計中是屬于產品設計解決方案階段，整體的產品設計是一個概念通過無數個層面的努力，經過時間，轉化為具象表現的過程，所以我們在完成一項設計時，應該講述一個完整的設計思路 ，不要讓自己的設計思路僅停留在表面。
整個產品的設計產出是一個抽象到具象化的過程，設計的前期屬于產品洞察階段，這個時候一般由團隊的老板領導結合當下市場需要，有用戶的需求就有商機，想出產品大致的方向（戰略層）然后通過產品經理整合梳理高層的意見確定產品大致的功能和內容輸出原型（范圍層），交給交互設計師優化產品細節邏輯和信息具體框架，經過研發評估能夠技術實現產出交互稿（結構、框架層），這里已經過渡到設計解決問題執行階段，最后是給到界面設計師美化視覺產出高保真（表現層）。
也就是到我們自己設計輸出之前要經歷這么多，如果能在講述自己設計的時候，提前去了解這些，那么設計內容就不愁沒法兒講，光是闡述自己的設計思路就可以講出一個故事，這也是為什么現在很多品牌賣貨都開始營銷產品背后的故事由來。我們設計能做好，也要會用語言推銷自己的設計成果。
設計是對于某件事精心準備的過程。好的設計作品，應該擁有完整的設計流程，因此我們在講述自己設計作品的時候，有一套完整系統化的方式是非常有效的。完整的設計流程包含以下4個步驟：
第一是我們需要去了解設計的需求背景，知道大概的方向——
來源（簡單理解就是誰提出的問題）需求有可能是你的老板、你的產品經理、或者交互設計、或者視覺上的問題···
背景（籠統一點，就是這個需求是新需求還是原來有然后進行改版優化）需求的基層性質是什么，原本調性是什么，我們要做什么樣的產品···
目標（目標一般都是需要解決什么問題）搞清楚為什么做這個需求，能解決什么痛點，不做無用功。
誰提出的問題，是新的需求還是舊的問題，或者我們要解決什么？圍繞這幾個方向將你的設計概述出來，會讓非專業的人也能聽懂你做了什么，舉個簡單的例子，我們公司后臺一個很小的產品bug需求，往往這種需求就是產品經理的一個截圖和他標注的兩句話——
然后你完成了這個需求單，在傳達給非產品經理以外的人的時候，你有可能是以下轉述方式——
毫無疑問，你就是將需求者的意思一字不落的轉達了，但是對于其他的聽者來說，你的轉述平平無奇、毫無意義，甚至都沒有印象你做了什么，所以你應該講清楚這個需求的背景——
設計需求來源是誰，原本屬于產品哪個模塊（來源），他原來功能是怎么樣的，界面上展示的結構哪里有問題（背景），視覺用了什么樣的方式改成什么樣，解決了什么痛點（目標）
講清楚誰給的需求，需要解決什么問題，是在原來的基礎上不變動邏輯的情況下增加了什么達到了什么目的，才讓你的敘述更完整，聽起來更有邏輯。如果是一項新的需求，沒有背景，那還得從設計分析說起，設計分析就是讓你更專業的去做事，設計分析分為——用戶分析，設計目標，和設計手段三個要點：
首先用戶分析就是，分析你做的東西給誰看，而用戶又分為群體用戶和獨立用戶，在c端常見的就是獨立用戶，他們通常不定性，且有很多特征；在b端，目標用戶一般是群體，他們大多數是有場景特性和行業特性，針對獨立用戶和群體用戶，我們得出的用戶特征、基本信息、需求結論也是不一致的，所以我們應該結合產品的調性分析一下我們做出來的設計究竟給誰看給誰用。常見的用戶分析方法有：用戶畫像、用戶訪談、問卷調查、焦點小組、眼動測試、用戶反饋以及大數據分析，這些方法中最簡單的是用戶畫像，就是舉實際的例子列出真實用戶的特征信息及使用場景。B端用戶分析方法常用大數據分析和用戶反饋，這兩種方式通過對接需求的上下游就可以得知。
通過用戶分析得出需求結論，滿足需求就能達成設計目標——
設計目標結合卡諾模型來分析，卡諾模型—反應產品性能和解決用戶需求的滿意度的一種非線性關系，具體想了解的可以自行百度，站在巨人的肩膀上我們看得更遠。 卡諾模型具備4種屬性 ：1.必備屬性：滿足這個需求，用戶滿意度不會上升，但不滿足這個需求，用戶不滿意會大幅度降低 ；2.期望屬性：提供個性化需求，用戶滿意度會上升，不提供此需求，用戶滿意度會降低； 3.魅力屬性：用戶意想不到的效果，提供此屬性，用戶滿意度大幅提升，不提供也不會降低 ；4.無差異：無論提不提供，用戶滿意度都不會改變，根本不在意；因此在做需求的時候我們應該盡力滿足基本需求和期望需求，而可有可無的需求盡量不去做，降低效率。幸福需求是不容易達到的，如果能滿足是非常棒的～這里就像是滿足了設計心理學的三個層次——本能、行為、反思。
接下來是大家都熟知的設計手段，適當的講一些述專業的設計技法，用不同的手段去實現的主畫面，最后達到完成設計目標這樣的結果，會讓你顯得更專業。設計的手段有很多種，這里主要講述常用的三種，構圖排版（采用什么構圖方式，為什么這樣構圖是因為什么設計原則）、色彩運用（為什么使用這個顏色，因為這個顏色給人的心里感知是什么樣的）、設計風格（采用什么風格最貼近產品調性，為什么用這個風格），但是講設計時一定要記住產品的調性，不能偏離產品本身，不要盲目套用絢麗的技法，否則是不合適的。
很多時候面對非專業需求方收稿時，可能看到如下話語————
（心里是不是xxxx····“萬馬奔騰”，用個文明點的詞）
非專業人士無法理解這二者的區別，他們認為他們的設計手段能達成設計目標，而作為專業設計師的我們就應該引導對方說出設計目標，再用我們專業的手段去滿足對方的目標，去實現減少改稿次數，而不是讓非專業人士去指導專業人士修改設計手段。分清這兩者的區別，我們就可以在設計引導中更加主動。用設計分析的方法來講述設計，舉個例子——
會議管理——會議預約移動端優化，因為這是我們原有產品EKP里面的模塊，PC端和移動端都有，因此用戶可能是群體也可能是個人。所以針對獨立用戶和群體用戶都做一個用戶畫像，得出他們的一些需求結論，然后目前幸福需求是沒有的，純屬個人建議，日后如果有此功能，想必用戶的滿意程度也會大大提升。
概括一下已完成的整體主要頁面，分析設計目標：
頭部屬于流量量較高的區域，采用卡片式設計，將會議內容置于此處，作為頁面信息關鍵層，采用左對齊方式排版，突出會議標題和時間提醒用戶。
通過不同的顏色標簽，區分參會人員狀態——
待進行未有操作反饋，選用橙色，屬于可以持續進行并有明顯提醒作用
已做反饋屬于成功操作，選用已有用戶認知心理的綠色
已知信息拒絕參與，是不太重要的，屬于不再進行的階段，選用灰色
接下來是設計作品的產出過程，一般情況下不可見的過程，為什么要去講， 因為一個東西從無到有是很不容易的一件事，如果能講述過程，就可以引燃情緒共鳴，讓別人記住，讓自己的設計作品也能有始有終——
設計過程一般分為四個階段：初期階段、中期階段、最終定稿；具體的關鍵詞和描述可以通過以下方式提煉出來，這里就不做詳細說明了。
拿運營宣傳來舉個例子，我們公司中秋節月餅禮盒包裝主視覺設計——
整個過程應該是有一個系統化的說明的，省略為寫字的地方是我們可以插入的具體圖片和過程，步驟差不多就是上述這些，可以有最初階段的頭腦風暴-提取關鍵詞-清晰定位到中期階段的團隊合作—風格擬定-精選方案-細節刻畫以及和物料方溝通對接的打樣確定工藝等等過程…再到最后定稿的體驗還原-問題優化…主畫面的誕生是不容易的，強化這種過程參與，讓不被看見的事也能展現。如果實在不好記錄，你可以從一開始就截圖你繪制的過程——
上圖是用PS截圖，再用時間軸將每一幀動態循壞播放，導出GIF然后截一張不變的底圖合成就可以了。
最后是數據驗證階段，這個是設計落地的直觀證實，包含主觀認可和客觀數據，具體內容就是通過用戶或者專業的人士反饋給你設計落地的好壞，來判定你做的是否優秀成功。通常這一塊的數據決定你驗證你前面所有的過程，只要按照該流程認真做了，最后效果通常不會太差，如果出現很大的偏差也往往是意料之外的，因該尋求團隊一起解決，不是某一個人的問題。
根據以上最后我們總結，好的設計就是滿足以下4個方面：好看，好用，好記，能實現。設計師要考慮的維度不僅僅在視覺層面，什么是有產品思維的設計師，就是在執行時候要考慮上下游不同職能的工作內容，如果你的設計不能實現，再好看也是白費功夫的～從產品交互視覺多層面談設計，會讓你的設計包裝顯得不那么單調，系統化的方法總結到此，不足之處多多包含～謝謝你的閱讀！
文章來源：站酷 作者：YiVi_eleven
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn