越來越多的產品引入會員系統，如何做好一個會員系統，是當下設計師需要解答的一個命題。
會員的本質是建立用戶分層，便于形成用戶的差異化營銷，通過這種差異化的營銷達到以下四種目的：
提高用戶留存率（增加用戶粘性）；
提升用戶價值；
得到會費收益；
建立流量橋梁；
目的：篩選出高價值用戶（高留存+消費力強），精細化運營
手段：收會員費，建立用戶層之間的壁壘
結果：用戶自發分層，愿意掏錢的那批人成為會員用戶
原則：給會員用戶提供卓越的服務，給普通用戶提供好用的服務（反例：某網盤限速機制，約等于強賣會員，嚴重傷害普通用戶的使用體驗）
價格優勢：會員專享低價（電商產品有會員專享價、外賣產品有會員紅包）
資源優勢：增值內容（影視、音樂版權）
體驗優勢：更好的服務（更快響應、專屬客服、無廣告等）
心理優勢：身份認同（尊貴感標識，與普通用戶形成差異。對社交、游戲尤其關鍵）
短期價值：通過收取會員費，提高營收
長期價值：增加用戶粘性、鞏固并提升市場占比
體驗角度：更好的服務、專屬福利
心理層面：身份認同、沉沒成本（已經花了會員費，越多使用越合算，不然就虧了）
UI界面設計環節，一般的會員體系會涉及到的界面、視覺元素有：
會員觸點/前置曝光
會員中心
會員身份等級
所有將用戶引導至會員中心頁面的入口都可以算作會員觸點，觸點越多，用戶被引入會員中心的可能性越大。但觸點也不是越多越好，過多觸點會引起用戶反感，將觸點置于合適位置，能更自然高效地提高轉化率。
2.1.1 個人中心：露出會員板塊，通常是視覺強調中心。
個人中心是曝光率較高的頁面，其中整合了許多重要和必要功能入口。利用個人中心頁面，可以很好增加會員信息的曝光。該方式也是最常見且最通用的觸點形式，不局限于產品類型。
2.1.2 內容卡點：體驗完免費部分之后，會員內容收費，觸點卡于兩者之間。
增加用戶沉沒成本：用戶已經在早期投入大量時間和精力閱讀免費內容；
利用用戶好奇心：有前文做鋪墊，用戶行至卡點處，對剩余內容的好奇遠超過一般內容；
需求明確（制造問題）：用戶開會員就是為了解決剩余內容無法觀看這一具體問題，用戶總是傾向于解決問題而不是在原有基礎上提高要求。
2.1.3 會員專區：建立專享感，將會員內容與普通內容進行區隔。
將付費內容集中在一個區塊內，制造差異化，不論是內容質量或者商品價位，本質都是讓用戶形成會員價值很高的感覺。
2.1.4 會員頻道
常見于電商產品，同樣是起到區分內容，建立壁壘的作用。
2.1.5 底部提示
使用較為輕量的底部提示，引導用戶關注會員信息。該視覺樣式還常被用作登錄提醒。
2.1.6 小banner
見縫插針式的視覺提示，占用流量最大的首頁空間，此時文案的利益刺激尤其重要。
2.1.7 會員專頁
使用一個底部tab的權重來承載會員相關信息，可見會員體系的重要性。
會員中心是展示會員權益，以吸引用戶開通會員的頁面。是用戶全面了解會員相關信息的窗口，氛圍營造、權益展示、行動點突出，是設計會員中心需要考慮的要點。
2.2.1 會員中心的常見頁面結構
不同產品有不同的會員中心布局，有差異性也有共性。
氛圍感、套餐選擇（多套餐情況）、行動點、會員權益，是多數會員中心頁面共有的模塊，模塊之間位置并不固定。
本質上越重要的模塊，應該被分配越醒目的視覺表達方式。通過調整位置、面積、視覺對比度等，都可以調整不同模塊之間的權重，達到產品想要呈現的優先級效果。
2.2.2 會員中心_氛圍感
打造氛圍感的方式多樣，常見的有以下幾種方式：
2.2.3 會員中心_套餐選擇
部分產品不存在套餐選擇，只有一種套餐，如盒馬。在用戶體系中，將用戶分為兩層，用戶會員與非用戶會員。部分產品在會員中又進一步分類，推出了多種會員套餐。
常見套餐以時間區分，如包月會員、季度會員、包年會員、連續包年會員等。除此之外，也有以權限范圍為區分，如百度網盤的會員VIP和超級會員SVIP，超級會員享受更多特權。還有垂類會員，如視頻產品中單獨開辟出體育分類，對應設立專門的體育VIP卡。
上方案例中的套餐選擇均以卡片的樣式展示，除了該種方式，還有可以以列表形式展示。
列表形式的好處在于，套餐在垂直方向鋪開，延展性強，當套餐數量改變時，不會影響展示效率，而卡片式的展示形式會造成部分套餐被擠出屏幕，用戶需要左右滑動才能瀏覽全部，交互成本略高。同時，卡片式套餐需要點擊選中套餐，再點擊行動點，才能觸發支付，而列表式模型，直接點擊對應套餐項上的按鈕即可呼出支付，交互更加簡潔。
多套餐模型下，產品往往會重點突出一到兩項套餐，從商業層面講，通常希望用戶選擇價格更高的套餐，從體驗層面講，將附加值最高的套餐用角標突出，輔助用戶決策。
2.2.4 會員中心_行動點
行動點是一個頁面中最醒目的元素，往往是由按鈕充當。按鈕的點擊數據也可以直接反映頁面的設計是否合理。對于會員中心頁面來說，提升關鍵性按鈕點擊，往往是改版的目標和方向。
最常見的行動點布局方式有4種：
購買按鈕常駐于底部工具欄
購買按鈕緊鄰套餐選擇模塊，位于頁面中部
頁面同時有多個購買按鈕
界面始終存在一個購買按鈕
符合一般操作習慣，關鍵行動點常駐于頁面底部，已經被普遍接受。
購買按鈕緊鄰套餐選擇模塊，從操作的角度上來說，更加合理，套餐選擇完畢之后，購買按鈕含義類似“確定”，兩個步驟緊密相關，符合格式塔的遠近親疏原則。同時，頁面中心相比于頁面底部更加容易視覺聚焦，用戶能更加容易注意到。這也解釋了，為什么居中的對話框常用于警示，需要引起用戶高度關注，而底部半彈窗往往承載不那么關鍵的內容，一般承載無破壞性的操作。
購買按鈕意味著支付入口，頭部卡片上增加支付入口，不妨通過數據觀察，測試不同位置的點擊效果如何。
隨著頁面上劃，界面中第一個行動點（頁面中部）被推出視圖，此時底部工具欄浮出，保證頁面不管在何位置，始終可見至少一個行動點，讓用戶隨時可以進行支付。
2.2.5 會員中心_權益
會員權益是決定用戶是否購買會員的重要因素。有些權益相當實在，如會員折扣、專屬紅包等，而有些權益的誘惑力相對較弱，不同的權益強度決定了不同的視覺呈現方式。
會員權益細節介紹
會員權益從交互上，可分為兩類，可點擊和不可點擊。不可點擊的權益往往在會員中心頁面是以宮格圖標的形式呈現。而可點擊的權益，往往內容詳實，需要更多的空間來解釋和說明權益的具體內容。
從視覺形式上，也可以分為兩類：
彈窗呈現
子頁面呈現
除了購買會員之外，部分產品引入了“身份等級”的概念來將用戶進行分層。劃分的維度可以是用戶的活躍度、裂變能力等，可以依此，設計一系列的會員任務。會員身份等級機制利用了用戶的攀比、自我實現等心理，進一步增加用戶與產品之間的粘性。
會員身份等級一般集中在4-7個之間，其中梯度理論上呈遞增趨勢。作為設計師，需要將低等級到高等級這種“越來越高端”的氛圍烘托出來。不同類型的產品有自己的特色和局限，金融類產品在整體視覺屬性上趨于穩定內斂，而娛樂性強的產品則在視覺上限制較少。
隨著梯度的增加，設計難度也在增加，如何在不同等級之間拉開合適的視覺感知差距，是一個難點。如上圖中的“黑金會員”和“黑金PLUS會員”在視覺上比較雷同，差異較小。當靜態視覺發揮空間有限時，可以考慮加入動態元素，增加區分。
徽章系統
與會員等級的本質一樣，徽章系統將用戶分層，制造不同的用戶群，擁有更多、更高級徽章的用戶對于產品來說，自然是價值更高的用戶，這類用戶是產品需要重點關注的對象。他們是產品的深度體驗者，他們的意見反饋相比于普通用戶更加準確和反映問題。
隨著產品本身的日漸成熟，越來越多的產品選擇加入會員體系。會員體系無論對產品的短期或者長期利益都至關重要，從短期來講，直接增加營收，從長期規劃來講，對于增加用戶粘性、提高市場份額也有著重要意義。作為設計師，如何把用戶對于會員期待的“價值感”、“尊享感”用體驗的形式呈現出來，至關重要。
會員體系涉及到的相關設計細節很多，小到一個會員標簽，大到一級頁面，其中的設計細節更是不勝枚舉。將龐大的概念不斷拆解為一個個細小的可控的模塊，加以分析和總結，始終是沉淀設計經驗的方法之一。高大上的觀念理論，需要一個個見微知著的細節支撐。
文章來源：站酷 作者：doo_W
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計尺寸一直都是設計師最熱衷討論的問題，討論到最后結論總是一個死板的尺寸，很少有人去講也真正明白背后的邏輯。今天的設計雜談就帶大家來了解一下，設計尺寸背后的邏輯以及設計尺寸如何去定義。希望之后在大家的交流中不要再去糾結我的設計尺寸究竟應該是多少？還是那句老話，耐心看完，你一定有所收獲～
我先說結論，常見 B 端設計稿尺寸建議采用 1440×820，因為去除瀏覽器頂部頁簽以及地址欄高度 80px，因此高度上為 820px 而不是大家常見的 900px
相信很多 B 端產品設計師都是從 C 端產品中轉型而來。想要搞懂設計尺寸的基本邏輯，我們先搞清楚大家熟悉 C 端產品的情況。在移動端設計尺寸上的定義，我們只需要考慮 iOS 設備與安卓設備之間分辨率的區別。而在目前，大多數移動端設計稿都是采取 iPhone 12 尺寸即：375 x 812 的分辨率
（這里就不討論什么物理分辨率以及設計分辨率等內容）
因為移動端也會存在多個分辨率的情況，我們針對其他不同的尺寸，通常采取簡單頁面一稿適配多端，只針對核心頁面進行多分辨率的適配。上面我們算是理解了作為移動端的分辨率的基本情況。而設計稿的尺寸是從何而來？大家想想，為什么我們在移動端設計稿的尺寸會從以前的 iPhone 8（375×667）轉移到 iPhone 12（375×812）呢？
我個人認為會有以下幾點：
1. 主流性
由于 iPhone 12 類的手機尺寸占比逐年增高，早期的 iPhone 8 的分辨率已經不再合適現如今手機的屏幕尺寸。因此決定分辨率尺寸的第一個因素便是這個分辨率的市場占有率。由于手機全面屏時代的到來大多數手機的屏幕比例都演化成類 16:9 的尺寸，因此參照 iOS 的生態下，我們的設計稿就會有如此的轉變
2. 兼容性
作為移動端最為基準的設計尺寸，它一定要具備兼容性才能成為基準的尺寸。兼容性即能夠通過該尺寸進行向上、向下的拓展，方便在一些主要頁面中多尺寸的設計，比如：iPhone X 的尺寸，可以進行拓展成為 iPhone 8、iPhone 12 Pro Max 以及各類安卓端產品。減少設計稿因分辨率所帶來的差異性
搞清楚了移動端的邏輯，我們再去思考一下桌面 WEB 端的情況呢？
因為 B 端產品的特殊性，在互聯網中的分辨率數據只能作為一個輔助的參考（比如百度瀏覽研究院的數據），更多對于尺寸的定義還是來自你用戶使用的設備。比如我們在一個針對銷售的 CRM 系統中，銷售使用的場景有兩種：
首先通過用戶訪談了解到大多數銷售都是采取移動辦公的形式，因為銷售需要對不同的企業進行登門拜訪，拜訪完成會跟進一些銷售記錄。因此對于電腦分辨率會相對較小。對其分辨率的數據埋點得知，分辨率以：1440×900、1366×768 兩種為主。第二種場景下，用戶以 1920×1080 分辨率為主，主要是市面上的辦公顯示器多為 24 寸即 1920×1080然后想要去尋找作為設計稿的尺寸也與移動端一樣，需要滿足：主流性、兼容性兩種不同特性的需求。因此在我的設計稿中，會采用 1440×900 的尺寸，因為它更容易兼容且更為主流
OK，我再舉一個反例，在我之前做過的一個線下診所系統中，通過走訪我們了解到，幾乎所有的醫生都是配備的 24 寸顯示器，分辨率也都為 1920×1080。
因此在尺寸的選擇上就沒有必要去一味的選擇 1440 這一尺寸。
首先顯示器的分辨率并不能代表我們的實際設計尺寸，就像在 iPhone 的設計稿中，會有 StatusBar 的存在，會預留上半部分空間
因為目前，大多數 B 端產品都是通過瀏覽器的方式進行呈現，大家也都知道電腦的瀏覽器中（Chrome 瀏覽器為主），還會存在頁簽高度以及當前網址、書簽欄（書簽欄大多數是隱藏的，因此不算進內），而想要真實了解設備中一屏的高度，就還需要對上面的分辨率尺寸進行處理：
電腦分辨率 – 頁簽高度 – 網址欄 – 書簽欄 = 設計稿真實高度，即：1440×820 尺寸進行設計
因此想要讓自己的設計稿被前端進行完整還原，就必須將瀏覽器頁面當中的很多因素考慮進去。類似于我們去設計移動端的小程序，他也會有頂部固定的區域進行展示。
文章來源：優設 作者：CE青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計是溝通，是人和人、人和物之間，通過某些形式傳遞和反饋信息的過程。
設計時刻都在為產品或商業提供有價值的幫助，例如產品轉化率的提升、品牌好感度的提升、還有商業變現等等；與此同時 創新性的設計，很可能會帶來數據上的質變，體驗上的顛覆，甚至是改變某個領域的發展方向。
-
設計的本質，是對人性視角的轉化。
通過洞察用戶在產品使用過程中的痛點，提出全新體驗的可能性，實現體驗和業務的平衡；
設計不是產品可視化，它是全局的，是通過用戶視角對設計機會點的洞察。
-
設計包括，但不僅僅是形式。
形式是設計的外層映射，設計本身是廣義的；設計形式是設計理念的承載，是設計滿足用戶需求、實現商業目標和呈現品牌調性的具象化結果。
-
設計的價值在于創新，探索出解決問題的更多可能性。
設計是通過創新思維，對問題本質的探尋和對常規框架的突破，為體驗和業務賦能。
-
設計是價值導向的，需要為業務負責，為行業負責；好的設計，需要能比常規方案產生更多價值，驅動業務和行業發展；設計不是單獨的原型圖或者視覺稿，而是一個全局性的創新型解決方案。
我們在做的設計，是大設計。
文章來源：站酷 作者：樂信用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
QQ 購物號是專門為 QQ 用戶定制的購物平臺，2020 年隨著疫情過后，整體電商行業開始恢復階段，QQ 購物號計劃了今年雙 11 大促季活動，活動的業務目標是希望強化特殊樣式設計來促進購買轉化，驅動整體大盤消耗與效果提升。為此如何通過設計賦能業務，從而突破增長的瓶頸呢？
購物號是屬于 QQ 的訂閱號服務，整體的曝光位置并沒有很好，而且這次大促設計的落腳點只通過外層的樣式和推送頁面的廣告內容進行展示。
以及要如何去滿足不同電商廣告主的投放訴求，和不同素材規格的投放適配，這都是需要去考慮和解決的問題。
1. 通過品牌關鍵詞定義視覺情緒版
QQ 購物號用戶群主要還是 00 后為主，這些年輕群體的購物趨勢變化非常快，審美要求也越來越高！
所以前期思考了大量的關鍵分別為：活力/期待/年輕/狂歡/心動/發現/熱愛，最后確定以活力/熱愛為這次大促季的品牌關鍵詞
2. 不同時期變化
隨著大促運營節奏的慢慢展開，視覺側也需要考慮到相應的視覺變化去引導用戶的感官，避免用戶審美疲勞。
嘗試前期的預熱階段通過特殊視覺吸睛，第一眼先抓住用戶的眼球，進入狂歡階段，則可以利用動效加持來進一步吸引用戶。
1. 讓容器層面提升專屬感
通過多方案從常規到異形多結構卡片探索，這里為了避免品牌標識壓在廣告素材上會有遮擋問題，同時又要突出品牌標識。
所以前期預熱期選用卡片 F 更能強化品牌感，可以讓用戶更有代入感，當到了狂歡期選用卡片 G，通過擴大視覺著色區域，提升品牌專屬內容曝光優先級，增加用戶吸引力。
2. 利用情感化氛圍與用戶溝通
從前期的分析得出 QQ 購物的用戶群是非常年輕的 00 后，所以整體視覺上需要運用更具年輕和活力的情感化氛圍。
通過品牌字體上使用現代硬朗風格，巧妙的融入氣泡元素，提升大促氛圍，在傳播上結合 QQ 購物的品牌符號。
包括品牌頭像以及卡片的氛圍圖形也采用氣球泡泡，彰顯活力感。整體保持一致的視覺體驗。
對于整體色系上延續 QQ 購物的品牌基調，輕漸變暖紅色更能營造年輕、購物、活力的調性，讓用戶更有情感上的共鳴。
3. 通過動效不斷激發用戶的行動力
整體的動效節奏通過吸引-激發-共鳴-行動四重奏來進行，讓用戶更深刻去感知大促狂歡期的感知。
比如在外層入口上通過動態頭像來吸引用戶注意力，當用戶進入 QQ 購物號后，利用帶有大促品牌的禮包彩蛋來制造驚喜感，吸引用戶搶禮包。
再通過卡片若隱若現的動態圖形去烘托氛圍感達到用戶共鳴，以及行動按鈕的微動效觸發用戶行動。
4. 高效適配于不同規格廣告位
QQ 購物支持投放多種廣告位，因此定下整體視覺風格后，快速對不同規格廣告位進行適配復用。
廣告主提供不同素材規格均可適配投放，降低廣告主成本，也讓用戶達到視覺的統一體驗
經過這次官方活動大促的主視覺風格塑造，我們沉淀下來整套視覺框架結構。
通過制定設計規范可以讓廣告主自定義皮膚模版，以及分不同行業模版，比如拼多多五周年的定制模版以及在寒假期間推出的 K12 教育行業模版。
不僅降低廣告主制作成本，也通過更吸睛的皮膚模版提升促進購買轉化，驅動整體大盤消耗與效果提升！
本次活動的數據指標目標達成，整體的增長環比 19 年的雙 11 和今年的 618 均有了較大幅度的提升！
在設計策略與運營策略配合優化下，11.01-11.11 的廣告主整體預算消耗超出 4 千萬，完成預期超出 16%，也提升用戶的轉化率。
回顧整個雙 11 大促活動，我最大的感悟是要有全局觀！
前期基于對產品目標的了解，從更高的角度去理清產品思路定下設計策略，結合個人設計手法不斷的打磨細節。當然整個過程會碰撞出很多思考和糾結，需要不斷的實踐、驗證。
隨著廣告主對品效要求越來越高，未來電商的廣告形式也開始隨著精細化運營的方向發展，這些變化可能對商業化設計師來說，或許是一種挑戰和機遇
文章來源：優設網 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
工作中我們常常會聽到或在撰寫交互說明時提到“從底部向上出現彈層”、“出現浮層”、展示“對話框”、彈出“彈框”、“出現對話框”諸如此類的話術。我相信大家對“浮層、彈層、彈框、對話框……”等稱呼常常也會感到困惑。到底什么時候應該稱呼為“對話框，什么時候稱呼彈框”，此類相似的組件又是如何分類的，應該如何應用、如何設計。
恰好筆者近期在設計彈出層組件，本篇文章將結合自己的實戰經歷，自己對彈出層組件的理解和設計經驗分享給大家，希望幫助大家對彈出層組件有更清晰的認知和理解。
首先我們看一下彈出層組件的定義：當觸發某項操作時，在頁面上方展示的彈出層容器，容器內可展示文本、按鈕、列表、標簽、表單項等內容，英文名稱定義為 Popup。
△ 彈出層組件的構成
根據彈出位置的不同，我們又可以將 Popup 組件細分為如下 5 種樣式。
△彈出層組件的 5 種樣式
看到彈出層組件的樣式，想必大家已經聯想到日常用的比較多的組件了，比如“Alert 確認框，picker 選擇器、基于場景的篩選組件”等。彈出層組件是十分基礎的組件，基于該組件我們可以開發通用性組件以及場景組件。從“形式”角度來看，“浮層、彈層、彈框、對話框……”本質上都是彈出層。
“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺也都根據自身的規范對相關組件進行命名。Material Design 和 iOS 官方規范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發整理了組件之間的對應關系。后文會詳述每種組件的定義及應用。
△MD 和 iOS 規范中的彈出層組件
在詳述組件之前，還需要向大家傳達一個概念“模態”，即平時我們常說的“模態彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態彈框”，而是當彈框采用了“模態”的設計手法時，我們將其簡稱為“模態彈窗”。
iOS 官方定義為：
“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”
翻譯過來即：模態是一種設計手法，它使用一種臨時性的模式將用戶之前看到的內容與當前看到的內容進行區分，并且需要通過明確的操作才能退出該模式。模態呈現的內容可以：
幫助用戶專注于一個獨立的任務或一組緊密相關的選項，確保用戶收到關鍵信息，并在必要時采取行動
由此可見，彈層是否為模態彈層可以根據具體的使用場景進行定義。在 iOS 官方中定義的模態彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續的系統中將 Fullsreen 也作為模態彈層進行使用。MD 中的 Dialogs 組件均為模態，而 sheets 組件不采用模態設計手法。
警示型彈框均采用從頁面中間進行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場景和功能相同。都是在重要信息提示、需要用戶確認的操作、以及破壞性操作之前進行提示，警示型彈窗會中斷用戶的任務流程，影響用戶體驗，因此需注意其使用頻率。
△警示型彈框 Alert Dialog
使用場景：通常在系統級信息的提示，例如權限的獲取、系統通知，需要明確告知用戶的信息，以及破壞性操作前使用。
△警示型彈框應用
根據用戶在彈層中需要完成的任務內容和任務數量，又可分為簡單型和復雜型彈層。
簡單型彈層
常用于在彈層中展示內容，需要用戶進行選擇的場景，該場景通常只需要用戶完成一種任務，比如通過點擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺多使用在頁面中間彈層的方式。
彈層中是否存在操作按鈕可根據實際應用場景去確定。通常選擇項條目較少或內容簡單易于識別時，可不需要「確認」按鈕。而在選擇項條目較多時或需要用戶作短暫的思考才能確認選項時，可增加「確認」按鈕，允許用戶有修改選項的機會。
△簡單型任務彈層的組件樣式
△簡單型任務彈層的組件樣式
彈層中信息的呈現方式又可分為“列表”和“網格”兩種，大多種場景下，均可使用列表展示內容，更加符合用戶從上到下的閱讀習慣；而在分享場景下多通過網格的方式將分享渠道展示出來，增加屏顯的內容，同時提高用戶查看信息的效率，具體樣式可參考上圖。
使用場景：簡單型彈層多用在信息的篩選、排序和信息確認的場景下使用。且在目前市面上的絕大多數應用中，除原生的安卓應用外，大部分應用都采用從底部向上彈層和從頂部向下彈層的方式。
△簡單型任務彈層的應用
復雜型彈層
復雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務。
涉及到信息篩選時，通常采用側邊彈層組件進行展示，且彈層上的信息僅支持垂直滾動查看，不支持水平滾動查看，且通常采用“非模態”的手法，方便用戶快速取消當前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統中，很多 APP 應用在復雜的篩選場景下也都采用側邊彈層的方式。
全屏彈層會將當前頁面中的全部信息遮擋，更方便用戶聚焦于當前需要完成的任務，避免用戶的注意力被分散。通常采用模態的設計手法，僅當用戶觸發確認、取消或關閉操作時，彈層才會消失。一般全屏彈層中需要包含標題、操作按鈕、內容區域。用戶在全屏彈層中需要完成多個任務，因此內容區域中也會包含多個組件。例如“按鈕、輸入框、標簽、開關、列表、日期選擇”等。
△復雜型任務彈層的組件樣式
使用場景：通常用于完成復雜任務的表單信息填寫、內容篩選、搜索和內容展示。
△復雜型任務彈層的應用
需要單獨說明氣泡框組件
在 iOS 的官方定義中，氣泡框組件應用于 iPad 應用程序，在 iPhone 應用程序中，通過以全屏模態視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實際場景進行應用的。例如，在手機端，氣泡框組件更多被用于簡單信息的展示與選擇。
△Popovers 氣泡框的應用
小結：
筆者按照使用場景、信息的復雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務型”，并且枚舉了常用的 MD（安卓系統遵循的規范）和 iOS 兩大規范中定義的彈出層組件，方便讀者對彈出層組件有更清晰的了解。需要說明的是，由于業務場景是復雜的、多樣的，各位設計師也需要結合實際的業務場景和設計目標，靈活的使用組件。
△彈出層組件的類型與使用場景
1. 設計目的
首先需要理解我們為什么要設計組件，組件最終設計的目標是什么，筆者從“設計側和技術側”兩方面談談自己的理解。
設計側：規范的組件設計，對內有利于全公司的設計師對組件的使用有統一的認知，明確組件的使用場景，避免誤用和錯用組件，并且方便新人設計師快速學習和上手，提高設計效率。對外也有利于保證設計上線后的一致性和規范性，方便用戶對本公司產品建立統一的心理認知。
技術側：通用的基礎組件，具有可復用性，能夠減少重復開發，大大提高開發效率。
組件設計的最終目標可歸納為保持設計的統一性，提升用戶體驗，同時提高設計和開發的效率。因此，組件設計是非常有必要的，那么到底如何從 0-1 開始設計組件呢，下面我們來看組件設計的詳細思路。
2. 設計思路
其實組件設計的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎組件的設計。通常我們會從組件的定義、用法、構成、種類、行為與狀態五個方面進行組件的設計。
△組件設計的思路
回歸到本文所講的移動端彈出層組件，組件設計時需要考慮其“通用性和可復用性”?；诖嗽瓌t，將彈出層組件進行拆解，如下圖所示。它包括：
△彈出層組件的拆解
從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進行任何彈層組件的開發。因此，在彈層組件設計時將 Popup 組件抽離出來作為最基礎的組件進行開發， 還可以進一步開發通用的彈層組件和高頻使用的場景組件。由于上文中已講 Popoup 組件的構成與樣式，且由于該組件相對來講比較簡單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場景下的高頻組件“篩選器 Filter”為例進行說明。
1. Picker 選擇器
定義：用于從一組預設數據中進行選擇的控件。
用法：
構成：標題、按鈕、內容（當前選項和其他選項）
△Picker 選擇器組件的構成
種類：根據選項間是否存在級聯關系可將其分為 2 類，普通選擇和級聯選擇。
△Picker 選擇器組件的分類
行為與狀態：狀態，給出單列選項和多列選項的常態頁面以及選項被禁用的狀態頁面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現->選項查看->選擇目標選項->彈層消失的完整邏輯進行說明。
△Picker 選擇器組件的狀態
△Picker 選擇器組件的交互流程與行為說明
當完成以上全部內容的撰寫時，可對本組件開發出的效果進行說明。例如：
2. Filter 篩選器
Filter 組件是基于公司移動端產品均存在的高頻“篩選”場景而總結的場景（業務）組件，其設計思路和上方描述的通用組件的設計思路相同，筆者此處只強調 2 個重點注意事項。
場景組件在設計時遵循“加法”邏輯，從而提升組件的復用率。組件內容分區塊進行封裝，從而增加組件的靈活性。
△篩選器組件
在上圖所示的篩選場景中，單類目和多類目篩選若均為高頻的使用場景，那么單類目和多類目篩選組件均可以抽離成組件并進行開發，且多類目篩選可基于單類目篩選組件進行開發。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發不同于設計稿，設計稿可將多個類目刪除掉只剩余單個類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發成本要高于重新開發組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發出單類目篩選的組件。這也是需要我們牢記的，組件設計需要從“原子組件到復雜組件”，遵循由“簡單到復雜”的加法邏輯。
而在組件開發時通過“goup”的形式進行封裝，可使組件更加靈活。例如，當業務場景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復用，這就提高了組件的通用性和復用率。
當然，Filter 組件還需要考慮很多設計細節，例如類目名稱是否顯示為當前篩選項名稱、重置的邏輯是什么、確認篩選后頁面信息會如何變化、篩選項支持單選還是多選等等。復雜的場景組件通常是由多個原子組件組合而成，因此組件的邏輯也更為復雜，組件設計的整體流程和交互細節也應考慮的更加全面。
文章來源：優設網 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天，我們來談談有關使用的三個概念的含義：有用性，可用性和實用性。前兩個術語，：有用性，可用性，在用戶體驗和設計方面被廣泛使用，而第三個術語，實用性，很少被提及。然而，我們將會提到，在三個術語中，實用性可能是對設計師和企業來說最重要的一個。
Author/Copyright holder: MsSaraKelly.
有用性
一個有用的產品能讓用戶完成一個任務或目標。這些任務或目標只有在一些情景中才是明確且意義重大的，其他情境中則不行。
例如，用戶使用文字處理程序包，如微軟的Word或者LibreOffice中的Writer能夠制作文字文件，包括信件、報告、整本書等等，但任務是明確的，結果是看得到的。我能用這個工具寫信嗎? 是的,你可以。對于任何想使用文字處理程序包的人來說都可以。
另一方面，一件藝術品可能對某個人是“有用的”，可以照亮他們的工作室，但可能對另一個人就沒用了。藝術具有主觀性，這意味著不同的人對“點亮工作室”這個任務有著不同的要求，可能需要極為不同的產品來達到這個“有用的”標準。
然而，無論提到哪種有用的形式，重要的是有許多潛在用戶認為產品有用。(從商業角度來看，至少要有足夠的用戶才能讓產品盈利)。
任何用戶都不可能接受沒用的東西。
Author/Copyright holder: Alastair Cook.
可用性
可用性針對的是某個特定產品?？捎眯哉f明產品不僅具有有用性，它還要仔細考慮產品的使用方式，以及確保用戶愉快、簡單(或盡可能簡單)且有效地使用產品。
大衛·麥奎琳曾在《達爾文》雜志中發表文章《可用性》，里面提到;“可用性與人類行為有關。它承認人類是懶惰，情緒化的，不愿投入大量的精力做事，比如，獲得一張信用卡，他們通常更喜歡做容易的事，逃避難做的事情?！?
許多“有用的”產品并不具有可用性。想象一下，有一扇門，外面有個把手，上面寫著“只能推”。門肯定是一種有用的產品——它把里外分開，可以確保人們有效地使用空調和暖氣，還能降噪，等等……
但是一個需要指示的門可用性有多大呢? 其實，一扇門也就只能推或者拉。從用戶的角度來看，當他們看到門時，他們應該清楚地知道需要采取什么行動——如果不能而且需要一個標志來解釋; 那么這個門的可用性太小。
值得注意的是，對于一個產品來說，即使可用性小也沒關系，但要不具備有用性才是真的糟糕。你看當今世界上有很多帶有“推”或“拉”標志的門，這就說明了這一點?？捎眯暂^低通常只是一個小麻煩(你可能會抱怨那扇門有多不靈活，但你可能不會去修——因為付出太多回報甚微)，而不會影響全局。
然而，許多品牌(如蘋果)已經建立了整個產品線，設備比他們的競爭對手更具可用性，即使用途實際上是一樣的。例如，iPod并不是世界上第一個MP3播放器。然而，從用戶的角度來看，這是當時最好用的MP3播放器。正是良好的可用性讓iPod從一眾MP3里脫穎而出，成為世界上最暢銷、最受歡迎的播放器。
Author/Copyright holder: Aido2002.
實用性
一個產品既具備有用性又具備可用性，但仍然不能被使用。設計的最終目標不是讓產品具備這兩種性能，而是讓用戶能用上這個設計。如果沒有用戶使用，這個產品就是失敗的，不管它的設計有多好——它仍然是個敗筆。
在個人交通領域有兩個有名的案例。第一個例子可能對于大多數讀者來說非常陌生遙遠—辛克萊C5?？巳R夫?辛克萊爵士(Sir Clive Sinclair)是計算機行業的一位領軍人物，他普及了計算機并使千家萬戶都用上了這款產品。他旗下的ZX Sinclair系列電腦賣出了數百萬臺，全世界的家庭里都傳出磁帶游戲的嗡嗡聲，十分快樂。
成功后，克萊夫爵士決定公布他的酷愛的一個項目—單人電池供電的環保汽車。(盡管它在營銷文獻中被稱為“輔助踏板自行車”)。克萊夫在C5產品的投放市場時投入了數百萬英鎊。這款產品既具備有用性，也具備可用性，但遺憾的是，人們討厭它。沒有人使用C5，英國電視和媒體經常嗤之以鼻。該產品最初的產量為14000臺，結果直到公司破產前，只售出了5000臺。
第二件事就比較新?！百惛裢笔且环N個人交通工具，可以讓用戶用兩個輪子去（幾乎）任何地方，它于2001年推出，2002年投放市場。它的發明者迪安·卡門(Dean Kamen)預測在世界各地銷售上百萬臺。事實上，在投放市場后的6年里，它的銷量還不到3萬部。該公司已經出售和轉售多次，自從它推出，雖然賽格威滿足了少數人的需求，取得了些成功。但事實卻是，人們不使用這種工具。
為什么這兩個具備有用性和可用性的產品沒有得到使用？在Sinclair C5的案例中，產品未能滿足特定的需求。正如BBC最近提到的，如今公眾的環保意識十分強烈，Sinclair C5產品可能非常受歡迎，但在C5發布的時候，環保問題還沒有這么迫切。
Author/Copyright holder: Aido2002.
以賽格威為例，《連線》雜志說：“但這根本沒用: 賽格威在技術方面無人能及?？上н@毫無意義。“該公司未能確保產品在發布時通過過相關法律規定(在許多地方在公共場合使用它們不是合法的，現在仍然是不合法的)。”早期的使用者也報告說，他們因為使用賽格威電動車而遭到嘲笑，形象受到詆毀那么銷量肯定無望。
一個成功的產品肯定要得以應用。就算生產了一個具備有用性和實用性的產品，但用戶仍可能不想使用它。
如果要使用一個產品，它必須是有用的。但如果沒有得到使用，它就沒有意義，這意味著它永遠不會成功。一個產品也應該具備可用性，以增加使用的機會——一個產品的可用性越大，用戶用起來就越舒心，也會更容易說服別人使用它。然而，就算具備可用性和有用性，也不能保證一個設計得以使用。除了可用性和有用性之外，還有其他的考慮因素會影響產品的市場普及度。
文章來源：站酷 作者：馬克筆設計留學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
