希望國內的互聯網產品能夠多去考慮無障礙設計，讓我們的產品更有包容性，能服務更多的用戶人群。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：隨著SaaS行業的不斷發展，對于該領域的許多企業來說，其實定價就意味著制定企業的商業模式。那么如何正確的采取SaaS的定價策略？本篇文章將會從三個不同的定價來檢查定價策略的連續性，以及不同的價格如何確保公司商業模式各個方面的關聯。
我最近一直在思考一個問題，一款付費產品定價多少才算合適，用戶才愿意付費？這邊舉例某視頻App，幾乎每款視頻會員每月的定價在15-25之間。
平臺開放新用戶首月6元，三個月后轉至15元每月。
因為價格比較低。所以很多新片上映的時候，大多數人會選擇充值3個月的視頻會員，但是三個月結束后呢，用戶還愿意付款全額去購買會員嗎？又有多少人為了所謂的喜愛視頻去付費呢？
視頻內容則是用戶付費的基礎，后續又開通了超前點播功能，讓熱播的視頻變成熾手可熱的賺錢工具。
我們觀看視頻的時候肯定出現過一種情況，因為版權問題，我們需要到不同的平臺觀看自己喜愛的視頻，這就導致我們需要下載好幾種App，再充值幾個會員。對于一個本身不富裕的家庭無疑是雪上加霜。
后來我跟幾個朋友商量，我們三個人在不同的平臺上開通一個會員，我們互相登錄對方賬號，這樣我充值一個會員就可以獲得三個平臺視頻的會員，想想還挺劃算。
最近很多朋友問我SaaS軟件中，到底如何定價才合理?
隨著SaaS行業的不斷發展，對于該領域的許多企業來說，其實定價就意味著制定企業的商業模式。
然而這其實并不是唯一的“支點”，但隨著公司規模的擴大和用戶群體的增長和變化，逐漸演變成一種不斷變化的商業模式。
如果一家公司從初創公司轉向主流規模擴張階段，那么就可以看到該公司需要更專業，更有利可圖的用戶群體來磨煉公司產品的市場契合度。
無論你的產品如何發展，如何了解定價策略和實施定價在發展階段是至關重要的，采用不合適的定價模型很容易導致公司發展方向飄忽不定。
SaaS定價無非兩種，一種是面向用戶自助服務定價，另外一種則是企業服務定價。
在擴展產品和發展業務時，在確定定價策略之前需要回答幾個關鍵問題:
- 產品是否有錨定競爭對手（如果存在）或該產品是否可以成為替代品？
- 該應用程序解決的需求有多強烈和頻繁？
- 該產品可以為用戶或企業提供多少價值？
- 價值是臨時的還是持續的？
- 你的網站上是否有明確的定價頁面？還是你隨機制作的？
- 用戶是可以通過微信支付寶購買還是可以通過各個付費機制付款（貸款金融）
如果你可以熟練地回答的出以上問題，說明你對產品的了解以及商業模式有著充分的了解，在這里我們通過不同的定價來檢查定價策略的連續性，以及不同的價格如何確保公司商業模式各個方面的關聯。
一、SaaS基礎版：1K-2.5K
其實在跟業內朋友溝通定價的時候出現過一個問題，產品的定價到底需不需要商家免費版的機制供用戶體驗？
我們可以看到很多市面上的產品大多都采取有免費版的機制，主要產品可以快速的獲取新用戶，讓用戶快速體驗該平臺為自己帶來的價值，這種模式雖然可以快速獲取大量的用戶。
但如果初創企業采用這種模式，會因為獲取客戶和服務的成本可能會在短期內影響產品的收益和公司盈利跟不上。
如果你的平均訂單價值每年在2500以下，那么在這個級別上，你的客戶獲取成本主要是基于網絡營銷或者創建高質量的文章來教育市場并吸引潛在客戶訪問你的網站。
這里的關鍵是降低獲客成本，如果有可能的話，考慮到現金流和減少用戶流失的問題，可以鼓勵客戶先預付明年的費用，可以贈送一些特權模塊，（選購3年贈送2年）此外還需要根據產品的實力來進行合理的規劃。
這些客戶當中可能是一些中小型企業，因此在可尋市場方面數量較多，推廣起來相對比較容易，這類客戶一旦有明確需求，產品可以響應他的需求，在這個價位上，購買決策通常會很快。
如果你的產品有這類定價模式，請將內容和網絡集合營銷作為你主要的客戶來源，總的來說盡可能減少與客戶之間的交互，因此只要確定用戶進來，體驗完成，提交訂單就可以了。
二、SaaS進階版：2.5K-6K
很多SaaS產品業務都占據了這個區域，但這個價格區間一個關鍵的要點就是獲客成本很容易超過產品生命周期價值，從長遠來看還是任重道遠的。
在這階段，客戶體驗過產品后，查看自己所需的購買模塊，有的時候客戶會因為喜歡一個功能，但是如果使用這個功能需要提升到進階版，但是客戶資金不足，但非常想要這個功能怎么辦？你有沒有辦法解決這類問題？
我采訪過一家上市SaaS企業公司的產品總監，當時我們在溝通這類問題的時候。
他的回答是：“這個問題說難也不難，側重點在于用戶想花更少的錢就可以獲取自己想要的功能，那我們就把所有的功能模塊展示出來，你想要那個就點擊那個，然后根據該客戶使用的模塊來進行定價”。
我又問到他：“如果這種情況下企業會不會做到價格不可控，最終導致競爭力不足，被市場淘汰，因為本身全部開放的話，客戶選擇太靈活，沒有大客戶怎么辦？”
后來我們思考了一段時間，就在上周四，我們重新探討了產品定價策略，這個時候我們的解決方案是這樣的，僅供參考哈：
首先我們預設三個版本，基礎版（1000-2500），進階版（2500-6000），企業版（6000+）。
我們通過制定不同的版本，大家可以看到價格之間的彈性較大，這是因為我們在定價過程中，采取功能列表上下浮動的方式來實施。
這樣各個模塊之內的功能都會確定，但客戶在使用過程中可以選取自己想要的功能，這樣會減少客戶的成本，從而減少客戶流失率。從而也會增加大客戶獲取的數量。
客戶：“我只使用百分之50的功能為什么要付款百分百的金額！”
中間地帶是SaaS公司值得關注的一個有吸引力的領域，優惠獎品大小和客戶用戶數量龐大，然而，特別是在這類用戶，務必要好好維護，盡可能為客戶提供更多的價值，如果客戶付費金額和實際回報經濟不穩定，失去了平衡，那么老用戶也可能會不顧一切的把你拋在腦后。
如果企業形成了這樣的病態，獲客成本可能會螺旋式的上升。
三、SaaS企業版：6K+
這類客戶其實是企業存活時間的基礎，沒有那個酒店每天上幾桌子人就會達到盈利的，最終要是要靠婚宴包桌，企業宴請等大客戶來維持企業。
這個階段就需要產品與市場有著高度的契合度，如果你的客戶超過百分之10的付費金額在一階段，那么先恭喜你，說明你的產品基本可以運行了幾年。
這意味著產品處于高頻率銷售領域，需要高管接觸銷售，長期跟進客戶銷售是常態，并且需要客戶經理來確保產品能夠持續輸出產品價值。
因為這一段利潤足夠高，然而在這一階段中尋找高觸發客戶對于SaaS初創企業來說是一個高風險策略，尤其是銷售周期變長，如果“大客戶”使用它，通過會擁有很大的影響力。
“企業客戶希望通過定制功能的需求來塑造產品開發?！?/span>
或者需要超出該產品的典型覆蓋范圍的 SLA。在公司的發展中過早地針對這種規模的客戶會冒著“過度擬合”你的產品及其功能以滿足單個客戶的特定需求的風險，從而使你受制于他們的需求并且不適合其他潛在客戶的需求.
對于 SaaS 初創公司來說，追逐“大客戶”是一種高風險的策略。除非資金充足，否則收購成本可能過高。他們可能擁有雄厚的財力，但難以落地，一旦落地，他們的需求將影響業務的所有領域。
更好的策略通常是在價格連續區間的較低部分關注更豐富的潛在客戶，一旦你的功能集更加成熟并且您的銷售模式已建立完善，則向上游移動。
你就可以去敲鐘了！
四、理解復雜相互的關系
對定價連續性的概述應該清楚地表明你的定價策略不能孤立地決定，因為每個價格點的連鎖反應都是相當大的。定價需要與所產生的價值緊密結合，但也要在更廣泛的決策背景下考慮要服務的客戶以及進入市場的途徑以獲取他們的信息。
認識到不同層級的固有風險將有助于確保您在導航定價連續體的不同步驟時定位組織的每個部分。
“SaaS 市場的不斷發展意味著你可能會定期重新評估您在價格連續體中的位置”
例如，對于許多初創公司來說，客戶需要從入門級開始，在幾年內向高端市場發展。如果剛開始就從企業定價開始，那么請注意與銷售相關的長銷售周期和費用確實會給現金帶來壓力。
如果你邁出了這一步獲得一些早期的勝利，因此你可以向你的網站添加一些標志，從使用中學習并隨著時間的推移添加更多引人注目的功能.
這將使客戶能夠隨著的解決方案、公司和市場的成熟而向上游移動。
最后，確定在該連續統一體中的位置很少是“最終的”——SaaS 市場的不斷發展意味著您可能會定期重新評估您在價格連續體中的位置——畢竟，這是您早期的自然定價點隨著您的成長，公司不太可能保持這種狀態。
這就是為什么需要了解業務的所有不同要素之間復雜的相互關系如此重要的原因——成功地在定價范圍內導航取決于徹底了解產品的定價策略如何與產品的銷售、營銷和支持策略以及產品路線圖。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：人人都是產品經理 作者：秀琴分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：在當今內容為王的時代，傳統的信息流無法承載日益豐富的產品內容，一種個性化的內容推薦方式-feed流逐漸孕育而生。本篇文章中作者分析了feed流的組成元素，以及常見的feed流樣式。推薦對feed流感興趣的朋友們閱讀。
在這個內容為王的時代，各個類型的產品都開始圍繞著自己所處的賽道營造豐富的信息流，傳統的信息流不再能承載當下豐富多樣的內容，信息流也不再單純屬于信息類以及文娛類產品，許多金融類產品甚至是工具類產品都開始有了社區，不同類型的內容開始進入用戶的視野。
因此傳統的信息流無法承載日益豐富的產品內容，逐漸一種個性化的內容推薦方式-feed流逐漸孕育而生，其樣式豐富，其中包括大卡流、雙列流、沉浸流、動態流、文本流、動態流、櫥窗流…..筆者將在本文中分析feed流的組成部分，以及使用場景和設計要點。
筆者調研了不同類型的feed流，發現feed流主要由以下幾個部分組成。如下圖：
筆者為大家挑選了幾個比較常見的元素為大家進行分析。
在大多出產品的feed流中，占最大面積的就是圖片或視頻。相較于文字，圖片更能夠激發用戶點擊的欲望，在帶有社區屬性的產品中，設計師還需要考慮如何適配橫屏以及豎屏封面。
其次是如果該位置出現的是視頻。在常見的視頻產品中，當系統識別出該內容處于用戶界面的中間區域，則會自動進行預告播放。在1-2秒的時間內，用戶能夠快速瀏覽視頻中最精彩的部分。在展現方式上通常使用帶有圓角的距形進行展示，圓角一般設置為：8、10、12、14、16、20PX。
在feed的設計中，標題是最不可缺少的部分，在字體的設計上，大多數采用黑色字體。在排布方式上在一行至兩行，如出現標題字數過多，可以用「 … 」的方式進行呈現。其次需要限制產品的創作者以及運營在配置標題時，注意文案應該簡明扼要，不要過于累贅。
該區域可以叫做文案區域或二級標題區域，在該區域的設計中，字體顏色建議大多數采用灰色進行展示。在文案的編寫上可以加入更帶有引導性的詞匯用于引導用戶點擊。
標簽的出現目的主要有兩個方面，第一個方面是幫助用戶能夠快速的區分內容的種類如：預告、獨播、直播、精選、推薦等。用戶可以在眾多feed流中通過快速查看標簽進行篩選，從而快速找到自己想看的內容。
第二個方面主要是幫助產品進行更加精準的流量分發，產品會根據用戶的操作習慣進行分群，再根據用戶興趣給每個群體打上相對應標簽。而這些標簽則是對應了不同群體的用戶，因此也就有了淘寶商城中千人千面的推薦形式。
輔助信息主要是為了滿足不同產品的信息呈現，如在視頻平臺中，輔助信息可以承載電影評分、電視劇的集數、播放量、綜藝的更新日期、點贊數、評論等，甚至會加入相關的快捷操作如靜音。輔助信息在設計中，不易做的過于突出，需要清晰單個feed的信息層級，挑選必要的信息進行展現。
操作區域的目的是為了產品的算法更加了解用戶的偏好，因為用戶的興趣是會發生變化的，如果用戶在某段時間突然特別不想看到某些內容，就可以通過點擊操作將內容進行「不喜歡」或「減少相關內容」的操作，這樣也能給予用戶對于feed流一定的自定義。
在交互形式上，點擊操作區域后，建議采用較為輕量的交互方式，如點擊后出現底部彈窗或氣泡的形式。
僅僅了解了feed的組成部分是不夠的。單個的feed流其實就像是英語學習中的單個單詞一樣，單獨的去死記硬背某個單詞其實意義是不大的，feed流的設計也同樣如此。
我們還需要擁有能夠將前面提到的組成元素，拆開和重組的能力，因為不同的產品業務屬性不同，所需要給用戶提供的內容也就不同。接下來筆者就給大家介紹一下常見的feed流形式。
介紹：文字流多在信息類產品如知乎、百度，或產品的用戶評論區當中。此類樣式可以運用在以文字為主的feed流設計中，并且還可以與動態流（下文會提到）之間搭配使用。
由于適配度高，可容納更多的操作按鈕，因此可以服務與以UGC內容為主的產品，UGC產品需要強調用戶之間的互動，需要將互動類快捷操作外露。
如下圖：
使用場景：以文字為主的信息類產品，新聞資訊類產品、評論區、產品發現頁/社區
設計要點：在文本流的設計中，需要注意的是區分信息的優先級，其中標題可以采用大字號加粗的方式進行區分，正文則可以采用黑色常規的字體。
操作區域以及輔助信息可以布置在正文的下方，灰色處理，頭像以及標簽可以作為一個整體進行布局。在交互上，可以將分享/評論/點贊等按鈕外露，從而降低用戶的互動成本。
介紹：該樣式主要服務與以圖片/視頻信息為主要內容的feed流。以淘寶為例，在淘寶2020年提出“逛淘寶”的理念后，不再一味的追求交易的最短路徑，而是讓用戶在首頁點擊了某件商品之后，進入的是一系列同類商品的feed流，而不是商品的詳情頁?？梢钥闯?，大卡流非常適用于圖片/視頻信息的展示。如下圖：
使用場景：以圖片為主的內容且需要搭配相關操作，如評論/進入詳情/分享/點贊等。劣勢是單排僅顯示一條feed，所需空間較大，在首頁不適合單獨使用，需要和其他feed樣式進行搭配。
設計要點：在大卡流的設計中，由于空間較大，需要注意標題和操作區域的擺放位置，其次是需要把控創作者或合作媒體上傳的圖片質量。最重要的是需要考慮適配橫屏和豎屏的封面，由于圖片比例的不同，會涉及到相關操作交互一致性以及視覺一致性的統一。
介紹：筆者認為將雙列流帶到用戶視野的產品非小紅書莫屬，從小紅書發布之初到現在一直采用雙列流的形式。它的好處是能夠最大限度的將以圖片為主的feed內容呈現給用戶。
樣式最初以長卡樣式為主，主要用于適配豎屏圖片，但隨著現階段UGC內容的發展，雙列流也開始適配橫屏封面。如優酷的首頁feed，則是采用了雙卡流中的短卡樣式，也不乏將長卡和短卡搭配使用的情況。
使用場景：主要適用于需要以圖片為主的UGC產品，非常適合用于首頁，但不推薦與其他feed樣式結合使用，容易打破雙列流左右兩則的排布節奏。對于相關操作按鈕從數量上有局限性，不建議外露過多按鈕，可以探索長按吊起更多操作的交互方式。在具體的設計樣式上，建議參考小紅書，僅將創作者與點贊數的操作進行外露。
設計要點：在設計雙列流的過程中需要考慮左右兩列之間以及上下兩行之間的間距，由于內容與內容之間圖片的高度不同，標題字數不同，因此需要制定良好的規范，從而保證用戶在瀏覽內容的過程中保證兩列內容之間的節奏感。其次是控制操作按鈕的個數，需要根據產品實際需求，僅將最總要的操作進行外露。
對于沉浸流的使用最具有代表性的是抖音以及快手，隨著各個產品賽道都加入了短視頻以及直播間的模塊，該類樣式幾乎能夠在所有頭部產品中見到。如在淘寶的商品詳情頁以及首頁都加入了直播的模塊，點擊進入后可以沉浸的了解電子產品的測評或是服裝的實際上身效果，從信息傳達上會比單一的圖片更加多元更具有沉浸感。
使用場景：該類樣式主要適用于短視頻、直播間
設計要點：由于在不同產品中，短視頻起到作用不同。
比如在淘寶，短視頻的目的是給予用戶更直接的效果展示，讓用戶能夠快速的了解到產品的優點，從而下單。
因此短視頻在淘寶詳情頁中的作用就是激勵用戶購買，所以會在左下角加入購買的鏈接。再比如在視頻類產品中，如優酷則是提供相關的電影片段，那么目的就是為了給產品中的電影播放區導流，因此在設計過程中也會有相應的改變。
在使用沉浸流的過程中，需要結合實際項目需求，不能將抖音快手的設計方式直接照搬到自己的產品中，這樣容易導致產品功能割裂的情況。
其次是需要將功能進行分區展示，如可以將同類的相關操作聚合放置在固定的區域，由于沉浸流功能按鈕會非常多，因此對用戶容易造成干擾，容易找不到想要操作的按鈕。
介紹：微博和微信朋友圈是筆者認為將動態流使用的最為廣泛的產品，由于在這兩款產品中，內容過于豐富，不僅需要適配橫屏或豎屏的圖片/視頻，還需要考慮適配不同數量。
并且需要將所有圖片展現給用戶，其中還不乏動圖。因此對于feed的兼容性提出了極高的要求。
使用場景：動態流可以運用在主打UGC的社區類產品當中，以及單個產品中的社區模塊。
設計要點：由于發布內容的主題是合作的媒體以及用戶用于記錄個人生活，因此動態流的優勢非常明顯，可以適配不同數量的圖片以及用戶的自定義標簽，因此動態流很難說是呈現以圖片/視頻為主的內容，還是以文字為主的內容，需要設計師與業務冊進行協商，找到feed對于產品的定位是什么。
劣勢則是用戶難以抓住單條內容中的重點。因此設計師在設計的過程中，需要明確制定相關規范，靈活適配單數或雙數的圖片數量，從視覺上保證平衡。
介紹：櫥窗流在近兩年越來越多的出現在各大產品中，由于頭部產品都在往超級APP的方向進行發展。
前面筆者給大家介紹的各種feed樣式之間都存在著各自的優勢和劣勢，但是依然無法滿足現在日益豐富的產品內容，因此櫥窗流誕生了。其樣式可以理解為將不同樣式的feed進行排列組合，給予用戶矩陣式的內容推薦。
使用場景：多用于產品首頁金剛區的下方，作為產品中某項功能或服務的入口進行承載，如新品首發、現實搶購、正片回顧等。其次是運用在某類內容的聚合場景下。如將某一類視頻形成一個組合的片單，或者是將某一類書籍形成書單，但是由于內容過多，封面難定的問題，此時可以采用櫥窗流的方式進行承載。
設計要點：雖然說櫥窗流能夠承載豐富的內容，容易烘托產品氛圍。但是設計師在設計過程中需要對視覺進行整體進行把控，由于單個區域中，可能會出現過多個內容，容易造成頁面混亂對情況。因此不宜把單個feed設計對過于出跳，這樣容易影響產品的流量分發。
其次是需要區分單個feed之間對樣式差異，由于在櫥窗流中，單個feed屬于內容的集合，因此需要注意區分不同feed之間的樣式。
在本文中，筆者粗略的分析了feed流的組成元素，以及常見的feed流樣式。其中不同的樣式各有利弊，并沒有某一種萬能的樣式，因此在設計過程中，需要結合業務目標以及用戶目標進行分析，分別分析對于標簽/圖片/文字/操作的需求，從而設計出最適合產品需求的feed。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：NFT，即非同質化代幣，其特點在于唯一性。NFT也經常與藝術領域結合，越來越多人開始投入到NFT藝術創作當中。而唯一性和所有權的確定性，更是讓NFT藝術有了一定的收藏價值，也由此產生了一些亂象。本篇文章里，作者就NFT的現狀與未來發展發表了看法，不妨來看一下。
NFT代表的未來，到來了嗎？
2021年7月，一張新聞圖片在國內網絡爆火。
圖片里，四川黑水的一位藏族婦女正搬運著從新疆轉運而來的“礦機”（計算機通過算力獲得比特幣的過程被稱為“挖礦”）。她穿著藏袍，裹著頭巾，手里抓著的卻不是麥穗或花束，而是一把電源線。
財新圖片改編版NFT，圖源鹿科技網
照片出自財新周刊的報道《中國告別比特幣“挖礦”》。落后地區民眾與區塊鏈科技的巨大反差，讓畫面充滿了藝術張力，宏大的時代變遷融進鏡頭，這張照片不僅擁有信息價值，藝術性同樣出眾。
“世界名畫”，網友們慨嘆的同時，另一條評論也被贊上熱門：“這張照片能在NFT專場賣十萬美元”。
這不是臆想。照片發出后不久，一幅改編版圖片出現在NFT交易平臺上，叫價高達2021ETH（410萬美元）。還有消息稱，已有人開始接洽照片拍攝者，將其所有照片作品包裝為NFT藝術品。
各種消息難辨真假，但這張照片又讓區塊鏈世界的另一個概念——NFT（非同質化代幣）再一次進入公眾視野。如同前幾年的比特幣一樣，相關的新聞下，越來越多的人想知道什么是NFT，“你知道什么是NFT嗎？”許多人迫切的需要解答。
相對于公眾認知，NFT商業的發展是前置的。2021年開始，國外藝術領域就已經掀起了一股NFT熱，并持續至今，國內的NFT領域近期也開始備受關注，騰訊、阿里等企業紛紛下場，NFT已經成為當下商業領域炙手可熱的概念。
NFT拍賣、NFT盲盒、各式加密藝術展，打開資訊平臺，幾乎每天都能刷到一篇“NFT”相關的文章。被消息驅趕著，人們開始關注這個新興領域，并將熱度推向一個又一個的高潮。
但仍舊有很多疑問等待解答：什么是NFT，NFT是怎么火起來的，NFT藝術品又為何能如此火爆，未來又將如何發展？
NFT藝術中的NFT到底指什么？
NFT的全稱是Non-fungible token，是一種基于以太坊區塊鏈的“非同質化代幣”。
與比特幣、以太幣等虛擬貨幣一樣，NFT同樣依靠區塊鏈進行交易。但NFT代幣的最大特點在于其唯一性，“非同質化”，每一塊NFT都獨一無二，不可互換，人們可以將特殊資產綁定在NFT上，其可以讓許多物品成為一種數字化抽象物，變成所有者的“數字資產”。
制作NFT的編程標準“ERC721協議”
圖源Tiny熊《剖析非同質化代幣ERC721》
如果說比特幣、以太幣等同質化代幣可以被比作鈔票，NFT更像是一件藝術品的原件。憑借這種特性，NFT在藝術領域得到了廣泛應用，諸多數字藝術品開始與NFT綁定。
NFT藝術的起源可能在2017年。
彼時，Larva Labs公司開發了一款像素頭像生成器，生成了約1萬個各式各樣的像素頭像，帶著“朋克”精神的期許，這一頭像系列被命名為CryptoPunks，意為“加密朋克”。2017年正值以太坊火熱發展之際，Larva Labs將CryptoPunks頭像掛上區塊鏈，并賦予其流轉收藏的價值。
CryptoPunks系列像素頭像，圖源網絡
這為NFT的誕生提供了契機。同年，受CryptoPunks影響，一家名為Crypto Cats的公司推出一款名為“密碼貓”（CryptocKitties）的游戲，游戲里玩家可以通過一串代碼創造出一只“密碼貓”數字形象，并且每一只貓都獨一無二，這些密碼貓們的所有權都被存儲在以太坊上。
“密碼貓”被認為是NFT代幣的濫觴。2017年底，以太坊ERC 721協議（非同質化代幣的編程標準）誕生，NFT也隨之出現。2021年，經過近四年的發展，在藝術領域，NFT終于迎來了“爆發”。
密碼貓CryptoKitties，圖源網絡
NFT的每次高流量曝光都像是行為藝術。
2021年3月，數字視覺藝術家Beeple的一套NFT藝術品備受關注。從2007年開始，Beeple每天都創作一件藝術品，最后他將五千幅作品拼接成一張圖片，并將其命名為《Everydays：The First 5000 Days》，并在佳士得拍賣行上線。
藝術家Beeple的NFT作品《Everydays：The First 5000 Days》，圖源網絡
3月11日，一個名叫“MetaKovan”的賣家以6934.8萬美元的價格拍下了這幅作品。這個數字出乎所有人的預料，NFT藝術，也開始光速出圈。
同樣在2021年3月，另一個新聞也讓人們看到了NFT藝術的商業潛力。著名街頭藝術家Banksy的作品《Mornos》（《白癡》）被以9.5萬美元的價格買下，隨后購買者直播燒毀了畫作，并將其NFT版本掛上NFT交易平臺Opensea。最終，《Mornos》的NFT版本被以4倍的價格售出，約合人民幣247萬。
直播畫面里，蒙面的持有者點燃了《Mornos》。畫作熊熊燃燒，《Mornos》完成了從實體藝術品到NFT藝術品的轉變，火光似乎正向全世界預告著，NFT藝術的時代正式來臨。
燒毀《Mornos》直播畫面
有趣的是，《Mornos》本就是Banksy為諷刺高價藝術品而創作的，畫作展現了一個人滿為患的拍賣場，拍賣師正介紹著一幅畫作，而他身旁的一個相框里寫著“我真不敢相信你們這群白癡買了這個”。
燒畫者，也是《Mornos》實體作品的持有者——區塊鏈公司Injective Protocol將燒畫行為定義為“一種藝術表達”。在NFT藝術領域，NFT代幣常常與數字藝術、行為藝術緊密結合，從而衍生出一種新的藝術形式——加密藝術。
加密藝術的特點非常明晰，區塊鏈技術決定的“去中心化”，超越國別地理的廣泛交易，以及各種各樣的藝術形式。
如果要用例子去解釋這些特點，可以這樣暢想：你擁有的NFT藝術藏品可以以任何形式在數字世界存在，一條短視頻、一件虛擬時裝、一條代碼、一件游戲裝備、一張表情包，或是NBA球星的生涯經典瞬間，都可以被你收入囊中。
價值59 萬美元的NFT《Nyan Cat（彩虹貓）》GIF，圖源藝術星空
NFT藝術品的交易門檻并不高，即使你并不了解藝術領域，你仍舊可以進行收藏，藝術家也不用通過拍賣行、藝術品市場發行作品，通過區塊鏈，每個人都可以參與到藝術市場中。
NFT的多種可能性讓藝術領域為之震動。前面提到的CryptoPunks像素頭像是當前炙手可熱的NFT之一，在當前市場已有的一萬個像素頭像中，價格最高的達到了4200ETH，相當于757萬美元，而外星人、猿人形象的像素頭像更是高價難求，是NFT中的奢侈品。
昂貴的“猿人”CryptoPunk，圖源網絡
越來越多的藝術家也開始試水NFT領域。他們將自己的藝術作品進行鑄幣，使其成為一件NFT藝術品，將其發行于一級市場，如果有人買下了該NFT，很有可能還會進入二級市場的各種平臺，再一次進行流通，而在每次交易中，藝術家都能憑此獲利。
目前海外最熱門的幾個NFT交易平臺基本都基于公鏈以太坊，如Opensea、Rarible、Foudation，這些平臺有的準入門檻較低，有的則實行邀請制，但“鑄幣”都需要繳納至少50美元的費用，收藏者們也可以在這些平臺上進行NFT交易，但同樣會收取較高的手續費。
NFT平臺Opensea
除此之外，還有許多基于其他公鏈的交易平臺，大大小小，不計其數，其中大部分平臺的手續費較低，吸引了眾多不知名的藝術創作者。
為NFT“蠢蠢欲動”的不止有藝術家，明星、各大企業、機構、品牌也開始下場。在年初的市場被點燃后，NBA、Gucci、推特，VISA等機構、公司相繼開始收藏、推出NFT產品，從球星卡到虛擬時裝，甚至是幾個字符，都能在NFT市場掀起熱潮。
NBA球星卡盲盒已經成為了當下NFT收藏品中的“頂級”，交易額達到了5億美元以上。各式虛擬時裝也備受關注，多件NFT潮鞋、服裝在市場上賣出高價。
NBA球星卡NFT，圖源微博
NFT藝術的邊界還在不斷拓寬，早期的NFT作品可能只是一張JPEG圖片，現如今已經與音頻、電影、游戲等多個領域接軌，NFT禮物、NFT盲盒等形式也開始發展。
知名說唱歌手艾米納姆也推出了NFT，圖源雪球
在商業上來看，“NFT藝術”存在著無限可能，許多“小藝術家”通過NFT嶄露頭角，有的甚至一夜暴富，各式平臺蒸蒸日上，交易總額也在不斷擴大。
未來，似乎即將到來。
雖然相較于海外稍顯滯后，但是國內仍然趕上了NFT熱。
阿里巴巴可能是“第一個吃螃蟹的人”。2021年5月，支付寶上相繼推出了與敦煌美術研究所、《刺客五六七》的聯名款NFT付款碼皮膚，開始對于NFT的嘗試。與此同時，阿里還推出NFT數字藝術專場，正式宣告入局NFT產業。到目前為止，螞蟻集團已經售出近8000個限量版NFT。
IP也是國內NFT發展的重要動力。
《白蛇2：青蛇劫起》上映后，阿里旗下潮玩品牌錦鯉拿趣同步推出了相關NFT付款碼皮膚，上線后，8萬份NFT迅速售罄。借助IP進軍NFT領域的還有騰訊，8月初，騰訊宣布發行300件“十三邀黑膠唱片NFT”，承載平臺為騰訊旗下NFT交易平臺“幻核”App。
近日網易力推的游戲《永劫無間》也搭上了NFT的熱潮。7月12日，由澳洲 NFT 發行商 MetaList Lab?作室發?的《NARAKA HERO》系列盲盒上線幣安NFT市場。該NFT系列盲盒得到了《永劫無間》官方IP授權，上線僅15分鐘便全部售罄。
微博也推出了NFT交易平臺“TopHolder頭號藏家”，于8月初內測上線?！拔⒉㎞FT作品”“拍賣自己的第一條微博”各種話題叢生。目前，頭號藏家已吸引眾多藝術家、收藏家、策展人入駐。
NFT在國內音樂領域也“大放異彩”。胡彥斌、阿朵等歌手相繼推出NFT唱片、專輯，多家音樂版權平臺宣布推出NFT板塊，或與NFT平臺達成合作。NFT藝術品的特性為IP、版權的保護問題提供了解決方案：藝術品上鏈后，通過不容更改、永恒存在的區塊鏈，唯一性得以留存。
除國內大廠推出的NFT平臺外，刺猬公社還注意到了國內的一些小型NFT平臺，“薄盒”即是其中的一個。與阿里、騰訊等大廠一樣，“薄盒”將NFT解釋為一種“數字藏品”，并將自己定義為“數字潮玩收藏平臺”。
“薄盒”平臺可以通過微信登錄，并定期與各領域的數字藝術家及加密藝術創作者合作，藝術家們可以通過平臺上線自己的NFT藝術品，并進行發售。目前平臺還在起步階段，主要的數字藏品以盲盒為主。
8月13日，七夕前夜，“薄盒”平臺上線了國內加密藝術家宋婷的NFT作品“《詩箋 花非花》盲盒”，盲盒中包含99朵AI玫瑰，開啟盲盒將會隨機獲得一朵，并獲取專屬于這朵花的情詩。
盲盒詳情頁里這樣介紹：“我們希望AI玫瑰的購買者可以用這樣的方式，將物理世界中珍貴的情愛，寄托在不可篡改不可復制的區塊鏈上，永恒鐫記?！?
像現實世界里昂貴的“永生花”一樣，花費299元人民幣，你就能獲得一朵“永恒”的數字玫瑰，這朵玫瑰不能交易，只能贈送，“專屬于您的愛”。
8月13日晚，《詩箋 花非花》盲盒上線20分鐘，99份AI玫瑰全部售罄。薄盒的流量并不算高，盲盒受歡迎的原因可能是因為創作者——加密藝術家宋婷。
宋婷25歲，是國內最具代表性的加密藝術家之一，是2020年中國NFT藝術品拍賣記錄保持者，2021年5月20日，她的一幅NFT作品在中國嘉德拍賣行以66.7萬元成交，開了嘉德NFT藝術品拍賣的先河。
加密藝術家宋婷，圖源網絡
NFT藝術為年輕藝術創作者帶來了更多機會，優質、有趣的NFT作品能為他們帶來曝光，整個NFT市場的上揚也讓藝術的變現之路更加便捷，把自己的作品鑄幣掛鏈，就有營收的機會。
B站UP主“Nut4y”的NFT作品
2021年7月，藝術創作者本雅明·艾哈邁德上線了自己的NFT《怪異鯨魚》系列，9小時就全部售罄，最終入賬80ETH。這樣一組各異的像素小鯨魚給艾哈邁德帶來了超過35萬美元的收入，而他今年僅有12歲。
《怪異鯨魚》系列NFT，圖源NFTCN
但目前國內NFT市場仍不成熟。由于我國禁止虛擬貨幣，國內NFT平臺仍只能用法幣進行交易，并且大部分平臺仍舊只能作為一級市場，并不支持玩家之間交易，NFT藝術品的商業化并未完全打開。
盡管生態并不成熟，NFT在文娛行業仍有不小的潛力。
從海外諸多內容公司的嘗試可以看出，NFT對于影視、游戲、動漫等領域IP的版權保護、商業化上都有潛力可以挖掘，還有相當多的可能性。
盡管NFT具有“唯一性”，但一個疑問仍然存在：為什么要收藏NFT?
事實上，成交價6934億美元的《Everydays：The First 5000 Days》是一張所有人可以下載的圖片，任何人都可以將這張價值4.49億元人民幣的圖片存儲在自己的硬盤中，甚至打印后掛在家里。這是很多NFT藝術品的特質，一段視頻、一張圖片、一張動圖，世界上許多人都可以訪問、復制，對其進行傳播。
問題就出在這里：既然我可以隨意的“使用”一個NFT，我為什么還要花高價去買它呢？
NFT的另一個特征正在于此：所有權的確定性。盡管許多人可以傳播復制，但買下NFT的人才是其真正的擁有者。
“如果我有這幅畫，即使這幅畫掛在我的墻上，除非我有相關的真偽證明，否則它就不是真正意義上的屬于我?！钡し甬敶囆g博物館的NFT相關講座中，“藝術領域區塊鏈研究員”艾米·惠特克這樣描述NFT的特征。
NBA球星庫里花費18萬美金購買NFT頭像，圖源微博
藝術品成為NFT后，“鑒別真偽”將不復存在，區塊鏈會將每一次交易、每一個擁有者記錄在冊，任何人都可以清楚的查詢到，一件NFT的主人是誰。在CryptoPunks像素頭像的圈子里，就有著不成文的規定：“將一個不屬于你的CryptoPunk設置為你的頭像是羞恥的?！?
因此，NFT在版權保護方面有其獨特的優勢，通過區塊鏈，不僅藝術品的交易更加快捷便利，鑒定成本也大大減少，讓藝術品交易更加安全。
這不僅能作用于藝術領域，在當下講求“稀缺性、限量性”的消費市場同樣適用，加密球鞋就是最好的例子。
另一方面，NFT也讓藝術具有了更多可能性。NFT出現后，可編程的數字藝術也得到了關注，甚至在藝術品、文化產品的所有權上也有新的探索。
各式NFT，圖源B站UP主“dinlab”
2021年8月，一張CryptoPunk像素頭像拍賣出了1201ETH（約合375萬美元）的高價，拍下這張頭像的，是478個人。
為了對抗NFT巨鯨（經濟實力較強的收藏家），這478人聯合競拍了這張稀有的僵尸頭像，這也代表這件NFT將被478人同時擁有，每個人都可以使用這張頭像。這也為NFT提供了一定的社交屬性：在NFT領域，同好仍舊能夠形成固定的圈層。
478人“團購”的僵尸頭像，圖源巴比特資訊
但在繁榮的NFT市場，陰暗面也仍然存在。
一方面在于交易市場的混亂。較大的交易平臺準入門檻高，對于經濟實力不強的藝術創作者來說負擔過大，最后平臺仍舊“中心化”，變成高端玩家的內部游戲，大公司的下場更是讓更多NFT玩家失去了對“去中心化”市場的信心。
小平臺則缺乏監管與規則，在海外市場里，平臺“托兒”和NFT販子的存在也讓不少藝術創作者受到蒙騙。許多平臺還會遭到黑客攻擊，由于bug漏洞，許多NFT藝術品被竊取，而在缺乏信息認證的平臺，冒名頂替的事件時有發生，保護版權的NFT反而成為他人盈利的工具。
“不穩定性”也讓人焦慮。今天為藝術創作者帶來“第一桶金”的平臺明天就可能“癱瘓”，依靠NFT生活并不現實，正如人為吹起的氣球，一戳就破。
另一方面則是NFT市場的不良生態。
“泡沫”，是很多人對目前NFT市場的質疑。NFT一直擺脫不了令其出圈的“天價”標簽，NFT的普遍高價更是讓無數人投入這一市場，希望在發展的初期能通過“投資”分一杯羹。敦煌飛天NFT付款碼上線后，在咸魚平臺上炒到150萬，最終被緊急下架，這樣的例子在NFT領域并不少見。
兩個敦煌NFT付款碼皮膚在咸魚上被賣到兩萬元
價格虛高、蓄意炒作，在很多專業人士看來，市面上大多數NFT存在“噱頭拉高價格”的現象，“圈內瘋狂營銷，圈外急紅了眼”，整個市場在一種過高的期望下被不斷抬起，呈現出與當初“炒幣”相當類似的場景。
值得注意的是，盡管對于“區塊鏈”“元宇宙”有著非凡意義，在當下NFT的應用場景仍舊非常有限，許多人不能理解NFT的價值所在，非良性的生態并不利于NFT藝術的未來發展。
“NFT收藏家不關心藝術,他們只關心能不能賺錢?！?/span>
夏日炎炎，各種NFT藝術展、加密藝術節雨后春筍般出現，從798到大興，遍布整個北京城。
刺猬公社在一個NFT藝術展上發現，每間展區的墻上都掛著多塊顯示屏，屏幕上加密藝術家們的作品流轉，晦澀但氛圍感十足。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
簡介：模糊輸入是一種用于文本輸入的模式，使用這種模式后，可以讓用戶輸入文本內容時不用關心格式或語法，從而輕松達到預期目標。
例子： Google 搜索輸入框
簡介： 結構化格式是指用戶在輸入時，不僅僅使用純文本輸入，而是使用一組反映數據結構的字段，引導用戶進行輸入。
例子： Apple 雙重驗證碼輸入界面：
簡介：「語句填空」使用一組短語字段將用戶需要錄入的信息，如文本、數字等串聯為一句有指示意義的溝通語句。
例子： Visualeyes Design 網站的用戶信息錄入:
簡介：「輸入說明」是指在空白文本字段的旁邊或下方，放置一個短語或示例，以解釋此處需要輸入的內容或提供關于此內容的詳細要求及信息。
例子： 使用 Ant Design 組件-表單 搭建的創建小程序頁面中的輸入說明：
簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內容，或給出相關線索的一種設計方式。
例子： 在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。
簡介：「密碼強度計」即在輸入新密碼時，立即向用戶反饋密碼的有效性和強度。
例子： 百度網盤的用戶注冊頁面，紅色文字代表不合格，白色文字代表已合格。
簡介：「自動完成」即在輸入內容過程中，向用戶推薦與已輸入內容相關的信息，把輸入行為變為選擇行為。
例子： Ant Design 官網的全局搜索功能，用戶只需要輸入部分內容，下拉列表展示可能的結果，把錄入行為變為更便捷的選擇行為。
簡介：「下拉選擇」即通過使用下拉菜單或彈出式面板，來擴展菜單，使得菜單中可以包含更復雜的選擇功能。
例子： Ant Design 官網的下拉菜單：
簡介： 列表構建器是從較大的數據集中創建較小的數據集的一種模式。列表生成器的「數據源」和「結果」在同一個組件中可見。這允許用戶通過按鈕或拖放在它們之間移動項目。這種模式也常常稱為兩列多選擇器。
例子： Ant Design 的 Transfer 穿梭框 組件就是基于這一模式的設計組件。
簡介：「合理預設」是指系統提供默認選項，這些默認選項不需要用戶做任何操作，可以節省用戶完成表單的時間和精力。
這些默認選項來的數據源包括: 先前輸入的會話數據、來自用戶帳戶的信息、當前位置、當前數據和時間等等。
案例 ：釘釘的“代辦事項”設置功能，可以自動抓取到語句中的時間信息，自動幫助用戶默認填寫時間，減少用戶的操作時長：
簡介： 「錯誤提示」是表單出現輸入錯誤時，為用戶展示的一條引人注目的解釋性消息，該消息可能描述用戶如何修復錯誤。
案例： Ant Design 提供了多種表單錯誤校驗樣式：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
SUS 全稱 System Usability Scale ，系統可用性量表。SUS最初是Brooke于1986年編制，可以科學地量化用戶體驗，用于完成一系列任務場景后，對產品或系統整體宏觀的感知可用性測量。
翻譯過后可以得到下面的中文表，參與者在使用產品后對每個題目下面打鉤來對產品進行5點評分。（小伙伴們可自行保存）
SUS提供整體可用性評估度量，由10個題目組成，奇數項為正面陳述，偶數項為反面陳述。
第4，5，10三項構成的子量表為“有效性”（Effectiveness）&“易學性”（Learnability） ；第2，3，7，8四項構成的子量表為“使用效率”（Use Efficiency）&“可用性”（Usability）；第1，6，9三項構成子量表“滿意度”（Satisfaction）。
SUS適用范圍廣泛，產品新舊版本迭代之間對比，同類型競品之間對比，同一產品不同終端之間對比均可使用。可采用線上線下問卷調研的方式，簡單高效的采集真實用戶反饋。避免在初期過早的關注細節。
當收集好用戶問卷反饋過后，步驟如下：
1. 對于奇數序號的問題，將其得分減1；（比如第1題分數為4，得分為4-1=3分）
2. 對于偶數序號的問題，將其得分被5減去；（比如第2題分數為3，得分為5-3=2分）
3. 將所有問題最后的得分加在一起，然后乘以2.5；（每個題目的得分范圍記為0~4，最大值為40，SUS可用性得分的范圍在0~100，換算后乘以2.5）
4. 計算出的結果即為產品的SUS可用性得分。
Tips 注意事項：
1. 填寫之前不要進行總結或討論；
2. 應當要求用戶快速完成各個題目，不要過多思考；
3. 第二題和第六題對于參與者可能難以理解，需要解釋清楚；
4. 如果用戶因為某些原因無法完成其中某個題目，就視為用戶在該題上選擇了中間值。
SUS分數等級與百分等級的區別：
我將其翻譯過后得到中文表，可以大體上感知得出的SUS分數對應的用戶可接受范圍。
更加細化的SUS用戶感知，可參照SUS分數曲線分級范圍表：
注意到這里SUS分數等級與百分等級的區別。對照SUS分數曲線分級范圍表，如果你的SUS分數為68，說明你的產品比市面上50%的產品可用性要好。也就是說這個產品的用戶體驗算是合格了，表明需要進行較小的改進。50%中值點對應SUS分數68。（（59-41）/ （71-65）= 3 故中值點為65+10/3≈68 ，68分是均值，因此對應百分比是50%。）
1. 量表公開免費，題目簡單，只需參與者打分，實施便捷，操作簡單；
2. 適用范圍廣泛，產品初期測試驗證，競品分析，新舊版本對比等等；
3. 研究證明SUS在樣本量有限時，可以最快達到效果，可信度系數高；
4. 快速宏觀有效區分可用系統（產品）和不可用系統（產品），避免在初期過早的關注細節；
5. 當團隊內產生分歧時，SUS讓更多的人員參與代替少數意見領袖說了算的形式，定量不追求定性。
6. 小樣本量時依然呈現高度的內部一致性，產生真實可靠的反饋結果。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
眾所周知，B端產品中的頁面以列表居多，列表的優勢在于能多維度地呈現/沉淀數據項，且可結合常用操作進行管理。之前我們有對通用型的列表做過設計總結“橫向看信息，縱向做類比”，當需要用“復雜”列表承載業務時，B端產品的視覺設計師可以有怎樣的設計思路，以避免遇到以下場景呢？
Step01
了解產品目標與“復雜”的原因
當接到B端產品中的簡單列表要升級為“復雜”列表的需求時，作為B端視覺設計師首先需要了解背后的原因與目標，便于拓展不同維度的思考以提升產品體驗。通過了解業務目標，明晰對業務流程的影響，以及如何與現有業務模塊的連接；通過了解用戶目標，明確業務參與者中用戶層是否變化等。
Step02
理解業務功能組合及使用場景
將基于產品目標拆解的需求，具象成功能組合后，B端視覺設計師需要結合業務與場景，理解其中的“復雜”點，以及發現設計難點。如：業務的流程變化，對應是否有分支增加/順序調換等，功能又是如何體現的；不同的用戶層，關注重點是什么、對應的數據項是哪些，使用方式是否有變化等。
Step03
思考與設計“復雜”列表的界面表達
結合場景理解業務功能后，B端視覺設計師便可開始思考如何設計“復雜”列表，以表現業務的進化，同時讓用戶能輕松地感知到。
1.先構建列表框架，以體現業務的層級
因為框架的確定，有利于構建整個內容的大關系。而框架構建離不開對列表承載的信息層級進行分析，即對數據行之間的關系分析，其中數據行之間的關系大致可分為三種：并列關系、包含關系、父子關系，如下圖所示。
不同的列表框架，其優勢各不相同：
并列關系的列表 - 適合承載類似數據行的集合，是目前B端系統中最常見的通用型列表；
包含關系的列表 - 適合行的數據行差異性較大的組合，弱對比強呈現，如電商網站中的訂單與商品詳情；
父子關系的列表 - 適合數據行相同且層級有區分的樹狀結構列表，對比、呈現層級關系等的拓展性高。
2.分析數據行，提升可讀性
以某家族列表為例，當框架確定之后，通用型的列表即可轉換為可呈現父子關系的列表。
從管理層（大B）的角度，希望通過層級了解到分布與整體情況；普通管理層（中B/小B），希望通過層級和不同維度的數據項，加深對“人”了解；小B/執行人員，通過便捷的操作增加/刪除/查找/修改內容。因此當一個列表要滿足不同用戶層的目標時，
合理刪除 - 增加不同維度的信息后，確認并刪除含義重復/沒有價值的信息，如：刪除含義重復的子女數量列，增加其他維度更重要的信息。
分層組織 - 不同層級，數據組合可有差異，可從統計數據與詳細數據、列的信息相關性組合等角度入手。如：增加統計的家庭成員數據，對其余列進行相關性分組。
適時隱藏 - 附加功能、增加選擇難度等的功能/隱私信息，在用戶需要時出現。如：聯系方式是較為隱私信息，需要時通過hover查看/編輯。
巧妙轉移 - 結合PC端的交互操作，打破靜態頁面呈現，增加“動態”的空間。如下圖：增加橫向空間寬度，以呈現更多信息。
3.用視覺手法優化各元素間的呈現
期望用視覺手法，帶給不同用戶“感官”層面的積極感受。同時減少視覺噪音帶來的影響，讓用戶清晰地了解關注重點。
其中父子關系的列表注意與斑馬紋的搭配使用，因為易削弱層級關系，斑馬紋更適合通用型的列表。
之前有總結視覺細節的設計方法，這里不再贅述，點擊下方圖片即可查看。
Step04
設計回溯，是否達成目標
設計完成后，帶著最初的產品目標再來看設計，是否有達成目標，在信息呈現方面是否更合理，用戶獲取信息是否更便捷等，退一步更能有全局思維。而對內是否可以沉淀設計資產，優化現有的結構或擴充設計規范。
小結：
B端產品中列表是最普遍存在的，而如何將不斷變化 / 復雜的列表設計得更有用，T型思考法（升級版）探索了其中一種，若有其他思路/場景值得思考，歡迎留言討論～
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們每天都會收到很多應用軟件推送的短信或者push消息，它們總會推送各種消息吸引我們打開APP。鑒于我每天都要手動清除這些通知消息，并且有時候打擾到了我的生活（午休的時候被推送消息吵醒），除了微信和工作軟件外我基本關閉了APP消息通知，下載新的app也會選擇不開啟消息通知。
消息通知能提升用戶活躍度，但是推送過多的消息對用戶來說是一種信息負擔，也打擾了用戶的生活，用戶輕則關閉消息通知，重則卸載應用。每天接觸這么多消息通知，大家有沒有想過他們是怎么推送這些消息的？
不管是to c 產品還是 to B 產品，消息推送是運營必不可少的一部分。to C產品在產品運營環節通過消息推送，能提升用戶活躍率、留存率，提升業務轉化率，to B產品通過消息推送能提高工作效率，及時知曉業務問題（畢竟用戶只會在工作需要的時候使用系統）。
近期我在做crm系統移動端的版本時，銷售反饋系統推送的消息太多，打擾了正常工作，他們覺得很煩，表示都不相干收到這么多消息通知。接到反饋后，我盤點了系統推送的所有消息，發現消息類型多達20幾種，并且集中在周一上午10點推送，導致銷售短時間內會收到十幾條消息。對此，我把盤點出來的消息進行篩選，精簡了通知數量，優化了推送策略，優化后銷售的滿意度和消息觸達率都高了許多。
我們不能把消息推送看做是一個簡單的功能，要有一個系統性的思維，從盤點消息項、制定推送策略、設計消息文案/內容、建立推送任務、選擇推送渠道、篩查有效用戶、消息存儲等各個階段流程，都包含了很多因素需要我們仔細考慮的。
本文將以系統通知消息為例來介紹消息推送功能。
告訴用戶消息來自哪里，誰發送的，讓用戶對消息內容快速建立認知，同時增強用戶信任度，避免認為是垃圾消息；
什么情況下會推送這條消息，如任務到期沒有完成。
什么時候推送給用戶，多久推送一次
消息應該推送給誰，誰會受到消息，可能是系統中的全部成員，也可能是某個部門，或者某個人。
怎么樣可以把消息發送到用戶的設備上，如短信，app通知。
用戶收到這條消息可以干什么，如處理待辦任務。
用戶需要做什么，可以得到什么結果，如收到線索分配通知，需要跟進線索。
推送的消息既不會打擾到用戶，又能達到運營目的，我們需要在合理的時間選擇合適的渠道推送合適的消息給合適的用戶，這句話有點繞但是就是這個意思。
建立推送任務之前，我們要盤點系統中所有的通知消息，列出消息清單。根據上述消息推送描述的幾大要素，以下是我在優化crm系統通知消息列舉的消息項，
以銷售訂單和開票明細兩個業務對象為例：
可以從以下三個角度來盤點消息項：
1、按通知來源：業務消息（線索、商機、回款、訂單、任務等）、系統消息、用戶信息等；
2、按觸發條件：運營消息（回款預警、商機跟進等）、用戶發起、待辦消息、系統反饋等；
3、按通知對象：所有成員、部門、個人
我們要列出所有可能用到的消息項，不怕多，就怕遺漏。盤點完所有的消息后，可以按照上述表格列出消息清單，再根據業務目標、運營需求、用戶需求、對消息去重、精簡消息項，只留下必需推送的消息類型。
列出消息清單后，要明確什么類型的消息應該推送給什么人，即通知消息要匹配正確的通知對象。
系統給用戶推送了消息，用戶對消息內容感興趣，點開了消息查看詳情并進入目標頁面或者處理通知消息，才能實現推送消息的目的。
to c產品需要對用戶信息、用戶行為等構建用戶畫像，用于精準推送或者個性化推送。to b產品的用戶結構相對簡單一些，一般是企業人員（員工、部門負責人、管理層等），根據業務使用場景
對用戶劃分角色，再以角色為基礎匹配功能權限，進行權限控制，如銷售、研發、財務、運營等對應不同的業務場景，推送消息側重點也不同。
確定好了通知對象，我們需要思考以下問題：
1、什么時候推送消息既不會打擾到用戶，又能引起用戶的注意？
2、是主動推送還是由用戶觸發后被動推送？
3、多久推送一次合適，推送是一次性的還是持久性的？
4、這個消息推送觸發后要立即處理嗎？
3、用戶怎么樣能收到消息？收到消息后要做什么？
以下這個金字塔圖可以解決上述的問題：
消息清單上的消息項，我們不能一股腦全部推送，要根據信息的提醒強度平衡通知量、推送時間、推送頻率，避免對用戶造成干擾而影響推送效果。
消息類型：對于需要用戶立即處理，或者用戶確認才能繼續進行的操作，如預警、異常、錯誤、驗證碼、重要消息等，讓用戶及時發現并采取措施。以飛書為例，飛書上要是有人給你發了緊急消息，會以短信的形式提醒你。
推送渠道：電話、短信，但是一般不會用電話，一是成本高，二是對于用戶來說是強打擾，而且陌生電話用戶一般不太會理。
消息類型：無需用戶立即處理，但是需要引起用戶注意的操作，如運營消息、待辦提醒、審批通知、系統公告等。對用戶會產生一定的干擾性，此時要給用戶一定的控制權，可以通過設置通知方式或者關閉通知提醒，減少消息打擾。
推送渠道：系統推送、應用內提醒，郵件。
消息類型：無需用戶立即處理，僅提醒用戶有新的狀態，或者對用戶操作后的反饋，如應用更新提醒、狀態變更通知、操作成功提示等，對用戶幾乎不產生干擾。
推送渠道：一般只在應用內提醒或者系統內提醒。
提醒強度越強，通知數量越少，呈金字塔形狀，強提醒通知數量要比弱提醒少很多。通知消息數量較多時，要權衡推送數量，推要克制，對于推送頻率比較高且用戶不需及時處理的消息，可以通過合并通知的方式減少消息推送的數量，減少對用戶的打擾。
根據提醒強度選擇推送渠道，多渠道組合協同推送，能夠提高推送效率，但要保證多渠道消息內容一致。一般來說to b產品通知消息是以系統內提醒和辦公協作應用（第三方工具，如飛書、企業微信等）內提醒的形式通知用戶。
對于系統內的通知消息，不同強度的提醒消息會對應不同的消息通知組件。
強提醒的內容對用戶來說是高關注度的，要求及時、主動的把消息推送到用戶面前，用戶要立即采取措施，對用戶當前操作具有強干預性。
中提醒的內容對用戶來說是中關注度的，要在合適的時間推送，可以是系統主動推送也可以用戶發起的，用戶可以延后處理，對用戶當前操作的干預性為中等。
弱提醒的內容對用戶來說是低關注的，可以是用戶操作后的及時反饋，短暫的出現后就消失，或者可以延后處理的消息，對用戶當前的操作幾乎無干擾。
用戶正在使用crm系統辦公，同時飛書也在線，我們該如何推送消息？
用戶可能已經在系統內查看了消息，再把消息推送到飛書上對用戶來說就是重復提醒了。如果飛書上已經讀了消息，那么系統內該條消息就要標記為已讀。
用戶收到推送消息后，要能快速抓到重點內容，知道這條消息表達了什么，是否需要進行處理。
一般我寫消息內容時是會遵循3w1h原則：what（發生了什么），why（什么原因），when（消息觸發時間）、how（我該怎么做），再根據實際情況進行適當調整。在設計消息文案時要考慮用戶的預期，不要標題和消息內容不一致，或者消息內容和詳情頁不一致，可以通過推送點擊率輔助判斷推送是否達到預期效果。
上述原則并不是固定死的，需要根據實際推送目的進行調整，如運營信息可以通過標題、摘要或圖片吸引用戶，可以直接附帶鏈接跳轉到詳細信息。
設計消息文案/內容的要點：
1、消息文案要簡明易懂；
2、重要的信息要放在前面；
3、不同推送渠道的消息內容要保持一致；
4、通過短信或者郵件推送的消息要說明信息來源平臺，避免用戶認為是垃圾信息，如【騰訊】【網易】等。
消息推送給用戶后，用戶看完不一定會立即處理，延后處理的時要能夠找到相應的消息，此時需要消息中心呈現所有的push消息。
消息中心受產品定位、系統框架等因素影響呈現形式會有所不同。消息中心的入口主要有頂部圖標（懸浮通知）、左側tab等形式。
1、頂部圖標：適用于消息數量較少，或者消息不是產品核心業務場景的情況。一般會在頂部導航右邊，或者左側導航下方，以 badge 的形式在圖標上提示新消息的數量；
2、左側 tab：適用于消息以用戶間通訊為核心場景的情況?？筛鶕㈩愋瓦M行分類，以 badge 的形式提示未讀消息或未處理消息的數量。
消息列表按時間維度排序，可以對信息進行分類展示，如全部，未讀、稍后處理的tab分類形式展示，消息類型比較多的情況下通過選擇消息類型快速找到相應消息。
消息推送并不是簡單的把需要提醒用戶注意的事項全部推送出去，合理的推送策略才能到達推送目的。
消息推送前的思考：
1、應該推送什么消息，推送給誰？
2、什么時間適合推送，為什么要推送這條消息？
3、怎么推送？
4、推送的這條消息是否能引起用戶興趣？
4、用戶查閱了這條消息知道要干什么嗎？
思考完以上問題基本上能確定一份消息清單 ，要保證推送效果還要注意以下推送的要點：
1、權衡消息推送數量，只推送必需的消息；
2、選擇合適的推送時間、推送頻率，避免對用戶產生打擾；
3、消息文案簡明易懂；
4、多渠道推送保持消息文案一致，不要重復推送；
5、需要用戶采取措施的消息提醒，在用戶解決問題之前，要持續提醒；
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
對于設計師來說，在日常的互聯網設計工作中面對的主要是兩類產品設計類型，一類是C端(Consumer)指的是消費者、個人用戶；顧名思義就是面向個人用戶提供服務的產品，是直接服務于用戶的。另一類是B端（Business）指的是企業或商家；顧名思義就是面向商家、企業級、業務部門提供的服務產品，是間接服務于用戶的。現在互聯網進入下半場，C端產品逐漸靠近天花板，紅利逐漸消退，大部分的企業開始轉向B端。
對于設計師來說我們也要對自己有一個清晰的定位和轉換，如何才能在業務的轉換下，跟上企業的步伐，做好角色的轉變和切入。
當然，從C端快速切換到B端設計或者從B端快速切換到C端都不是一件容易的事情，因為B端和C端存在比較大的一些差異。其商業屬性，目標用戶，使用場景，設計表達，產品訴求，用戶體驗，設備載體等都是不同的。B端現對于C端的業務而言更為復雜，那么這次就聊一聊B端設計師從哪些方面發掘自身設計價值，更好的為產品服務，提升產品價值。
在我們開始接觸B端產品時，先要對B端產品有一個基本的概念，什么是B端產品？
常見的有OA系統，ERP，CRM，SAAS等（這里就不一一贅述，大家可以自行百度查看一下基本概念）
B端產品是幫助企業或者部門協同辦公，解決一條業務鏈問題，將線下操作通過系統化，流程化轉移到線上，提高辦公效率，節約成本，高效完成任務從而提高企業的效率，減低內部不必要的消耗。
B端產品行業與行業之間的跨越度很大，因為不同的業務屬性所要的產品訴求是不同的。但我們作為一個設計師，可能會遇到各種復雜的業務場景，復雜枯燥的行業術語也可能都不精通，就算學習了也不一定能非常懂，而且行業屬性較重，我們大概率不是用戶，業務場景還原成本高，甚至沒有條件還原。所以在做設計的時候還是會懵。往往我們需要深入用戶調研，盡可能地接近真實業務場景，與用戶共同創造，基于業務底層邏輯提煉出強整合性、高兼容性、高拓展性的系統規范。B端的產品設計也是一個不小的挑戰，那我們如何打破這個挑戰更快速的接觸，適應B端設計呢？
B 端產品相對而言，場景、功能、業務流程、信息架構要比 C 端更復雜，面對的異常情況也比較多，所以 B 端在設計風格上盡量做到簡潔。B 端產品實用性大于美觀性，在每一個功能的設計都需要你去思考很多方面：用戶易用、信息層級、未來擴展，你都要做出取舍，而對于每個模塊都需要你思考、結合用戶場景。
面對B端產品我們應該如何分析和處理呢？
B 端的業務邏輯復雜，子業務多樣化，產品的規則，流程，訴求可能隨時就會調整，設計師應當基于B端的產品業務特性，市場與用戶的需求，在看似雜亂無章的業務中尋找共性，梳理模塊進行合理的整理和設計。
在做B端業務前，我們要對我們即將要處理的業務有一個基本的理解和認知，不同的部門員工因為職業屬性，使用產品的訴求也是不同的，所以相對應的設計方案流程也是不同的，這就需要我們充分理解業務流程，有針對性的梳理。
例如：我們要做一個考勤系統，我們需要清楚公司的考勤制度，事假/病假/年假/調休等如何處理，如何提交，如何審批，月底匯算，季度匯算等問題，前期了解的流程越多越清晰，就可以幫助我們規避很多不必要的問題。
要將功能流程歸類梳理整合，把雜亂的功能整理清楚，提高用戶效能。
用戶的時間就是金錢，這對于 B 端商家角色中尤為重要，大量訂單的處理、表格化的導入和導出、批量管理和網站運營等方面，對于效率有著極高的要求，商家通過可視化界面來完成某項任務。
在這其中，影響最大的莫過于交互方式了，相信各位一定用過各大銀行的網站，頁面的導航關聯性弱、結構不合理、提示不明確、交互流程過長，甚至有的網站光是登錄，就得大費周章。
如何提高效率，我認為主要從以下幾個方面著手：
如果你的產品，讓人看一眼就能上手，那么說明是非常友好的設計。易用性不一定意味著簡單和低智，依據復雜守恒定理（泰勒斯定理），每個應用程序都有自己內在的、無法簡化的復雜度。
所以，提高易用性意味著要設計合理的交互，易用性分為對新手（小白用戶）友好和對老用戶（專家用戶）友好，包括數量最大的中間用戶。
如果你的界面是僅僅對于新手友好，那么可能完成的任務都是簡單而輕松的。但是對于老用戶，他需要更復雜的功能來處理大量龐雜的任務；因此在設計的時候，既要提供傻瓜式的操作方式，也要對專家用戶提供提高效率的工具。
此處的智能化既包括通過大數據或者人工智能自動將操作步驟變得簡潔高效，也包括諸如一些字段輸入、自動定位、圖片識別、OCR 等方式來使用戶的效率得以提升的功能。
以前的用戶要摳圖可能會在 ps 中操作好幾個步驟才能完成，但是隨著機器學習技術的發展，ps 已經可以更加智能的摳圖。當然，還包括其他功能的智能化。
在 B 端 SaaS 領域，智能化也是一個重要的趨勢，針對不同的商家所面臨的不同的行業領域，我們或許可以提供更加全面且友好的服務。
提高系統內的一致性，減少用戶認知成本。在同一平臺內的頁面，樣式和交互上要盡量保持一致性，不要有的地方是總金額，有的地方是總價格，這會讓用戶犯迷糊。提高通用性，也意味著你需要關注并熟悉系統內不同功能之間的關聯性，盡量做到統一處理。
B端產品多在工作中需要長時間沉浸式使用，為幫助用戶集中注意力、高效完成任務，設計風格多為冷靜、克制、干凈、簡潔，相較于視覺，更多的是注重如何讓用戶理解產品邏輯。如何通過設計的處理更好的提升產品的效率，留住用戶，讓用戶有更流程的產品體驗。
在我們進入一個產品內容比較多的網站下，如何才可以讓用戶快速在網站中匹配到自己需求，解決自己的問題呢？最快速，便捷的處理方式就是搜索框輸入關鍵字，通過用戶的關鍵詞在系統中為用戶提供最匹配，最合適的內容，縮短用戶尋找產品的時間，提升用戶的使用效率，讓用戶有更流暢的體驗。
設計要點：
提高搜索框在網站中的曝光率
提升模糊搜索的正確率
盡量不要出現搜索結果為空
文案提醒要簡練，讓用戶掃一眼就知道要表達什么意思，不要讓用戶停下時間去思考，琢磨文字提示的信息，減少干擾信息，比如在處理input時加入默認提示，讓表單更清晰，表意更明確；有字數限制時，要明確可輸入字數和已輸入字數，這樣讓用戶有一個預期，不會出現輸著輸著沒法輸入新的內容。
設計要點：
文字簡短，清晰，通俗易懂
文案風格統一
用戶使用產品時，用戶與產品之間形成一種“溝通”，良好的反饋機制能夠大大提升這種“溝通”體驗。用戶的每一步操作都應當得到相應的反饋，尤其是在錯誤時要及時糾正，以便用戶更準確的操作下一步。但是這種操作不應該只是錯誤色彩提示。比如當我們在輸入表單時，輸入錯誤系統并沒有給我們任何提示，只是將輸入框變為錯誤操作的顏色，這樣會讓用戶無法流暢完成操作內容。
設計要點：
及時糾正用戶錯誤，減少用戶焦慮
將用戶的錯誤操作清晰明了的表述出來
空狀態作用和文章中“承上啟下”的文字作用是一樣的，空頁面可以幫助我們理解上下文，讓用戶知道即將要發生什么，才會覺得舒服。最好的方式就是“展示和引導”：通過清晰的文字告知用戶發生了什么，并且通過按鈕/快速鏈接有效的引導用戶行為，避免用戶陷入死胡同，不知如何操作下一步。
設計要點：
空界面可以增加一些趣味性，個性化或者打造品牌感（IP形象/品牌logo衍生）
空界面狀態保持簡潔，直觀易懂
引導用戶操作
當icon被用于設計時，最好使用用戶熟悉和容易識別的icon，以使用戶能夠迅速地了解其用途。如果icon無法傳達正確的意思，就會變成視覺噪音，讓使用者迷惑，成為使用者的認知障礙。
設計要點：
icon要易識別，正確傳達表示含義
同一層級的icon，要統一標準，設計一致
B端的設計往往會有很多種情況，我們在做名稱/數據的設計時盡量模擬真實的上線數據，如果涉及敏感數據可以自己改一下，但是盡量要采用字段長度，這樣可以在設計中無限接近上線后的產品，減少后期因為數據展示出現的UI調整。
設計要點：
在設計階段無限接近真實上線環境
將上線后可能出現的展示樣式都要制作出來，避免后期的返工
確定功能操作的優先級，將一些用戶關心的數據統計/報表展示一級頁面，使用頻率高的功能優先靠前展現出來，輕量級操作的信息入口盡量收起，不要展示給用戶，以免造成不必要的困擾，增加用戶學習成本。
設計要點：
確定功能優先級
高頻次入口優先展示，低頻次折疊隱藏
B端產品邏輯嚴密和專業性較高，用戶在使用時經常不可避免的操作失誤，尤其是涉及到刪除數據或者金額方面的操作，我們需要格外的謹慎處理。在用戶犯錯時，我們要及時的提示用戶，這樣的操作會帶來什么樣的后果，提示的文案要注意語氣，不要將責任全部推在用戶身上，禮貌對待用戶。
設計要點：
要及時反饋用戶后果，避免因為不當操作造成傷害
頁面刪除盡量給二次確定，避免用戶誤點，做個人保護
盡量有垃圾箱回收，方便用戶后悔
避免加載中用戶等待焦慮，我們可以使用分布式的加載方式預先加載頁面框架然后加載內容，在內容未出現前通過占位符的方式展示，優先加載占用網絡資源較少的元素，減少用戶的等待心理，占位符的方式可以讓用戶提前了解到頁面整體的展示樣式效果，給用戶加載好的錯覺。
在加載過程中我們可以通過這幾個視覺表達方式來加載，通過顯示品牌元素加載；色塊加載；界面布局；灰色圖顯示等。
設計要點：
避免空白頁加載等待，增加用戶焦慮
選擇最符合產品調性的加載
我們要做到減輕界面視覺呈現，但這并不是意味著減少頁面功能。我們要幫助用戶簡化認知負擔，增加界面可讀性，降低用戶閱讀瀏覽復雜的大塊內容時的心理壓力和抵觸感。將一些復雜的表單內容通過數據可視化的方式讓用戶更快，更便捷的查看數據，從而對業務有更直觀的理解。
設計要點：
數據可視化是一個不錯的選擇
避免不必要的元素信息
保證可讀性
一個優秀的進度條可以讓用戶減少很多的焦慮，并且讓過程和結果步驟清晰可見，進度條的目的在于通過向用戶反饋當前響應進度來讓用戶在等待中放松下來，在用戶等待程序處理事情時，不應該把用戶仍在一旁傻傻的猜想程序什么時候結束，這個步驟還有多長時間。正是這樣的情景下，進度條剛好可以構建用戶與系統之間溝通的橋梁。面對長時間的幾十秒的操作的進度條不應該只是一個進度模糊顯示，更好的處理是應該加入進步完成的百分比，清晰明了告訴用戶系統完成了多少工作量還剩多少。
設計要點：
進度條可以打消用戶對程序等待響應的疑惑
針對響應時間稍長的進度加入顯示百分比
開發完成后設計師要開始設計走查，因為開發不可能百分之一百的還原設計圖，所以最后的設計把控是非常重要的，即使是開發按照設計圖還原界面但是可能代碼實現后還是有些問題，或者是不同尺寸的屏幕適配，或者是加入真實數據后一些展示問題，又或者是頁面的跳轉/返回以及一些彈窗提示等都需要最后的走查確定；不僅僅是視覺頁面驗收，交互方面還要考慮去驗證思考最符合用戶操作體驗的流程。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近業務里面有個需求就是開發一個類似微信的聊天頁面的H5，不需要像微信那么復雜，但是得有個樣子，弄了半天之后終于有了個樣子。決定寫個博客記一下這個過程，希望后續不會鴿
打字的，聊天item，聊天list。大概就這樣了
其中聊天list 用了一個better-scroll這個第三方插件。
首先第一步就是開發這個聊天item
分析一下需求，別人發過來的和我們發過去的是兩個排版和樣式，但是不用單獨寫兩個，用個邏輯區分一下就可以了，也可以動態綁定css什么的差別很小。
<template> <div class="record-wrapper"> <!-- 時間，后續開發 --> <div class="time"></div> <!-- 消息， msg通用樣式 msg-right/msg-left 區分排版左右 --> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <!-- 消息框， msg通用樣式 message-wrapper-right/left 區分聊天框顏色 --> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> </div> </template> 這個是只有1邊的，邏輯就是在消息那邊加個v-if，判斷來源，也可以動態綁定css
弄好以后就這樣
<template> <div class="record-wrapper"> <div class="time"></div> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> <div v-else class="msg msg-left"> <div class="img-wrapper"> <img class="img" :src="from2" /> </div> <div class="message-wrapper message-wrapper-left"> <div class="message">{{ message }}</div> </div> </div> </div> </template> <script> export default {
name: "",
props: {
from: Number, // 1: 自己 2: 別人
message: String,
timestamp: Date,
},
data() {
return {
from1: require("../../../assets/imgs/from1.jpg"),
from2: require("../../../assets/imgs/from2.jpg"),
};
},
}; </script> 個人覺得css還是比較重要的，這里用了sass來寫。主要解決方案就是用一個display:flex配合上flex-direction: row-reverse讓頭像和消息左右排列
<style lang="scss" scoped> .record-wrapper { margin: 4px; padding: 4px; } .time { text-align: center; } .msg { display: flex; flex-direction: row; .message-wrapper { max-width: 220px; margin: 0px 10px 0px 10px; .message { margin: 8px; word-wrap: break-word; //英文換行 } } .message-wrapper-left { background-color: lightslategray; border-radius: 0px 12px 12px 12px; } .message-wrapper-right { background-color: powderblue; border-radius: 12px 0px 12px 12px; } .img { flex: auto; height: 36px; width: 36px; border-radius: 8px; } } .msg-right { flex-direction: row-reverse; } .msg-left { flex-direction: row; } </style>
這個是沒有調樣式的，只是為了自己嗨弄的，可能會很丑。
最后大概就是這樣的
其實我覺得很簡單，難點就2個。首先是滑動，這里用了better-scroll這個組件，可以在網上搜，挺好用的。另一個就是頁面布局的問題，寫點css還是沒得問題的。
首先去better-scroll的官網，按著他的核心邏輯抄一下。不詳細談了，總之來說，會有三層嵌套。我個人命名他們為: wrapper 和content和 item 這三層。
先弄一個json，當做會被填充的數據。
export const chatItems = [ { type:1, message:"fdaf地方撒風大撒風阿斯頓飛fd阿斯頓飛安德森發大水發大水發大水奮斗發的大撒風安德森 發大發大水發", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒風大撒aa風阿斯頓飛ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奮斗發的大撒風安德森 發大發大水發", from:1, timestamp: new Date() }, { type:1, message:"做緊d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"？？？", from:2, timestamp: new Date() }, ] 然后開始寫vue的代碼
<template> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <chat-item v-for="item in chatItems" :key="item.message" :type="item.type" :message="item.message" :timestamp="item.timestamp" :from="item.from" ></chat-item> </div> </div> </template> <script> import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel"
import ChatItem from "./ChatItem";
import { chatItems } from "../../../assets/data/items";
BScroll.use(MouseWheel)
export default {
name: "",
data() {
return {
chatItems,
bs: null
};
},
components: {
"chat-item": ChatItem,
},
mounted() {
this.init();
},
beforeDestroy() {
this.bs.destroy();
},
methods: {
// better-scroll的代碼
init() {
this.bs = new BScroll(this.$refs.scroll, {
scrollY: true, // 上下滾動
click: true, // 開啟點擊事件
startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
mouseWheel: true, // 鼠標滾動
probeType: 2, // listening scroll hook
});
// 下面的不要也行，官網抄的順便留下來了
this.bs.on("scroll", ({ y }) => {
console.log("scrolling:" + y);
});
this.bs.on("scrollEnd", () => {
console.log("scrollingEnd");
});
},
clickHandler(item) {
alert(item);
},
},
}; </script> <style lang="scss" scoped> .scroll-wrapper {
height: calc(100% - 160px); // 留一些空間給 打字的地方 和 header
overflow: hidden; // 非常之關鍵
} </style>
最后是這個樣子的了
文章來源：簡書。作者：Good_Nine9
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn