當互聯網不斷的深入到我們的生活中，我們對安全感的需求也延續到了互聯網使用中，特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點，用戶對于資產安全的掌控感更為關注，產品使用體驗欠佳也直接影響客戶安全感。
以下將基于自身工作總結和行業經驗，聚焦互聯網金融產品分享和總結如何向用戶營造安全感。
目錄：
一、需要什么樣的安全感？
二、如何傳達出安全感？
三、怎樣體現出安全感？
安全感是人類最底層的需求，但不同類用戶群體需要的安全感也各有千秋，我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告，將線上理財的人群分為四類：
分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后，成為金融移動互聯網的中堅力量。
這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點，當市場普遍行情下跌時，更容易產生焦慮的情緒而導致“割韭菜”，進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示，在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍，而當時對應的市場行情正為基金普遍大跌。
因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴。
而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示，理財知識更充足，理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。
安全感是一種感性的心理感受，而人類的情感由本能、行為、反思三個層面共同決定的。
這三個層次作為人類大腦的運作的規律，映射到設計當中，同樣是可供遵循、值得探究的。
先于意識和思維，它是外觀要素和第一印象形成的基礎，著重于產品的外觀、觸感等。“美觀即實用原則”人們會潛意識里認為好看的東西也是好用的，所以在界面設計當中，主要設計對象是視覺設計。
而金融產品中，常用藍、綠等冷色調的色彩，給人以冷靜，穩定的感覺，表現金融產品的科技感和可靠性；常用紅、黃、橙等暖色調，代表著熱情、溫暖與責任。
是人類身體日常行為的運作，行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性，以及正面的心情感受。在界面設計當中，主要設計對象是交互設計。（將在下文通過投資場景詳細分析）
超越了本能層和行為層，存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度，主要的設計對象是正向情感的結果反饋以及品牌信任。
良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時，往往強大的品牌背書起到了關鍵作用，即使是同一只基金，用戶也會選擇在自己信賴的平臺里購買。
我們可以通過在頁面設計中加入更多的品牌元素，如品牌主題色、LOGO、品牌IP形象、品牌slogan等，來潛移默化地讓用戶感受企業的價值：
另一種常見于一些平臺利用強大的背書以及所獲的成就，清晰地向用戶展示可以提供的保障權益，責任條款及資質介紹等來傳達企業對用戶負責的態度，提升用戶對產品乃至對企業的信任感：
我們將金融的生命周期分為三個階段，分別可以概括為：投資前（產品選擇）、投資中（產品交易）、投資后（產品管理），不同階段的關注點不同，而對于安全感需求各不相同：
結合文章一開始對人群的分析，由于投前的行為特點更多聚焦于產品的選擇，因此從理財小白的角度對于安全感的缺乏更集中于“買了會不會虧錢？”、“產品買對了嗎”、“看不懂規則”、“這個適合我嗎”等，尤其存在于一些新形式的理財組合產品和策略智能投產品中。
在這個階段的安全感維護，除了相關頁面的信息降維、必要的投教啟蒙以外，還需要考慮用戶疑問的快速解答、合理的預期收益宣傳等。另外投錢的啟蒙教育更可以考慮結合一些運營活動，讓小白用戶通過更有趣的方法了解產品，了解自己適合的產品。
而對于較有經驗的理財“老司機”而言，安全感的缺乏更集中于“過往表現怎么樣，如最大回撤率等”、“市場行情、政策是否利好”、“基金經理的資歷”等，而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產品的對比等來表達產品的未來盈收能力可期。
當投資者已經選擇好信任的理財產品時，在產品交易的各個界面也需要關注交易流程中安全感的反饋。
其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時，系統給予用戶的正確引導，可以幫助用戶打消顧慮，建立信心，讓用戶感受到一切都在順利地進行著，這對那些在設備操作方面缺乏信心的用戶來說尤為重要，用戶不會對自己的操作或對平臺產生質疑，如：專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等
而反向反饋是指用戶在操作過程中出現或疑似出現誤操作時，系統向用戶展示提示或二次確認以促進錯誤的糾正或確保此操作無誤。它能確保在第一時間告知用戶出現了不正確操作，及時更改，使流程順利進行，尤其是對于一些理財小白而言，合理的容錯設計更促進有效投資，提高未來的盈利體驗。如撤銷操作二次確認、購買超出風險承受能力的產品、輸入錯誤金額時的反饋。
引起思考：
雖然天天基金的撤單確認展示了退回帳戶，但是此彈窗的取消按鈕引導性過強，首次操作僅通過銀行卡的列表的箭頭較難聯想到是確認撤單的下一步操作（還以為是可選擇退的帳戶）。
產品交易成功后，投資者的關注會更集中于自己的資產的變化，產品的未來走勢等，因此在安全感的提供上，需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等，甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等
引起思考：
在支付寶的基金總金額中，存在交易進行中的提示文案為“買入待確認*元”，但不少小白會產生疑問，當前展示的基金總金額是否包含提示的待確認金額，此時是否可將文案改為“含買入待確認*元”（畢竟也有部分直銷app并不會將待確認金額包含進產品的總金額中）
另一方面的更需要考慮當基金產品存在虧損時，及時向投資者傳達情感陪伴和合理的投資交易，以促進投資者優化持倉或保持中長期持有，避免頻繁的短期交易而導致不良的盈利體驗。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為大家概括性地介紹5種流行移動應用中常見的界面設計模式以供大家在自己的項目中參考。這些設計模式有助于大家提高設計的可用性，讓界面變得更加直觀。文章將側重介紹能夠幫助大家進行下列各方面設計的模式：
在這個社交網絡盛行的時代，我們是不是真的還需要用這種陳舊的方式提交個人資料？社交登陸這一設計模式完全可以讓用戶輕松快捷的登陸，從而取代注冊、填寫表單之類的麻煩工作。
用戶可以直接登陸自己的社交網絡賬號（Facebook、Twitter或者Google等），無需另外創建一個以后不太可能繼續使用的賬戶，這樣可以大大提高注冊效率。除此之外，這一設計模式還有下列好處：
注：在國內這一設計演變成了：您可以使用QQ/微博合作帳號登錄，然后給你綁定，繼續回到注冊界面 – –
通知功能可突出顯示近期的活動和操作。我們每天要接觸大量的信息，但百忙之中卻沒有時間（或者不愿意把時間）花費在手機上。我們都喜歡在盡可能短的時間內完成要做的事，然后馬上知道是否有新的活動或者情況能夠引起自己的關注。因此，對于通知設計模式的透徹理解和妥當實施非常重要。
很多知名公司的移動應用采用了下列幾種不同的方法實施其通知設計：
你可以模仿一下你最喜歡的解決辦法，試試這個辦法是否適合于你和你的用戶。
通知欄該怎么設計，具體方法右戳學習：《怕打擾用戶？來看看怎樣設計通知欄不會討人厭》
彈窗（也叫層疊窗口）是一種常用于互聯網廣告的方法。彈窗會在不創建新窗口的情況下遮蓋住主要內容，無法使用攔阻軟件進行攔截，因此用戶非看不可。一般來說這種情況很讓用戶討厭，但在有些情況下，彈窗打斷用戶的使用反而能給用戶帶來幫助。例如，用戶可能會希望在不丟失當前用戶界面的情況下查看某些信息。
下面是一些彈窗設計模式幫助解決問題的案例：
在習慣了使用Facebook、Twitter或Google等社交網站后，我們都會很自然的使用下拉手勢進行內容更新。第一個使用這個設計模式的公司是Apple，在此之后這一設計就廣為流行開來了。
當用戶需要顯示一列非靜態，但不能自動刷新的內容時，就可以適用下拉刷新模式。下拉刷新時，屏幕會滾動到頂部，刷新完成后新內容將從頂部開始顯示。這種設計模式可以節約空間（不需要使用按鈕）而且簡單易懂。這種方式還不僅局限于更新內容，其還可以用于在一系列短信、圖片或資料更新中加載早先的內容。
除了下拉刷新手勢外，滑動也是智能手機上最為常用的手勢之一。很多應用都允許用戶在文章上左右滑動來了解詳細信息或執行其他操作。與依賴于點擊鼠標的傳統web應用相比，這一方法充滿創新意義。
在Android和iOS上有大量采用了滑動、點擊及其他特定用戶交互方式的移動應用，你可以在自己的項目過程中予以參考。每個應用對于自己的用戶來說都有不同的意義和價值。你應當在畫線框圖的過程中做好規劃再投入設計或開發流程。在測試過程中花點時間思考用戶的反饋、建議和批評。
文章來源：優設 作者:程遠
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
經過一些項目經驗，結合幾個方法論，我整理出了一個評估交互方案完整性的方法，也可以作為前期考慮方案的分析方式。下面就來介紹一下，希望能給大家幫助和啟發。
放眼過去大量同質化或跟風的網站風格，空有一副美觀的皮囊，卻少了些什么，為何不交互創新一下呢？具有創意的交互必然能使一副黑白的畫面瞬間點亮色彩。
你可能想有創意的交互能為網頁帶來什么？
挺多的，我舉例：一個連微動效都沒有的靜態網頁你進去后也就看見的這樣，那么如果這個網頁進去時，內容會有入場動效，你是不是馬上能感覺到這個網站有點兒東西，要抄起鼠標探索一番？換言之，好的交互創意甚至能讓你產生心流模式，你通過鼠標到處點擊，頁面上不斷的給出動畫效果，然后你收獲驚喜，最終促使你進行更多的嘗試。
好了，說多了，就是希望為更多設計師提供設計思路或執行概念，幫助大家找到更多的創意靈感。
Web 端交互圍繞計算機為中心。主要涉及鍵盤鼠標兩類設備的交互，個別網站的產品可能會涉及麥克風聲音采集或攝像頭應用。
1. 鼠標允許的交互
現在的鼠標可以支持更多功能，但是通常來講需要嚴格的考慮兼容問題，所以僅以鼠標左右鍵滾輪滾動以及光標映射選取為主；
以上所有交互都可以根據實際場景進行設定，不過鑒于用戶習慣，一般不會用到快速的連擊交互以及右鍵的雙擊、長按或拖拽，這不符合交互手勢的舒適度或簡化易用的初衷。
2. 鍵盤交互支持
鍵盤支持大量的按鍵交互，除去一些全局的功能按鍵和組合快捷鍵，在網頁交互應用中常見的還可以分為以下幾種情況；
在應用鍵盤按鍵功能的時候，除去那些作用明確大眾悉知的按鍵功能，其他的按鍵操作應該保證界面上有指引有提示。
組合的交互動作常配合不能簡單直接完成的任務，這里的組合指有兩個及以上交互動作完成的類型，復雜的交互動作盡量少用，且盡可能的為用戶提供操作指引，若非必要，費力不討好；
組合動作主要分為以上 9 類，鼠標拖拽的組合動作通常會細分來應對界面場景的應用，例如通過橫向拖拽將一個豎放的圓柱物體旋轉起來，那么垂直的拖拽必然是沒辦法轉動起來的，而且左右還會決定拖拽的方向。
簡單來講，無非就是看得見的元素、聽得見的元素。聽得見的元素無非就一個聲音，講深一點，也就涉及一些音效的交互控制。而看得見的元素則會相對豐富很多，如果再次細分的話還可以歸為以下幾種情況；
1. 常見變化形式
位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉效果、特效變化
web 端的交互概念即觸發到呈現的過程。用戶可以使用交互設備進行事件觸發或變量，頁面則將內容進行對應的呈現。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉場切換“構成。
頁面內容呈現通常分為“默認時“、“選擇時“、“運行時”三個時態（鼠標短暫的點擊時屬于“選擇時”，若長按有內容影響則屬于“運行時”），因此在網頁交互的過程中，我們需要考慮好這三種完整的狀態時呈現形式，另外在考慮補充合適的動效進行過濾或信息反饋。歸根到底網頁的交互概念就是控制內容呈現罷了，這是網頁價值的本質。
web 端內容呈現的結構應該算是頁面交互的范疇吧，其實上網頁的頁面并不只是長頁面的形式，實際上會有更多種結構可用。因為電腦顯示器更大的緣故，web 端結構上比移動端更加靈活，同時根據產品的性質也有需要考慮移動端響應式的需求，一般來講這些頁面結構可以分為以下六類：
網頁的組成區塊通常分為五大類型，即導航、面包屑、背景、內容呈現、彈出框。菜單導航欄通常分為頂部導航、側邊導航、底部導航、組合導航四大類，也有個別是通過點擊彈出的導航。內容布局則更是五花八門了，是板式與技巧的呈現了。
個別產品本身也是創意的一部分，有一些可能界面交互平平，但是卻有著魔性或引人關注的產品內容。而這里整理了些比較典型的視覺展現形式和交互創意形式的案例，這些方式通?？梢愿鶕a品的定位與特色進行組合設計和開發呈現，讓你的網站更富有創意和較好的視覺體驗；
1. 幾何色塊搭配文案
色塊搭配標題文案，簡約大氣有視覺沖擊力，再也不用擔心沒有圖片或插畫素材了
2. 精美大圖背景搭配內容
采用精美大圖背景搭配文案或交互控件，精美的圖片本身就很搶眼，再搭配標題大字，瞬間就使得頁面有沖擊感有層次，常見于游戲官網或活動專題
3. 關聯插畫或圖標搭配文案
采用小范圍的插畫或圖標來表達服務或產品優勢，搭配文案說明，風格統一精致耐看。常見于服務描述或產品說明模塊應用
4. 留白大圖搭配文案
將某個產品或其他元素放大顯示再結合極簡的排版說明，有較好的視覺沖擊力和產品凸顯效果，同時留白保證呼吸感和減少視覺噪點，使得用戶能夠更加專注產品圖
5. 動態的背景或微動效裝飾
應用動態背景或微動效的元素裝飾，有較好的內容吸引力或氛圍渲染力，可以展現更多的產品細節或豐富畫面層次感，不過也比較考驗視頻本身或動效裝飾自身質量
6. 點線面裝飾與文案排版
應用簡單點線面元素去裝飾界面，再結合有對比有版式的文案排版。頁面簡潔美觀，適合簡約干凈少圖的頁面模塊
7. 柵格化應用與板式跳躍率
應用柵格化與版式跳躍率，使界面整體充滿平面藝術，富有節奏感且不顯凌亂。在日本的網頁設計上有大量應用
9. 充滿個性的視覺裝扮
采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風、手繪插畫等視覺風格，來打造符合產品的特殊視覺效果，為網頁印象加分，提升品牌感染力
10. 引用 3D 視覺裝飾
運用 3D 視覺搭建頁面場景，常見的有 3D 圖標、3D 動效或 3D 產品大圖等，有較強畫面立體感和表達能力，視覺新穎讓人眼前一亮，也是當前的一種視覺趨勢效果
11. 產品元素或其他元素來填充背景
將品牌元素進行弱化處理后作為背景墻，凸顯個性和豐富畫面，結合微動效可以有進一步的效果增強
12. 矩形陳列或卡片陳列
將內容模塊用矩形陳列顯示或卡片陳列，Win10 菜單或 WP 系統的手機桌面有較好體現，特點是干凈利落模塊分明，適合同類模塊較多的場景進行排列顯示
13. 極致的簡約
采用極簡的方式呈現內容核心，可以是一張圖一段字、一段文案排版等，總之就這么簡單的搞定了
14. 魔幻或神秘感界面呈現
如示例網址一樣，魔幻且神秘，有著迷之吸引力和趣味性，不過需要慎用，比較惡搞。而適當給出一些神秘感，可以使得頁面內容更有吸引力，用戶更愿意去點擊嘗試。
主要是關于頁面內容元素交互時的創意形式講解，這里不對交互動效或特效細節進行過多說明，因為怎么去動又或者用什么樣的特效去呈現實在數不清說不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗合集地址。
1. 光標跟隨動畫
會使頁面上的元素根據光標的位置或移動產生相應變換，增加頁面的互動性與趣味，適用于裝飾或加強背景層次感，在特定的場景也可以使整套控制 UI 往鼠標移動的方向微微靠近，結合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）
2. 鼠標懸浮動畫
簡單易用的鼠標懸浮動畫，用于聚焦顯示或 Tooltip 說明，常用與內容選中狀態區分或元素細節展示，加上一組好的動效創意非常能夠凸顯個性，使用戶感到驚喜為體驗加分
如果是一個完整動畫緩慢播放完會更有敘述性
3. 鼠標點擊特效
由鼠標點擊進行觸發，基本樣式即點擊狀態顯示，觸發后的特效可以是圖標動畫、光效、音效、界面動畫等，游戲場景中較為常見，點擊后不僅有光效反饋還有音效附和，這是一種觸發反饋效果。
4. 鼠標長按特效
當鼠標長按某個按鈕時持續出現的特殊效果，一般是持續鼠標點擊的特效或維持某個元素的變化效果，通常對數值持續增減動作較為常見，可以代替連續的點擊，交互更輕松。也或者是需要一定的加載時間所以用長按配合
通過長按持續增加細菌圓點
5. 鼠標拖拽特效
通過鼠標點擊長按某個元素進行移動的組合交互，一般用于拖拽移動、內容繪制、元素連接等。應用場景廣，互動性較高，能為用戶帶來更多的參與感和趣味性，甚至制造小驚喜
示例內容：阿里內測的 Real 3D
6. 鼠標滾輪巧妙的聯動效果
主要用于頁面某個值的控制或頁面滾動，在頁面滾動的時候可以配合控制元素變化來實現更具創意的展現效果，通常元素透明度、位置、大小、序列圖都可以控制
國內官網
7. 鼠標選中自動展開
鼠標經過選項時自動展開選項并聚焦，可以省去鼠標點開的動作，但不適用于選項內容較多且內容密集的場景
8. 按鍵與鼠標配合觸發
通過指定按鍵和鼠標配合交互進行觸發，適用于同界面的復雜交互場景，且存在某些變量需要鼠標控制。如果你的網頁內交互豐富且包含變量元素，不妨試試看
9. 模塊或分頁加載動效
在頁面滑動或分頁信息加載時，界面構成元素有序的緩入進場。采用流暢的動效演示數據加載的過程，緩解數據加載渲染壓力的同時，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現更加精致優雅
10. 趣味轉場或加載等候
應用轉場效果與 Loading 動畫，運用某個元素變大覆蓋或頁面移動交替轉場，而非生硬的直接替換，使得頁面切換更有趣味和層級關系體現。再對加載較慢的內容補充 Loading 動畫，緩解用戶焦慮的同時還能延展品牌信息
11. 大圖或多圖輪播應用
精美的圖片總是想要放大看，看了還想看。運用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析
12. 內容穿插滾動
運用特殊的圖層順序結構，在頁面滾動查看時，形成奇妙的元素穿梭視感。通常會穿梭替換背景或讓元素接力，這樣相比靜態寫實的頁面滾動時會更有層次感
13. 內容自動生成
輸入關鍵內容后，頁面自動生成結果進行呈現，整個過程可以是緩慢有序的，適用于降壓或畫面創意生成的產品，可以讓用戶感受整個過程與細節變化
14. 游戲互動模式
將產品內容以游戲的形式或交互呈現，讓內容充滿趣味和互動性，使得用戶在參與游戲互動的過程中打破了常規的閱讀體驗
15. 三維或全景空間
建立一個三維或者全景空間進行查看或操作，再賦予操作按鈕或說明，實現 3D 場景的交互與視覺效果，常用與地圖全景查看或 3D 游戲應用，可以巧妙的結合產品 3D 模型，打造非凡的互動體驗
16. 一鏡到底的視角呈現
打造一個非平面的視覺場景。用鼠標點擊或滾輪聯動交互利用分層的元素變化，營造出由近到遠或由上至下的一鏡到底的視角穿梭體驗。界面場景切換更加自然，還有超強的空間感與趣味性，讓人難以忘懷如臨其境。
17. 按鍵交互效果
將某些功能或任務引用按鍵進行交互或觸發。常使用字母、數字、空格、方位鍵，界面需要有提示對用戶進行指導。
18. 個性的模塊展現方式
常見的有彈窗、抽屜、卡片展開、轉盤等，通過個性輕松的顯示結構與交互方式也能讓人眼前一亮。
19. 可交互的顏色或圖形
對一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進行意料之外的交互或配置能力，提升網頁趣味性或用戶個性化需求滿足。
20. 音視頻媒體控制
圍繞產品介紹的媒體內容，常見有視頻或音頻且支持基本交互控制，結合場景需求可以豐富交互的形式或更多媒體控制功能，例如長按快進、倒退、剪輯、混音等，常用于娛樂互動場景或音視頻類產品。
21. 內容或窗口抖動
通過抖動進行報錯或反饋，常見為密碼輸入錯誤時或游戲中受到傷害的場景，可伴隨音效提示一起。使用場景不廣泛，但是也可以進行創意應用，例如抖掉灰塵小游戲，長按元素抖動干凈為止。
22. 打造儀式感
結合現實場景中的交互方式，打造相似的線上場景幫助用戶共情帶入，再配合交互和動效完成類似的動作，為用戶帶來儀式感和共情效果。
23. 有聲交互
通過麥克風采集聲音來影響交互，是一種聲音的交互，如果網站支持，甚至可以語音交互，是一種少見的網頁交互形式，并非傳統的音視頻控制而已。
24. 鏡頭交互
通過攝像頭授權獲取鏡頭畫面進行交互，通常是一些鏡頭濾鏡效果或者增強現實技術結合做交互創意，網頁上少見新穎。
找對方法去創新很重要！在實際工作中，我們不僅要衡量界面設計與交互效果，同時還要兼顧開發資源、實現難度以及產品架構本身考慮。對此我們也需要了解一下開發實現的概念，之后再研究如何進行創新設計。
在進行創意設計時不考慮開發，那不是自嗨就是對開發耍流氓。靜態界面開發或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動、重力等效果)、3D 交互效果相對會復雜許多。大多的動效不能依賴 GIF 或 Lottie 進行解決，這對交互控制或性能優化都是挑戰，而代碼能夠更好的保障這倆點，所以大量的交互動效還是需要開發者支持，而代碼實現顯然會比設計師產出復雜。
那么如何解決呢？
CSS 進行實現，部分動畫元素可以由設計師通過第三方軟件或在線生成 CSS、Svga、lottie 文件（相對下 lottie 更消耗性能，在線生成 icon 動畫代碼： https://loading.io/ ，在線 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主繪制導出 lottie： http://airbnb.io/lottie/ ，Svga 在線創造： https://www.svgator.com/ ，2D 動畫制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊動效，其實會有可用的第三方庫或代碼資源來解決，首先就是保證你所設計出來的動效是可行的，過于逆天可能還是有難度，剩下的便是提供動效關鍵詞方便開發查找相關資源，或者你給出參考來源。常見的代碼動效素材網有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（歡迎補充哈，別藏著掖著）。對于 3D 效果的前端開發呢，暫推薦新開源的 Oasis 引擎或 Three js 這些來實現，當然其他引擎也沒問題。2. 網頁創新設計的策略考慮
考慮到創新開發的背景情況不一致，這里我提供了一些創新研發的策略提供參考：
傳統改版：
1.明確改版目的，挖掘價值點
會議說明，清楚改版需求的背景與痛點，挖掘價值找到設計發力點
制定改版目標，明確分工計劃，同步項目情況
2. 構建原型框架，評審優化
設計新版架構，確認范圍層細節（功能型：功能規格支持。信息型：內容需求），完善流程與信息框架，然后拉攏項目相關人員進行評審優化，直到新版框架大體定型后，再進行視覺層輸出
3. 明確產品定位，建立設計語言
要保障產品氣質與視覺風格的契合，即一個資訊網站肯定不適合采用電商視覺進行輸出。然后根據內容占比，考慮呈現的布局方式，即不同模塊中的視頻、圖片、文字比例情況。然后你可以結合上文的視覺層創意形式進行套用，當主要的靜態視覺設計完成后即可進入評審階段
4. 高保真評審，挖掘交互創新點
對網頁高保真進行評審，確認頁面信息框架或界面設計可行。然后對交互創新方案探討，結合網頁的板式設計，提出交互創新的細節，與開發者同步，確保實現的可行性與項目工時可控，同時披露交互細節幫助開發者進行調研或準備
5. 交互創新對齊開發，進入研發階段
準備提供交互的細節 Demo 或參考內容，在基礎內容開發完成后或開發者認為適合介入的時機，進行交互創新內容的對齊，使創新方案在最小可行的基礎上進行開發實現。之后建議設計同學耐心的陪同開發小哥進行還原，確保效果
6. 測試驗收，預發上線
最后進行成果驗收，確保基本的內容是否符合標準，再根據工時情況或上線計劃等，考慮交互創新部分的細節還原調試，適公司實際情況可以考慮再迭代一版。之后根據產品情況自行考慮是否 A/B 測試、灰度上線等，上線后就是線上數據跟進或用戶調研了，希望你的新版本收獲一片叫好 哈哈
敏捷開發：
對于想要敏捷實現目標的話，可以采用谷歌沖刺法（Google Sprint)，當前基本分為六個階段進行，分析理解階段、定義階段、發散思考階段、決策階段、原型產出階段、測試驗收階段。這里我結合交互創新的方法，對多個階段進行了補充，內容如下：
1. Understand 理解
明確建站目的、需求背景、梳理業務或用戶需求。通過用戶研究或競品分析等手段，更好的理解產品、行業現狀以及痛點機會，也為后面階段提供可靠的依據或支撐
2. Define 定義
基于對此次建站需求與背景深度理解，定義產品設計目標，挖掘價值點
3. Diverge 發散
讓參與者們集思廣益，發散思考，將不同的點子記錄下來，最好圖文并茂的畫一下，然后形成自己的方案。在這個過程中不必共處一室，獨立進行即可，這樣可以避免被帶偏或擾亂
4. Decide 決策
方案決策環節，產品經理、設計師、開發小哥等將各自的方案進行展示說明，這個過程中不要急著評價對方，只要投票選出最佳方案即可，這是一個方案的根基，之后再進行優化和細節完善
5. Prototype 原型
建議先將方案框架進行原型繪制或 demo 產出，然后經過一輪初步測試評審后可以再次優化復盤。在原型繪制的過程中，主要是確認流程與信息框架，不必著急視覺層的問題。若準備進入視覺設計，則可以帶入這幾個問題進行思考；
6.Validate 驗證
首先通過內部自測優化，再根據產品類型考慮是否找利益相關者進行可用性測試驗證，或者找專家做顧問。之后再進行下一步的優化完善即可
也許講了這么多，你還是不知道前面諸多的創意方式怎么用，沒關系，這里我進行了簡單的整理對標，希望你看完還有救！
網站本身即視為一個產品，一個產品的風格定向一定是由產品本身屬性或用戶屬性影響，了解產品定位或目標用戶也是重要的環節，這些環節可以制定更符合產品或用戶的信息框架或視覺表現。通常我們可以將網站類型分為企業官網、品牌官網、營銷官網、門戶網站、論壇相關、綜合網站六大類，這里簡單講一下這些網站定位與視覺特征；
通常一個網頁怎么設計版式、如何調整布局結構、調整基礎交互，都是需要參考原型的信息框架。信息框架中的元素情況會直接影響視覺輸入和基本交互。如信息框架中有很多圖，那么設計時就需要考慮是平鋪直敘還是輪播顯示。
信息框架設計學習：《Web 信息框架》
那么關于不同的信息架構有什么好的布局方法嗎？這一點通過內容的搭配形式，整理了幾種方式供參考：
文の處理：
通常一個純文本的界面是很難設計的，因為過于單調，對此可采用
圖の處理：
純圖片的形式不多見，但是不能否定，一般可能是圖本身有一定的信息傳達，或者是圖片瀏覽類型的服務
圖文の處理：
少量圖文配套是比較好處理的，手法也比較多，根據配套數量情況還可以調換位置形成錯位區分模塊
視頻の處理：
視頻的處理分為自動跟手動控制，自動即作為背景自動播放，可進行簡單的切換，手動則要注意相關按鈕布局和顯示遮擋問題
圖文視頻の混合：
通常圖文視頻混合的情況很少見，視覺焦點不好控制，其中視頻做背景是最好處理的，但內容信息不易過多
三維の處理：
因為是三維的場景，所以需要考慮到三維場景下的視角形式與操作方式
按鈕の處理：
按鈕是網頁中最常見的交互控件，是頁面扭轉或功能啟用的基礎
控件の處理：
控件組適用于復雜場景的任務交互，通常由多個按鈕或控件單元組成，特點就是控件單元多模塊占比大
結合信息框架對不同元素類型進行視覺設計調整后，再對頁面內容的基本交互進行考慮，例如輪播、切換、彈出、展開收起、轉場等。之后才是更加細膩的交互創意思考。
基本交互發力點
鼠標經過反饋：常見且重要的交互方式，通過鼠標經過時反饋選中狀態或提示相關信息
按鈕點擊反饋：在鼠標點擊后，按鈕或控件的顏色形狀變換效果，用于反饋點擊成功，實現眼手體驗一致
按鈕長按效果：長按狀態的動效示意，通過對長按目標加動畫響應進度或持續的狀態，而非單純的變色或樣式切換
完善 Loading 動畫：如點擊上傳下載更新等，出現對應進度條或 loading 動畫幫助用戶完善體感
內容入出場動效：頁面切換加載或滑動頁面后，內容采取動效有序的進入場景定格，而非生硬的靜態切換
多內容輪播應用：對 Banner 或其他多個內容展現，進行輪播交互完善和時間細節控制
錦上添花交互發力點
按鈕切換動畫：通過 icon 的路徑動畫表達按鈕切換，而非直接的圖標對換，更具個性和視覺觀賞性
鼠標跟蹤動畫：可以適當的做一些鼠標跟蹤事件，讓一些背景或界面元素跟隨鼠標律動起來，增強互動
特殊滾輪聯動效果：通過鼠標滾動聯動其他元素進行交互變化，來呈現更有創意的場景切換或內容展示
內容穿插滾動：將內容分層控制，頁面滾動時將元素固定或交替顯示，產生穿梭感提升界面層次
響應式展開收起：主要用于二級或下級內容的自動展開，由鼠標經過自動展開并聚焦，減少用戶操作
結合音視頻媒體控制：在頁面中植入音視頻內容通過按鍵或鼠標進行交互或切換，打造互動性更高的媒體傳達
趣味轉場或頁面加載：對頁面轉場或加載深度優化。采取更有創意的方式或動畫來過渡，讓視覺體驗提升億點點
內容或窗口抖動報錯：合理采用抖動效果進行報錯反饋或特殊場景應用，使呆板提示更靈動
可 DIY 的顏色或圖形：提供主題或模塊的 DIY 空間，滿足用戶編輯符合自己喜好的視覺效果
結合產品的場景創意
打造個性的模塊呈現方式：結合產品的應用場景打造有個性的呈現方式
打造游戲互動的呈現：將有劇情有故事的產品或內容游戲化，可以讓用戶趣味互動更加深刻
打造一鏡到底的轉場：結合鼠標滾輪聯動做鏡頭創意，突出產品細節或內容呈現
打造三維或全景場景：根據產品屬性考慮用三維的場景來增強互動與突出產品
打造儀式感交互：利用視覺和交互變化來制作符合產品的應用效果，實現儀式感線上體驗
有聲交互：比較少見，視產品情況應用，可以使聲音產生互動或視覺影響
鏡頭交互：適合有鏡頭針對性應用的產品采用，需要授權，要做好隱私說明
補充按鈕交互觸發：在場景更為復雜交互需求更多后，進行的常規解決方法
補充按鍵與鼠標配合交互：適合按鍵觸發且需要鼠標控制變量的復雜交互
文章來源：優設 作者：泡泡bing
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多沒有接觸過交互體驗的設計師小伙伴們，總有會面臨一個坎，那就是看別人做交互和體驗的方案總是特別簡單，一個流程或原型別人做出來之后，我們心里總會想，那不就是這樣嘛？換我也能做，但是只要自己一上手就不行了。
為什么？因為我們總是看著別人的結果下結論，而忽略了中間的思考過程。
就好像是吃著別人做的番茄炒蛋，你會覺得不就是番茄和雞蛋一起炒一下，然后放點鹽和糖就好了嘛，我們只看到了結果，而忽略了對食材的選擇、處理、順序、結合。
當我們看到一個控件，你覺得它不就應該在那里嘛，但輪到自己開始做，就壓根想不到要去用那個控件，甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業，如果做過的小伙伴可以發我交流一下。傳送門--》
所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的，思考過程也是別人的，而商業設計師的核心是解決問題，解決業務和用戶的問題，既然解決問題的角色都是UI的上游，那么UI設計如何體現價值呢？當然就是把交互體驗的核心底層概念搞懂，和交互設計一樣從設計側去思考問題，賦能業務。
OK，那么來我們先來講：示能
心理學家吉普森將示能描述為：“關于有形物品如何傳達出人們與它們互動的重要信息，這個特性被吉普森命名為“示能”。
用很直白的話來講，意思就是：事物通過自己外在的形態，向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是，例如一扇打開的門，告訴人們可以進出、通過。一張椅子，人可以坐、可以靠。
假如，你面前有一扇門，門上有一個把手，這扇門告訴我可以利用這個把手與我進行互動，你可以用手、可以用腳，也可以用舌頭，但手是最方便的。如果只是單扇門，那么我們可以利用推或者拉的動作打開，但如果是兩扇門并排，兩個把手在中央靠近，那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側，那么意思就變了，變成了將門側滑后才可以通過。
那門為什么要設計成不同樣式來展示不同示能呢？這個留給大家思考，這三種門設計的初衷是什么。
在我們數字產品中可以有什么體現呢？例如一個開關控件（switch），開關本身具有兩種互斥的屬性和功能：開/關、啟動/禁用，看到開關控件的外在樣式，我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。
開關在現實生活中的表現樣式有很多，例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等
大家別看開關看起來簡單，但是在設計起來會遇到不少的問題，因為狀態和意符形態在我們日常中過中很難成為一個標準，例如最常見的一側翹起的開關，如果不加意符，我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈，那么很簡單，我閉著眼睛去按就行了，燈滅著那肯定就是關，再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦，一個燈可能收到2處甚至3處開關的控制，而每處開關的數量會在3-5個，這個時候不用意符去標識，就很麻煩了。
回到數字產品上，開關的示能就簡單多了，有顏色的狀態表示開，灰色狀態表示關，但是開關控件在剛用在數字產品上的時候，很多人經常誤以為是滑動交互來控制開關，雖然滑動也可以，但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長，那么滑動的示能就會更明顯。
開關比較讓人產生歧義的地方來自于意符，因為很多新人將一些控件的屬性認為是有重疊關系，可以混用的，那就大錯特錯了，等會講。
和示能相反，指的是任何物體之間不能進行怎樣的互動。
例如我們經常做的人體工學椅，你可以靠坐在椅子上，并把手放在扶手上，但你無法在椅子上蹦跳，因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲，它本身不具備這樣的功能。再比如我們褲子的口袋，設計師通過設計他的形狀、大小、材質，幫助我們去盛放一些小物件，例如鑰匙、手機、卡片，但是筆記本電腦你塞不進去，一頭豬更塞不進去。
數字產品中也會遇到一些有很明顯反示能的控件，例如segment Controls（分段控件/分段選擇器/分段選擇控件），它是iOS的原生控件之一，該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖，和tab不同。
并且在該控件的描述中，seg通常數量只能在5個以內，并且5個標簽分別屬于同類型的數據分割，只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。
那有沒有一種可能，或者一個場景需要這兩種控件同時具備一些屬性呢？是有的，例如這樣
在標簽下是列表，而列表也支持輕掃的交互進行刪除，如果使用tab則會產生沖突，而使用seg則在視覺上太重了，和產品調性不符。那么我們可以在示能上做一些調整，讓這個控件看上去不能左右滑動，又不至于太繁瑣。
所以反示能將告訴我們，事物有哪些不具備的功能。同時反示能也是相對的，遇到多樣化的場景和業務需求時，我們依然要學會變通。
一張桌子放在教室中，我們知道它是用來學習的，桌面上可以放書本、筆等，如果一個桌子放在戶外，并且靠著墻壁，墻壁上有個洞，那么這個桌子當前示能表示為什么呢？一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕，但是如果不穿上衣走在馬路上估計很多人會罵他變態。
下方圖標+文字形式的一個按鈕，放在卡片的左側和右側大家感知一下，表現出來的示能有所區別。
左側更像是這個模塊的標題，而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例，放在不同位置的3個點小圖標，所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示，但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。
這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外，也要考慮到場景的影響。
這里有一個概念叫做同構異型，說的是結構相同，形式不同。例如我們經常用到的tab與其視圖的呈現，tab的本質就是利用多個標簽來切換標簽下的視圖，所以標簽除了用tab的形式，還可以用下拉展開成為菜單的形式，只不過一個是平鋪，一個是點開后再列表選擇。
再舉個例子，例如篩選控件，如果我們需要一個實時篩選的功能，那么我們一般會這么做，在b端web設計中，會將一系列篩選條件橫向擺放，每一個篩選條件都可以下拉展開進行篩選，但如果遷移到移動端中，因為橫向距離受阻，就會縱向標簽展開式的篩選模式，從結構上來說，這倆方案其實是一樣的，都是在多個篩選條件中分別篩選出不同的標簽。
再例如一個父子集共生的內容卡片
同構異形在設計樣式上會有很多種，例如列表，例如上文說到的單控開關，雖然樣式很多，但原理上單控開關都是一樣的。
對于初學者來說，不同控件理解的比較片面，所以就會導致一些控件的使用錯誤。
說到同構異形那就不得不提到同形異構，例如一塊素牛肉，外觀和紅燒牛肉一樣，但是它是豆制品。我們再來看下面兩個模塊，根據整體來判斷，兩邊的加號都是反映出可以點擊添加的示能，但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽，添加完后會顯示在相關的區域，添加按鈕不變。
這里可以用一個比較形象的比喻，我有4張椅子，其中3張坐了人，第四張椅子的示能為：只要這張椅子坐了人，邊上就會出現新的椅子，最多不超過8張，如果沒有人坐則只顯示一張椅子。
但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口，就好像是第四張椅子上面坐的不是人而是套了一個大箱子，椅子不見了，原本應該和其他內容保持一致的外觀也不見了，出現了一個新的東西，出現了新的示能。所以如果我們要按照第一種規則玩，那么這里就不能套箱子，如果要放箱子，就需要放在其他的地方。
所以，初學者要警惕同型帶來的使用誤區，有時候長的很像的兩個人，可能完全沒有血緣關系。
示能的概念大家已經了解了，對于我們設計師來說，盡量去搞懂更多事物在不同場景中的示能和反示能，需要解決問題的時候可以針對性的運用各種方案。
咱們上一篇講到了第一個概念：示能，如果忘了或者沒看的同學可以再去看一下。
今天我們要來講意符，意符在外面日常與事物的交互過程中，非常重要。
以下文字比較干，部分需要大家仔細閱讀動腦，覺得難懂的小伙伴可以聯系我交流
示能決定可能進行哪些操作，意符則點明操作的位置以及如何操作。
設計師往往會說，我設計了一個很好的方案，它將告訴你產品的用途，但是用戶卻不知所措，雖然知道產品就在那里，但無法下手，因為意符不明確。例如我們最常用的人體工學椅，可以調節高低和后仰角度，調節的控制器是兩個把柄。如果沒有意符加入，我們經常會記不清哪一個控制器控制的是后仰角度，哪一個控制的是座椅高度，需要去做更多的嘗試。
所以意符告訴我們對事物的正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。
大家還記得上一篇文章舉的一個門的例子嗎？在日常生活中，雙開門通常在商場、大型會議場館內看見，因為考慮到人流量比較多，于是在門上就會出現推/拉兩個文字意符，避免兩側的人同時推或者拉，引導人們正確通行。我們可以使用推/拉，但不可以用“按”，因為我們無法通過“按”的交互來操控門的開關。
如何判斷一個設計是否優秀，那么我們會觀察其本身的示能和意符傳達是否自然，如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計，例如在兩扇透明的玻璃門上再添加推/拉的標識，就顯得有點多余了。再例如切換短視頻和翻頁電子小說，我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義，所以就不要畫蛇添足。
OK，它的表意大家已經清楚了，那么在數字產品中，意符有哪些類型和作用呢？它們又可以幫助用戶解決什么問題，我們來看一看。
文字意符是最常見的一種類型，利用文字描述來說明如何進行交互操作，但是中文文字博大精深，不同的描述給人的理解和感受完全不同。
案例1:開關
開關控件單獨拎出來不具備完整的含義，必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關，并且需要相應的文字描述來解釋開關控制的內容是什么。
這里的文字就是意符，用來解釋開關的作用。
開關本身具備的含義中是有這樣兩條原則：
1.需要讓用戶感知操作后立即生效
2.開關所屬文本必須簡單清晰無歧義
所以咱們可以看下方的案例。當我們將文本描述為“不打開（關閉）則不再進行消息數字提醒”和“不接受推薦”后，會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述，不要用雙重否定等描述方式。默認描述為打開后的狀態描述。
再來拓展一下，我們會發現其實依然還有產品中的開關文字意符用了非正向描述，那按照你的說法不就錯了嗎？我們來看看小紅書和微信的權限開關，這里分別是隱私設置和權限設置。
這里理解起來會有點繞，大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述，沒有問題，如果換成反向描述就會變成“不關注我的人不能評論我”，結合右側的開關，邏輯層面就要多加一個雙重否定的理解，所以這里的用正向沒有問題。
接下來看下面的關系設置：不把我推薦給可能認識的人，誒這里用了反向描述，大家來分析一下，這里是否合理呢？
首先小紅書在新下載應用打開時會向用戶進行授權，為了幫助用戶發現更多渠道的好友，所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦，同時也會將我的信息推薦給認識的人，這樣產品的活躍度、用戶的曝光會提升。
那么大家再來品一品這兩句話：1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄，后者則更主動，中國人的關系總體來說就是比較含蓄的，就好像是你可以給我推薦，但我不會主動要求，更何況像小紅書這樣的社交平臺，“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。
不知道這樣的說法大家是否可以接受。再來看微信：不讓他看和不看他。微信這個平臺想必我不用多說，既然是熟人社交更多，那么默認肯定是全部開放，而有特殊需求才需要進行隱私設置，所以默認狀態為不讓他看-開關關閉，意思是我沒有打開這項非友好的選項。
那為什么會出現有的開關默認打開，有的開關默認關閉，還可以使用反向描述呢？我總結了下，如果涉及到一些隱私和權限的內容，一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開，例如視頻播放結束自動播放下一個視頻這樣的設置。
開關文字意符的描述方式還有幾種不同的方式：
第一種類型也就是上方說的案例，但是要注意的是，在描述狀態變化的時候，文本要正向、簡單的描述，例如開啟后，接收xxx消息，而不要寫成關閉后，不接受xxx消息。
不添加說明文本，直接展示功能標題，例如微信聽筒模式、消息設置、提醒等，直接用開關控制這些功能的打開和關閉，屬于功能設置。還有一種是授權，例如允許他人查看我的收藏，對他人行為的約束，但不能描述為不允許他人查看我的收藏，因為剛才我們總結了，如果對于一些隱私權限的設置默認需要關閉，那么加上正向描述就不能使用“不允許“。
對于同一種類型的功能設置，可以利用批量的形式做整體描述。
再來看一個例子，示能在不夠清晰的情況下，文本意符用來輔助對當前內容/狀態的解釋。
例如b站在瀏覽內容的時候會出現“剛剛看到這里，點擊刷新”，或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動，會出現一行文案：我是有底線的，說明內容全部展示完畢。
文字意符很直觀，但也要避免歧義。
圖標在某種程度上當作意符使用的頻率會更高，雖然某些圖標表意不明，但是因為簡約、美觀、生動、普適性強的原因，所以很多地方傾向于用圖標，例如公共衛生間、商場的扶梯、通道，通常會用圖標來代替文本，或者強圖標+弱文本的形式。
既然咱們要說圖標意符，而且要突出圖標意符的作用，那就必須有個前提，那就是拋開其他的變量、因素的影響，圖標意符究竟有什么神奇的魔力。
例如我們常用到的列表，很熟悉吧，接下來我將用圖標來讓這個列表的示能產生變化
我們發現，只有文本的列表，示能不明顯，而加上圖標之后就很明確了，甚至加上不同的圖標，示能也隨之變化了呢？刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。
這些其實是很簡單和基礎的概念，但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題，大家總是在問UI和交互的區別是什么，其實本質上它倆都是一個界面設計師必備的能力，不能拆開來談。
我們再來看一個例子，播放/暫停的圖標，用來控制音頻/視頻的播放與暫停，
在實體播放器上，我們能看到播放和暫停往往集成在一個按鈕上，例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上，因為數字產品的圖標是可以變化的，當前狀態和切換狀態可以有兩個不同的意符表示，那實體播放器做成兩個按鈕就太多余了。
還沒完，當我們在觀看視頻的時候，界面中會顯示暫停按鈕，意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態，而不是當前狀態。但其他圖標表示的意思卻又和開關相反，例如橫豎屏切換、收藏、點贊，顯示的就是當前狀態，而非點擊后狀態。
為什么不一樣呢？因為暫停/播放相當于一個按鈕，用來控制視頻播放，這里存在著一個控制和映射的關系，然而這里的暫停和播放按鈕的示能是相反的。
暫停圖標的示能表示當前正在播放，而播放圖標的示能表示當前已暫停。所以它和開關也不同，開就是開，關就是關，點贊圖標的原理就如同開關。
還有例如打開和關閉聲音，看起來聲音播放/靜音有點像視頻的暫停和播放。
例如騰訊視頻這里的視頻聲音控制，當前靜音為聲音關閉圖標，而不是打開后播放聲音的圖標，我們再看iOS系統的里聲音控的樣式表現，說明當前聲音為開啟則顯示的是開啟聲音的圖標，經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。
那為什么會不一樣呢？其實我也看到過一些聲音圖標和這個案例是反著來的。
兩個原因：
1.因為視頻的打開和關閉只有兩個狀態，但是聲音不同，聲音在打開的時候還可以調節音量??！如果和視頻播放一樣，在播放的狀態下顯示的是靜音的圖標，那么音量調節就會變成這樣：
是不是就很奇怪了，明明是正在播放的狀態，顯示的居然是靜音的圖標
2.暫停和播放的本質并不是開和關，而是中斷和繼續，在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉，如果我在聲音邊上加一個開關是不是就能弄清楚，為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎？
圖標意符可以單獨使用也可以結合文字使用，圖標雖然有優點，但也有缺點，如果單獨使用也需要注意使用的場景，比如舉個例子，同樣是放在導航欄的兩個圖標，但是在不同的界面中，大家可以感知到該圖標的含義嗎？它的示能和意符相結合成為了一個圖標，但不夠明確，在不同場景中如果沒有文字意符的輔助就會不夠明確。
圖形可以輔助表意，也可以用來指示區域，例如我們經常開車，會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線，示意車輛可以在哪些區域行駛、以及形式的規則。
我們在醫院拍胸片的時候，胸片機器下方也會指示人應該站在什么位置，用一個方形的框框起來，或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要，例如我們設計一個按鈕，只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的，后者的點擊信心會更大，有了區域的劃分就有了明確的操作界限。
顏色意符很好理解，通過色彩來表達如何與事物進行交互以及輔助表達。
無論是實體產品或者數字產品中，警示的顏色大部分會用紅色或者橙色來表示，例如在進行信息檢查時，錯誤信息會被用紅色樣式標注出來，既告知用戶出了什么問題，又提示用戶在哪里出現問題。
而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托，因為暖色更加的醒目。有時顏色也是物體示能的一部分，例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀，表示在緊急情況下可以使用，但不要輕易使用。
綠色表示安全、自然，但也有一些特殊場景下的不同感知，例如金融行業不太喜歡綠色，男士不太喜歡帽子使用這個顏色，除非你是比克大魔王。灰色則表示禁止、不可用、待激活等等。
在數字產品中，色彩除了表示一些特殊的含義，也可以用來作為信息區分，在選擇觀影位置的時候，可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。
聲音意符就更有意思了，人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣，而我舉個例子，就能把大家帶回到童年。
你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎？一個咳嗽聲表示有人申請加你好友，一個敲擊木頭的聲音表示有人上線了，一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效：滴————。你們會發現我怎么能打出有聲音的文字，仿佛你們已經在聽了。
聲音為什么很重要，因為人類的五感是在共同作用的，我們除了可以通過聲音來判斷事物本身，還可以用聲音來感知當前行為的狀態，例如打開手機的鍵盤輸入音，這樣的打字反饋更真實更有質感。
還有在游戲領域我們經常會提到的打擊感，當人物的武器打擊在怪物身上，但聲音并沒有及時反饋，而是延遲1秒，這時候你就會覺得沒有什么打擊感，除了聲音反饋，打擊感的意符還有很多，例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。
動效也可以成為意符嗎？它能表示什么含義呢？動效也是意符中非常重要的一種類型，他在我們日常生活中也用到的非常多。
例如我們看到理發店門口正在旋轉的彩色燈。
這里也順便給大家講個小歷史，理發店彩燈的由來：在中世紀歐洲，人們認為放血療法對人的健康又很大的幫助，但是一般都由宗教儀式中的神職人員操作，到了亞歷山大三世，他把這項工作交給了醫生，但是當時的醫生不愿意做這種下等人做的事情，便委托理發師來做，于是理發師就成立了理發師外科醫師聯合會，三色柱就是活動的標志，紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期，一家理發店是革命黨人根據地，一次危險的活動中領導人在理發師的掩護下逃脫，最后為了表彰，允許他們用紅、白、藍三色的國旗作為標注，最后演化成了旋轉燈，各國效仿。
好了，題外話說完，我們再回到動效。如果你看到三色燈正在旋轉，說明這家理發店正在營業，如果靜止則說明停業，或者壞了。是不是很簡單？這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花，家里沒人則放一盆綠蘿是一個道理。
那么在數字產品中，動效意符還有哪些作用呢？我們一一來盤點一下：
我們通過設計界面的轉場、控件的喚出動效，告訴用戶你將從什么地方去往什么地方，和你有關的控件是從哪里來，你可以怎么控制他。當你進行過交互行為后哪些內容變化了，它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來，停在你的面前并打開了車門，你選擇了上車然后看到阿姨捧著電飯鍋，拉動氣門，接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。
所以一個好的動效能讓你清楚事物的發展過程，以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時，添加菜品會有掉入外賣箱的動效，這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導，告訴你雖然文章在收入交互動作的結束是在右下角，但如果你想查看所有文章需要返回首頁，在頁面的左上角才能找到。
對于一些新人須知或者內容隱藏的部分，產品通常可以通過一個小動效來引導用戶這里有新內容，例如淘寶二樓、印象筆記功能圖標的切換、活動入口等等
電商、直播界面中，有非常多的元素都是利用動效來刻畫氛圍和效果，刺激人們的感官。
當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼，輸入框都會進行左右晃動來示意，老鐵，這真的不對。
意符不局限于我列出的一些類型，我再舉個例子，在一個不起眼的轉角處，那里空無一物，就是很普通的一塊空地，但如果那里被丟了一袋垃圾，那么這里就會出現越來越多的垃圾，因為第一袋垃圾就是一個意符，告訴別人這里可以丟垃圾，于是很多人就會把垃圾丟在這個角落里。
很多人會覺得示能和意符好難區分，示能不是也包含意符嗎，其實我們可以這樣理解，在整個交互過程中有物體和操作者這樣兩個對象，物體本身表達的是示能，但它不具備溝通能力，而意符才是鏈接操作者和物體兩者的橋梁，雖然我們平時往往看到的都是示能+意符的狀態，但是我們也要區分本體的示能和用來溝通的意符兩者的區別。
意符和示能不可分割，設計師們在學習基礎概念的時候要盡可能的一起去了解并學習。意符的種類繁多，所以我們在學習意符正確的時候方式時，首先要了解意符本身的“示能”，從而將意符更巧妙的結合在事物中發揮其正確的表意作用。
設計師在設計意符的時候也要盡可能的多了解產品使用者（用戶）的背景，意符的表達也有很大一部分效果來自于用戶的經驗和心智。即便我們認為該意符已經很清晰了，但是使用者并未接觸過、不理解，說明該意符依然不合適。
文章來源：站酷 作者：應駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你好，我是《用戶體驗四維度》，一本關于用戶體驗的新書，今天正式上市了。
具體內容方面，我選擇了聚焦于“人”——主要探討了人與界面、人與內容、人與人和人與品牌的交互體驗——大部分話題既有宏觀上的綱領，也有微觀上的實現細節。這四類交互體驗，下文的提及會使用簡稱，所以先看下簡稱及對應的全稱。
HI X：Human Interface Experience，人與界面的交互體驗；
HC X：Human Content Experience，人與內容的交互體驗；
HH X：Human Human Experience，人與人的交互體驗；
HB X：Human Brand Experience，人與品牌的交互體驗。
下面把時間交給作者李瀟，由他來做一些分享。
你好，我是作者李瀟。我主要分享兩點，第一點是這本書的來龍去脈，第二點是這本書的主要特點。
01 《用戶體驗四維度》的緣起
2019 年 7 月 15 日，我在個人公眾號上發表了第一篇設計類文章《淺談 Keep 的 UI 設計》，轉到朋友圈后有很多人點贊，也有朋友說寫得不錯，轉到站酷后也有很多設計師留言稱贊。算是一個還行的開頭，這給了我信心。
之所以會寫公眾號，是因為當時我成立了一個個人的設計工作室，希望借公眾號的文章引來一些客流。之所以第一篇文章會寫 Keep，一方面是因為 Keep 比較知名，另一方面是因為我比較喜歡 Keep，也是 Keep 比較忠實的用戶。
當時的計劃就是挑一些個人比較喜歡的、具有一定知名度的產品來寫，每款產品至少寫兩篇文章，一篇寫 UI 設計，一篇寫交互設計，或許還可以就產品功能再寫一篇。因為我分別從事過產品經理和 UI 設計的工作，同時也兼任過交互設計的工作，有這些方面的經驗。
按照計劃，第二篇文章很自然地就是關于 Keep 的交互設計，不過名字是《淺談 Keep 的用戶體驗》。因為所寫內容已經超出了“交互設計”的范疇，而“用戶體驗”恰好是一個更合適的主題。這篇文章的反響依然還行。另外，有趣的是，根據使用感受，我發現 Keep 這個擁有課程和社區的運動品牌，它的用戶體驗可以用四個維度來描述，它們分別是：人與界面、人與內容（課程）、人與人（社區）、人與品牌。沒錯，這就是本書最原始的雛形了。
再加上也有讀者朋友反饋說“用戶體驗的四維度”挺不錯，有啟發。于是第三篇文章就“拐彎”了——沒寫 Keep 的產品功能，也沒寫其他產品，而是把“用戶體驗的四維度”單獨寫成了一篇文章：《淺談用戶體驗的 4 個維度》。
某種程度上，第三篇文章的反響好過前兩篇，因為當時有 3 個業內比較知名的公眾號（分別是 MicroUX、應謀鬼計、UXPA，在此向他們致以謝意）轉載了這篇文章，且有一名立志成為產品經理的大學生根據這篇文章的觀點寫了一篇分析 QQ 和微信用戶體驗的文章：《從微信與 QQ 的交互比較中談用戶體驗》。另外，當時在跟一些朋友聊起我寫公眾號的近況時，有兩位設計師朋友都提了句“可以寫書/出書”。
不知說者是否有意，但是聽者有心，朋友的話更加堅定了我內心逐漸萌發的寫書的想法。第三篇文章之后，我就開始認真考慮寫書這件事了：首先，“用戶體驗的四維度”這個概念比較新，或許可以作為書的框架；其次，個人對用戶體驗非常感興趣，也就是對這個潛在的書的框架非常感興趣；第三，發在網上的文章，包括“用戶體驗的四維度”這個概念，反響都還行；第四，公眾號我是全職在寫，為了質量寫得很慢（平均兩周一篇 4000 多字的文章），時間成本已然很高，還不如再增加點時間成本來寫書。
所以，是不是真的可以把“用戶體驗的四維度”寫成一本書？
試試才知道。于是，在參考很多書的大綱以后，2019 年 8 月下旬，我就為“用戶體驗的四維度”列好了一個初步的大綱。
之后發在網上的所有文章，也就是從第四篇開始，就是按照這個大綱來寫的。也就是說，我是先把書稿寫成了網文，這種網文的更新一直持續到第 2 章 HI X（人與界面的交互體驗）的尾聲，隨后斷更。因為那時已和出版社簽好合同了，按照約定，書里的內容不再發到網上。對于那些曾在網上追過我文章的讀者朋友，在此我要說聲抱歉，請見諒。
順便說下書稿和網文的主要區別。歷經編輯的指導與建議、作者的反復修改、審校流程的打磨，與網文相比：
一，書稿的邏輯與結構更加嚴謹、合理，內容和語言也比網文精簡；
二，書稿更加體系化，相互之間（如 HI X 部分的根需求、功能架構和信息架構）盡可能做到了“環環相扣”，章節之間的起承轉合也更加連貫、自然；
三，書稿在內容層面進行了一定程度的修改和優化，個別章節（第 1 章的四維度，第 2 章的根需求、功能架構等）則是進行了極大程度的修改和優化。
四，書稿在產品案例和生活案例方面也進行了一定程度的調優。
以上就是這本書的一個簡單緣由，接下來分享下它的主要特點。
02 《用戶體驗四維度》的特點
這本書主要有四個特點，它們分別是：追求深度、追求卓越、展望未來、兼顧大小。當然，我也很期待你去發現這本書的其他特點，包括它的缺點。
是最堅強的人，是最脆弱的人 是最理智的人，是最敏感的人 固若金湯的人，語無倫次的人 不過，血肉之身
文章來源：站酷 作者：SonwDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
首先，我們先來了解什么是用戶體驗
從字面上來說，用戶體驗就是用戶在使用產品過程中對產品的直觀感受以及評價
這種感受非常的主觀，但又很容易影響別人對產品的判斷。這就是為什么某寶商家一直求好評，而某團騎手會為了好評跟用戶“大動干戈”的原因了
UI——User Interface，本意是“?戶界面”，但現在這個詞已經被擬人化了，即把那些做用戶界面的設計師們叫做UI
UE——User Experience，本意是“?戶體驗”，現在也變成了一個職業名詞，是指那些做用戶調研的研究員，比如用戶畫像、產品分析、競品分析等。有些公司把“交互設計師”也叫做UE，嚴格來說UE和交互是兩個職位，不過現在很多UE除了做用戶調研也會畫交互原型，所以混在一起也不奇怪了
IxD——InteractionDesigner，本意為“交互設計”，也就是交互設計師，現在也常常用UX（User Experience）來表示交互設計，用來跟UI進行區分。簡單來說就是幫產品畫原型的，實際上這個職位非常的關鍵，產品希望表達的邏輯，各個界面的跳轉與關聯關系，以及產品的可用性與易用性，都體現在交互上
UED——User Experience Design，本意為“?戶體驗設計”，現在常常表示用戶體驗設計團隊，基本上大一點的互聯網公司都有自己的UED團隊，甚至大的部門都有自己的UED團隊
UED團隊要做的事情可多了，通常來來說主要坐下面的事情：
用戶研究
產品分析
交互設計
產品設計
視覺設計
品牌設計
插畫設計
簡而言之，UED是以用戶需求為目標而進行的設計的團隊，通過團隊的經驗與設計能力給出設計方案，是幫助公司進行產品策劃的主力之一
說到用戶體驗，就不得不提用戶體驗五要素了
現在我們所談論的用戶體驗的概念，其實最早出自一本叫《用戶體驗要素》的一本書
《用戶體驗要素》--作者Jesse James Garrett，是美國用戶體驗咨詢公司Adaptive Path的創始人之一
這本書出的其實比較早，英文版在2001年就出了，國內常見的是2010年出版的中文版第2版，書里的概念在互聯網設計界廣為流傳，非常值得閱讀
當設計師在設計或重構產品，卻不知從何開始時，這時我們可以參考用戶體驗五要素
用戶體驗五要素是一種產品分析與設計的方法論，他向教科書一樣指導我們從0到1設計一款產品。同時它涵蓋了一個產品從想法到落地的整個流程，這正是我們學習它的重要原因
用戶體驗五要素由戰略層、范圍層、結構層、交互層、表現層等5個層級構成，由下而上像個金字塔的結構一樣，戰略層則是底部最堅定的根基，產品的起源也源自該層
這是五要素的最底層，一般是公司負責人與產品總監、市場總監等高層之間的討論范圍層。這一層主要是確定產品目標以及用戶需求。比如：
公司要做什么
面向什么樣的用戶
什么樣的解決方案
公司的產品特色是什么
競爭對手有什么
將來的收益怎么樣
值得一提的是用戶畫像需要在這一層定義出來。我們可以招募一些用戶進行訪談，然后為用戶分組，并結合用戶的需求確定我們的產品目標
戰略決定范圍，這一層主要針對戰略層的需求進行更細致的分析，定義需求是什么，提出解決方案，同時要定要好需求的優先級
根據前兩層思考產品的信息架構，規劃任務流程，簡單來說這一層主要是產品PRD的輸出
頁面的具體功能擺放，信息布局，這一層主要是交互設計，輸出低保真原型
頁面最終給用戶呈現的視覺效果，這一層主要是視覺設計，輸出高保真視覺稿
作為設計師的你，接到了一個餅干公司的設計需求，公司希望你能幫他完成從產品到包裝一系列的設計，你該怎么去做呢？
我們用用戶體驗五要素來整理設計思路：
-戰略層
先了解這家公司的產品需求和用戶需求
產品需求：公司是個小型食品加工廠，主營是面包和餅干，有實體店也有網店，今年準備在圣誕節推出一款圣誕餅干
用戶需求：用戶畫像是20-35歲的女性，喜歡看劇，喜歡網購，對可愛的東西沒有抵抗力。今年上映的一部電影叫《餅干俠》（虛擬）票房火爆，用戶都想買到劇中同款的餅干
公司目標：希望圣誕前后一個月內盈利50w
-范圍層
分析需求：公司是做一款圣誕餅干，了解到《餅干俠》的原型是出自美國卡芙食品的一款餅干，并把它確定為競品并展開分析
設計方案：列出一系列設計清單，包括品牌logo重新設計，食品包裝、網店圣誕裝飾、廣告宣傳圖等，給這些設計需求確定好優先級
-結構層
信息架構：進一步細化已列出的設計方案，輸出文檔或者設計規范，比如《品牌手冊》《食品包裝標準》等
交互流程：進一步的用戶畫像與分析，收集市場同類型品牌調性，通過試用的方式整理出餅干的分類屬性，如口味、分量、包裝材質等
-框架層
從這里可以開始整體的、低保真的設計了，可以出一些比較具體的設計方案，目的是快速跟需求方進行評審，為后續的視覺設計作準備
-表現層
經過前面反復的溝通與評審，開始高保真的視覺設計，從產品包裝到廣告圖到物料，這里就是設計師們展示商品顏值，提升其商業價值的時刻到了
最終產品上市
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn