手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品，為你的產品設計注入靈感。

--手機appUI設計--

 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  更多精彩文章：

       手機appUI界面設計賞析（一）

       手機appUI界面設計賞析（二）

       手機appUI界面設計賞析（三）

       手機appUI界面設計賞析（四）

       手機appUI界面設計賞析（五）

       手機appUI界面設計賞析（六）

       手機appUI界面設計賞析（七）

       手機appUI界面設計賞析（八）

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品，為你的產品設計注入靈感。

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

--手機appUI設計--

（以上圖片均來源于網絡）

 

 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  更多精彩文章：

       手機appUI界面設計賞析（一）

       手機appUI界面設計賞析（二）

       手機appUI界面設計賞析（三）

       手機appUI界面設計賞析（四）

       手機appUI界面設計賞析（五）

       手機appUI界面設計賞析（六）

       手機appUI界面設計賞析（七）

擬物化設計的回歸

在今天的 UI 設計領域，由扁平化設計風格占據主導地位，已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。

一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標、幾何、文字，UI 設計師的工作僅僅是對內容進行組織和排版，涉及到繪制原創的也僅僅只有少量的圖標（大多數人還畫不好）。

這種狀態持續了很多年，看起來歲月一片靜好。

但是，這兩年市場發出了一些不同的聲音，那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。

比如新擬態風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發文和介紹，介紹它的設計理念和設計方法。

還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標，引起設計圈的熱議。

首先講講新擬態設計，之所以之前只字不提，是因為我對這個風格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應用是完全不適用的，只能活在飛機稿里。

而國內大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經過幾個大廠團隊認可，且有共識的。

當然，這并不因為大廠用了就無腦推崇。而是純扁平的設計已經越來越難滿足部分需要強視覺效果的頁面設計了。

今天的互聯網和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯網產品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現狀也被稱為互聯網的下半場。

佛系不行，當舔狗更不行（成本太高），所以今天大型產品都在對待用戶的態度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應用，進入的首頁大家自己意會……

有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后，那么進一步在一些細節處應用擬物就成為必然的選擇。

而擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區域的感知。

最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配，相信大家已經很習慣了。

只是，這些圖標開始在脫離運營活動的狀態下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區）！

且除了 APP 外，其它領域對于擬物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數據展示、車載界面、定制系統等等。

作為新世代的 UI 設計師，多數人對擬物的設計可以說是完全空白的狀態，所以是時候要重拾擬物設計這個傳統藝能了。

擬物和輕擬物的認識

前面我有提到，擬物主要應用在關鍵的圖標上，但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。

首先我們看看，過去優秀的擬物圖標和設計案例，它不僅表現元素本身的光影、透視、構造，甚至會非常完整的表現物體表面的材質和肌理。

這種圖標單看起來確實很好看、細致。但是，把它丟進我們當前的頁面中是非常違和的，因為它們細節實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。

所以為了符合畫面的質感，又要考慮項目效率，輕擬物這個概念開始被提出和應用，作為一個折中的解決方案。

它和純擬物設計的共同點在于，也表現光影、結構、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現出更概念化、理想化、易于辨識的擬物圖形。

所以，我們主要去學習的內容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！

而輕擬物雖然 「輕」，但它依舊也還具備擬物的基本特征，是有實體質感的。但是扁平從插畫到圖標設計經過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設計，應用大量的漸變、投影、模糊的效果，比如下圖案例。

這在我們之前圖標的系列干貨中有提過，這類設計是面性圖標的進階版，它們依舊屬于扁平風格的范疇之內，不能和輕擬物劃上等號。

所以，先掌握這些概念，到下一篇中，我們就會展開具體的技法講解和演示了。

結尾

對于這幾年才開始學習 UI 設計的新手來講，擬物已經變成一個很陌生的事物，這對行業來說是比較悲哀的一件事。

因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養，不僅包括對傳統美術（結構、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。

可以說，自從擬物不成為必修題材以后，九成以上的UI設計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。

項目背景

站內攻略作為每年大促玩法的預告者，承擔了向用戶輸出平臺節奏、吸引用戶預約回流的重要任務。 不同于著眼于轉化的賣貨會場，或是著眼于分享的互動H5，如何能讓用戶更好地了解京東的大促平臺玩法，便捷用戶的購物旅程，就成為了它的主要任務。

設計思路&設計執行

1. 產品化思路與定位

在開始設計之前，我們對比了2017年至今的所有攻略頁面，發現往年頁面存在缺乏延續性、定位不清晰的問題。作為大促信息傳達的先行軍，往期的攻略反而更多承擔了轉化型的會場類任務，對于優惠信息的預告往往是輕描淡寫地用文案帶過。而每一次的攻略樣式都是「船新版本」，也產生了較大的人力消耗。

然而盡管攻略的任務是信息傳遞，但作為整體大促鏈路中的一環，它終究還是需要為大盤GMV服務。那么應該如何平衡二者，以達成更好的數據效果呢？

首先，從攻略存在的核心意義——助力集團大盤GMV的提升出發，它需要達成以下幾個目標：

• 讓用戶愿意逛：讓用戶明白京東大促的節奏和玩法、并且在了解后有意愿參與；
• 讓用戶愿意買：提供能提升用戶購物欲望的決策信息；
• 讓用戶養成習慣：當攻略持續為用戶產生了用戶價值后，就可以養成用戶「來京東購物前先看攻略」的心智，從而更好地引導用戶進行操作。

然而縱觀大促會場全局，許多賣貨會場也可以達成這些目標，那么站內攻略和它們相比有具有哪些差異性呢？我們可以從對內和對外兩個角度進行分析：

對內差異化：從站內來看，「我的」和「AI助手」也都承擔了向用戶進行活動會場推薦的功能，但「我的」是圍繞用戶已有的操作展開管理和推薦，是絕對精準的量身打造，「AI助手」是理性層級下的導購，需要用戶先產生「想法」，再指導操作；站內攻略則是引導用戶未來行為的指導和說明，先組織、篩選促銷信息，再使用戶產生「想法」，從而產生操作，有一定「逛」的性質。

對外差異化：從站外來看，站內攻略的定位與「什么值得買」有些近似。相比之下，站內攻略的優勢則在于它能更緊密地圍繞京東用戶的消費習慣進行定制化推薦，和近年來以長圖為主的阿里系攻略相比，則提供了更為豐富的操作（如預約），一定程度上能減少用戶的記憶成本。

基于以上基礎，我們對往年攻略的用戶畫像進行分析，并對攻略進行了橫向與縱向的對比，總結出了攻略作為一個長線產品視角下的迭代思路，并根據攻略的特性制定了分時期的北極星指標：提升預熱、專場期的預約加購率、提升全時期的活動分流以及提升高潮期的商品轉化。那么我們又是如何根據這三個指標來拆解細分策略的呢？

2. 提升預約加購——日歷優化

交互層面：動效輔助內容聚焦

作為站內優惠信息的聚集地，如何清晰簡潔傳達內容，一直是交互側需要重點思考解決的難題。于是在本次攻略中，我們對比了往期攻略中的預告樣式，在數據表現較好的日歷樣式基礎上，對頁面的層級進行了進一步的簡化，配合動效的引導操作，以便用戶能夠更聚焦地瀏覽日歷部分的核心內容：

視覺層面：視覺層級清晰

經過對交互稿的分析理解，以下3個痛點，對此次頁面的信息層級和畫面舒適度是一個考驗：

• 內容信息較多：為了提升預約吸引力，這次在單日預告內露出了更多的BI單品，同時增加了預約瓜分京豆的玩法，所以這次首屏的內容信息和雙11相較而言，是有所增的。
• 日歷展示狀態增加：日歷嘗試了新的交互樣式，有展開和收起兩種狀態。
• 卡片顏色多：為了讓用戶感知到每日主題的差異，日歷卡片的顏色會根據每日主會場的主題顏色相呼應。

那么如何通過視覺的手段，讓視覺層級清晰展示且畫面顏色和諧呢？下面從最基礎的視覺構成里的構圖和色彩兩方面進行分析并落地：

「構 圖」整體用方形進行構圖和內容分割

方形是最簡潔的幾何形態，對于信息量較大的頁面，方形會讓設計空間利用最大化，并且可以排除形態上的干擾，結構清晰的展示信息內容，讓用戶通順的瀏覽頁面。

簡化視覺層級

在交互稿上，瓜分京豆模塊和日歷選擇器兩部分內容劃分較為明顯，但所留出的空間，會增加視覺層級的復雜度。為了盡量簡化視覺層級，找交互同學商量是否可以在保持內容劃分清晰的情況下，把瓜分京豆模塊背景和日歷選擇器拉通，同時，也咨詢了前端同學，視覺這樣處理在實現上是否會有問題。最終，三方達成一致后，采用了視覺最終呈現的方案。

「顏 色」

為了更好的覆蓋618全時期，挑選了色環上三種距離基本相等的色彩進行從暖色到冷色的色相漸變。

• 頭圖運用了較為清透的黃色至紅色的暖色漸變，適用于618全時期，體現了大促的熱鬧氛圍；
• 頭圖過渡到日歷選擇器，則是運用了從頭圖的紅色漸變至紫藍色，這樣既能讓選擇器的文字信息清晰識別，也能將頭圖和日歷選擇器兩部分內容進行自然的分割，減少了線面分割所帶來的復雜層級關系；
• 瓜分京豆模塊的顏色則選用了偏中性的黃色，這樣一來和每日不同顏色的卡片搭配和諧，二來和頭圖有所呼應，整體畫面色彩保持平衡。

前端層面：復雜交互動畫與跨平臺功能適配

關于選中移動動畫

日歷選中動畫部分我們需要實現的一種跟隨移動的效果，那么我們需要考慮的是在當前日期是有可能去到任何一個可點擊日期的位置。

實現方式：

用純css方式控制，方塊使用背景圖的方式實現，通過控制類名移動位置，比如.move-[start]-[end]，缺點：需要寫好每個日期對應到其它日期的位置，不夠靈活

用js控制。把日期看成一個棋盤格子，每個格子都占相同的坑位大小。我們把當前日期看作a，移動至日期看作b。假設把a移動至b的橫向占格子數設為n，把a移動至b的縱向占格子數設為m。那么n=當前下標 % 行個數，m=當前下標 / 行個數取整。那么a移動到b的x = w * n，y = h * m (w為格子寬度，h為格子高度)。

注：寬度獲取使用block.getBoundingClientRect().width；clientWidth會忽略小數位

• 關于展開收起動畫，半圓實現：
• 可以使用clip-path
• 我的實現方法為使用border-radius+height實現，半圓的弧度使用兩倍大圓取其部分圓弧顯示，展開收起實現使用高度修改：在低端機會略卡，因為每次使用會引起頁面重繪（有待探討優化）
• 使用svg，canvas等
• 關于app預約，小程序預約
• app預約采用的是京東app日歷預約，用戶開啟手機日歷（寫入）權限后，預約就會寫入用戶的手機日歷，在活動開始前會以日歷提醒的方式提醒用戶。
• 小程序預約走的是微信大賬號提醒流程，預約需要分三步進行：預約-> 授權 -> 上報授權狀態。進行完上述步驟后，用戶會在活動開始前10分鐘左右通過大賬號（已關注用戶）或服務通知（未關注用戶）收到消息

2. 提升活動分流——福利秘籍

提升篩選效率

福利秘籍專區作為大促期間福利互動活動的集中地，承擔了為互動分流，為用戶提供快速查找篩選可參與活動的任務。而互動往往存在較為復雜的規則，對用戶而言存在較高的理解成本。此次除了集團主推的互動，又增加了對于事業部互動的展示，對于保證頁面展示效率也帶來了一定的挑戰。通過對往期迭代內容進行數據對比，同時參考其余會場對于多信息展示的策略，最終我們采用了BI展示，同時對用戶弱相關的互動卡片進行折疊的方式提升頁面的效率；而在卡片的信息展示上，選擇重點突出活動可得的利益點，讓用戶一眼即可篩選出對自己最有價值的互動進行參與。

視覺創新優化

雖然運營同學對雙11的秘籍視覺比較認可，但是仍然提出了希望有秘籍形式感的同時，能進行視覺創新的訴求。經思考后，我認為運營的訴求無法滿足：

• 視覺風格和618大促整體風格保持統一；
• 能體現秘籍感的視覺表現手法有限；
• 視覺創新的前提是要保證信息清晰的展示給用戶；

于是帶著以上3點找運營同學再次溝通清楚對方的真正訴求到底是什么，經溝通，對方最重要的訴求是希望有視覺創新，秘籍形式感訴求較弱。接下來針對重要訴求集中發力，并結合此次618視覺概念（光點、光線），找到了視覺創新優化的解決方案，并和運營達成了一致。

「構圖」

上面提到了方形可以排除形態上的干擾，考慮到活動入口圖數量較多，且氛圍圖不可把控，左側以方形構成，右側結合了618主圖形——光線，把文字和氛圍圖分開，讓各部分信息更加聚焦。

「顏色」

結合雙11用研結論——活動入口主題不夠鮮明，除了活動文案類似的因素，我認為顏色也是影響因素之一。所以這次在上部分平臺級活動入口，采用了2種暖色的近似色交替構成，下部分事業部活動入口，統一采用了1種和上部分近似色的冷色構成；單個活動入口，文字和氛圍圖的背景進行統一色相的明暗深淺變化。從整體樓層來看，從上至下，由暖至冷，不僅活動主題有了明顯差異化，而且較好的過渡到下一樓層；從單個活動入口來看，左右深淺顏色的劃分，不僅對不可把控的氛圍圖適應性更強，且主題文案更加明顯。

「表現形式」

整體頁面在按鈕的部分采用新擬態風格，在保證吸引力的同時，也減少了顏色過多的問題，減少了信息層級。新擬態風格更適合工具功能類產品，本次只嘗試使用在了頁面的按鈕部分，風格上也會有眼前一亮的感覺。

3. 提升商品轉化——今日導購

分時期變化的樓層策略

針對高潮期的轉化指標，我們參考了往期的迭代經驗，發現隨著大促節奏的漸進，臨近高潮期時，頁面的轉化模塊表現往往有較大的提升。于是在本次設計中，我們針對這個數據表現，對樓層順序進行了動態調整，高潮期將轉化樓層前置，以更好地匹配不同時期的用戶需求。

同時根據往期的樓層數據表現，本次我們也延續保留了數據表現較好的模塊類型，例如增加了榜單的露出，以輔助頁面目標的達成（以下數據來自于lan.jd.com)。

樓層整體化、內容吸引力包裝

基于之前今日樓層視覺整體感較弱的問題，這次樓層背景色和頁面背景色有所區分，樓層內模塊顏色和樓層背景色同色，較往期此樓層來看更加整體化，又能讓頁面層級更加清晰。

其中，針對這次品牌入口和上海美影廠IP形象結合的策略，為了提升用戶吸引力，且不干擾信息內容的前提下，視覺上采用了和用戶共情，且和IP形象契合的元素——老電視機，同時按鈕文案也進行場景契合的包裝，增加趣味性。

項目成果

與往期站內攻略對比，本次618站內攻略主要在以下方面有較為明顯的提升：

品牌視覺契合及創新

在延續主視覺元素的同時，視覺風格有所創新，在頁面的按鈕部分采用新擬態風格，減少顏色過多而導致的復雜信息層級問題，同時也保證了視覺吸引力

視覺精致程度

整體頁面顏色較有節奏，且更加清透舒適

元素細節（打光、投影等）的刻畫更加精致

信息層級清晰度

通過對顏色的合理規劃，有主次的文字信息，讓單個樓層更整體化，各樓層模塊劃分清晰

數據表現

根據上線后的表現，本次福利互動模塊的點擊數據獲得了顯著的提升，今日模塊的點擊轉化率相比往年也獲得了成倍的增長，頁面目標基本達成。

項目沉淀

1. 好的經驗

針對攻略這類規律性存在的活動會場，我們可以針對其主要的功能組成模塊進行數據導向的設計與迭代，來更好地指導后續的優化方向；同時也可以輔助業務側更加清晰地規劃會場定位，提升頁面對用戶以及大促的整體價值。

2. 如何溝通

Q：需求方一味的追求熱鬧復雜的視覺樣式創新，該怎么辦？

A：熱鬧的氛圍對于大促活動來說固然非常重要，但也要根據頁面類型去判斷（重氛圍or重信息)。設計師要傾聽訴求并搞清訴求的根本原因，并用專業的角度判斷訴求的合理性，以及價值大與否。熱鬧氛圍塑造的前提是不能影響信息的識別，否則就會本末倒置，并且熱鬧氛圍的視覺樣式要和該場景邏輯匹配 。

3. 待優化項

雖然本次頁面大部分模塊基于產品化的思路迭代均獲得了一定的正向反饋，但產品的發展往往是個曲折上升的過程，活動會場也不例外。結合上線后反饋，站內攻略依然有以下可優化點：

日歷操作體驗

根據用研結果顯示，日歷操作體驗問題反饋較多，日歷模塊為滑動改變日期，而非點擊跳轉日期的操作方式，與用戶的認知不符，且首屏動效較復雜，在安卓機型上體驗較為卡頓。后續如有同樣的交互方式，需優化操作體驗。

福利互動入口主題文案

根據用研反饋，主題文案描述不直觀，不易理解，導致用戶容易滑過整個模塊。建議后續活動主題能簡單清晰的描述優惠和玩法。

綜上，未來站內攻略需要進一步探索主要功能模塊對用戶的價值，探索其在大促鏈路中獨特的差異性；同時保留高用戶價值模塊并持續優化，以求達到更好的用戶體驗，用設計策略為用戶與業務帶來更多的價值。

文章來源：優設    作者：JellyDesign

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

大部分電商詳情頁教程都著重教你如何做好首焦圖，「產品參數模塊」這個部分則鮮有人提。今天這篇教程，用超多案例，幫你掌握「產品參數模塊」的設計方法。

文章來源：優設    作者：美工美邦

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品，為你的產品設計注入靈感。

專業又貼心醫療App頁面設計

醫療行業設計案例

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

（以上圖片均來源于網絡）

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  更多精彩文章：

       手機appUI界面設計賞析（一）

       手機appUI界面設計賞析（二）

       手機appUI界面設計賞析（三）

       手機appUI界面設計賞析（四）

       手機appUI界面設計賞析（五）

       手機appUI界面設計賞析（六）

接下來的訪談翻譯自微軟官方博客，微軟的 Office 設計部門的兩位主管 Jon Friedman 和 Deepak Menon 在訪談中聊了一下 Surface Duo 背后的設計故事：

在過去的幾十年當中，數碼產品制造商經常會為了適應用戶的習慣和需求，來不斷創造產品。我們傾向于讓事物變的更小、更輕、響應更快、更具包容性。我們將不同感官融入程序，創造而優雅的產品。

隨著日常生活節奏和生產力的觀念變化，我們經常需要反思一個問題：如何賦予人們在創作和消費、專業和個人之間流暢切換的可能性？

即將發售的 Surface Duo 是一款獨特的雙屏移動設備，它有著一套專門為它的硬件所定制化的產品體驗，而它的設計也折射出我們探索問題的方式。

對于設計師來說，創造這樣的獨特產品的機會是難得的，就像你在一個住了十幾年的房子里面，發現新的房間一樣。會打開的是哪扇門？會通向哪個區域？會延伸出哪些創意？

對于 Surface Duo ，我們想知道，它的兩塊屏幕會延伸出哪些全新的工作流程，它的接縫要如何處理，怎樣減輕用戶的認知負荷？

受多年來我們在用戶研究上的成果所啟發，我們通過軟硬件結合的方式來進行 Surface Duo 的研發，讓它能適合你日常的需求，還可以帶來獨特的體驗，比如在雙屏上并排打開文檔。

Surface Duo 仍然處于起步階段，我們知道，它還有很多待解決的問題，這也是為什么微軟會引入更多的用戶和設計師，來不斷地完善它。

為了讓大家更好地了解 Surface Duo 的設計歷程，我們請來了 Deepak Menon ，他不僅參與了 Surface Duo 的研發和設計，還是 Office 設計團隊的負責人，讓他來告訴大家，Surface Duo 背后的創意、研究和設計決策。

Jon：謝謝你能來，Deepak，在過去的2個月時間里，我們一直在非常密集地使用和測試 Surface Duo~

Deepak：實際上，我干脆是拿它單主力機，現在我都覺得我已經不需要其他的任何設備了。

Jon：我們當然會這么說，畢竟是我們設計了它。但是，我想這也證明了一件事情，就是這種拓展式的雙屏，已經具備應對日常工作的能力，并且貼合大家的需求了。

Deepak：對。這不僅僅是「2塊屏幕智能手機」所帶來的體驗，它更接近于是一款「折疊式的平板電腦」的感覺。它是新事物，盡管是通過鉸鏈和轉軸來實現這種可能性。

Jon：我們接觸 Surface Duo 的時候，我們首先想到的一問題是：人類還有哪些需求是未曾被實現的？人們在達成目標過程中，有哪些問題是需要工具來彌合的？我們要如何來幫助用戶達成這個目標？雙屏的這種形態，讓我們有重新思考生產力的切入點。

Deepak：對，尤其是在移動端的生產力上。

在雙屏界面下，使用 Office 在 PDF 文檔上簽名，然后使用 Outlook 發送出去，簽合同的便捷操作。

Jon：確實，你的團隊在中國和印度這樣移動端優先的國家做了非常深入的調研。

Deepak：我們注意到很多用戶在同一設備上執行并完成一系列的任務，他們需要更快地切換。同時，企業也正在倚靠我們過去認為非?！笂蕵坊沟拿浇閬磉M行必要的經營。

Jon：在過去，生產力有這非常清晰的定量標準，比如一秒生產多少零件。但是如今，生產力和創意息息相關，你的情緒狀態和輸出的內容是一樣重要的。我們在不斷消費又不斷創造，反思和行動來回切換。其實這都涉及到一種傾向或者流程，你會按照一定的方式來處理信息，或者當你腦中突然劃過一個想法的時候，你會想立刻構建或者制作某個東西，而這也需要一系列的操作和任務來支撐。

從整個數字設備的發展歷程來看，雙屏的設備可能是最適合處理這種帶有步驟的「流程」。Surface Duo 最精巧地的地方，就在于它可以按照你的各種需求來折疊翻轉和交互，可大可小，同時也是一款貼合你的口袋尺寸的設備。

在橫屏模式之下，你可以像翻書一樣瀏覽 Word 文檔

Deepak：當然，它將內容消費提升到一個全新的層次，對于豐富內容的處理，Surface Duo 更加適合和專業。在 Outlook 當中，你可以快速瀏覽整個星期的工作安排，在 Word 中，你可以像翻書一樣閱讀內容。屏幕 折疊所賦予的空間讓更多的信息有了自然的展現空間。

借助 Surface Duo ，創造性的工作也得到了增強。當我使用 PowerPoint 來制作幻燈片的時候，我喜歡在一個屏幕上編輯，在另外一塊屏幕上預覽，兩塊屏幕當中，一塊幫我保持專注內容制作，另一塊幫我統領全局。另外，我也會在屏幕上開啟多個不同的應用。

將團隊的視頻通話和 PowerPoint 并列擺放，讓你一邊溝通一邊查看內容

Jon：使用它來進行遠程會議可能是我最喜歡的場景之一。我喜歡在開會的時候使用雙橫屏模式，將視頻置于頂端，在下面的屏幕瀏覽文檔。

Deepak：或者用另外一塊屏幕來調用嬰兒監視器！哈哈，疫情讓我們和家庭的關系更加密切，Surface Duo 讓我可以更多兼顧到家庭這邊。

Jon：對，很多人認為在疫情期間，家里有這么多人，移動設備的使用量可能會降低，但是很多數據表明，情況恰恰相反（僅2月初到3月下旬，微軟的 Team 移動端的用戶數量就增加了超過300%）。就我個人而言，我不想一直待在一個房間里面，盯著一塊屏幕，其他人也都反映，需要四處走動，或者在外面工作。當我開始使用Surface Duo 的時候，開始從中獲得更為強大的支撐，獲得更加有效的體驗。

當然，它最優雅的還是在窗口的管理上。打開多個窗口是一種非常常見的 PC 體驗，但是在單屏的移動端設備上其實還不算太普遍和舒適，但是在 Surface Duo 上則很自然。

Outlook 中雙屏帶來的額外空間讓你可以更快查看相關的收件箱和日歷

Deepak：關于用戶如何使用窗口來提高生產力，有過很多研究，并且兩塊屏幕之間的天然接縫，或者說轉軸，其實很自然地造就了「兩塊屏幕」和「多窗口」的認知。在某些情況下，因為接縫的存在，在兩塊屏幕上打開完全不同的兩個應用，其實是非常自然的事情。

在很多其他的情況下，用戶可能會在一個屏幕中打開一個新的程序，打開新的界面，執行單獨的操作，或者通過一個程序，在另外一個屏幕中打開下一步操作，然后再在兩個界面之間來回操作，這都是非常平穩的。這種被分割開的兩塊屏幕，創造了一種全新的交互契機，而不是制造約束。

Jon：對于 Surface 的軟硬件團隊，我最為欣賞的一點，就是這種共生和互相促進的模式。使用 Surface Duo，你可以擁有更大的屏幕空間，而且擁有眾多不同的使用應用的新方法，而 Surface Duo 也正好可以適應各種各樣不同的使用場景。而我們在創建這個產品的過程中，想要兼顧到如此之多的場景和需求，其實是需要兩個團隊親密無間地協作，才能做好。

對了，你剛剛說道關于照片、視頻、語音等內容——這些輸入方式的協作，對于創造性的工作到底有多重要？

Deepak：的確，在移動端設備上，攝像頭和麥克風是必不可少的。我們希望最大限度地讓 Office 最大限度地利用這些傳感器，在移動地使用過程中進行協同。用戶在通勤過程中如何參與到線上課程的互動？老師如何更快地給孩子批閱作業，家長要如何協助孩子？其實，Surface Duo 在研發探索的過程中，就有意識地在兼顧這些場景和問題。

從媒體庫當中，將媒體拖放到 PowerPoint 當中

Jon：我喜歡這些富有包容性的解決方案。人們的學習方式和工作方式通常是截然不同的，這些自適應性良好的輸入模型，能夠幫助能力各異的用戶完成他們所需的工作。

Deepak：當我們將新的輸入模型和智能化的功能結合到一起的時候，有趣的事情就開始發生了。我們幾乎還沒有涉及到創作方面的內容，用戶就已經擁有很多契機自由發揮，他們可以輕松、清晰地借用這種交互模式來表達自己。比如可以更加順暢地利用模板來制作精美的 Word 文檔和 PowerPoint 。

Jon：物理世界中有太多東西，我們可以將其逐漸的數字化。

Deepak：的確，將智能化的程序和多樣的傳感器耦合到一起，提高生產力的方式有很多——無論是提升工作效率、家庭安全性還是讓內心更加平靜。其實第三方開發者身上，我看到了更多思維和想法的延展，以及可能性。

Jon：對，我們已經看到很多非常有趣智能的東西了！在 Microsoft Hackathon 大會上，有人為 Surface Duo 設計了一款雙人游戲，兩個玩家各占一塊屏幕，隔著轉軸來來操作，彼此面對面，非常有趣！

Deepak：確實如此！

Jon：我們很高興 Surface Duo 最終能夠面向普通用戶，我很期待它最終會在普通用戶手中會迸發出怎樣的創意和靈思，他們能夠構建出什么樣的創新軟件。

Deepak：有太多值得期待的東西了 ！

譯者按：

微軟在硬件產品上，有著豐富的翻車歷史。90年代的事情太過久遠姑且不說，最近十幾年，出過很多比較失敗的產品，比如上架僅 6 天就全線下架的時尚社交手機 Kin One 和 Kin Two，比如被支付寶團隊戲稱為「1%」的 Windows Phone 系統和手機，比如幾乎不存在兼容性的 Surface RT 系列的平板電腦。這些硬件我全都買過，可以說全是坑。

這些產品單獨來看是失敗的，但是放在更長的時間跨度上來看，卻又是微軟整個生態和產品鏈條的構成和發展上，不可或缺的部分。Kin One 是整個 Metro 設計美學真正成型并走入移動端智能設備的里程碑（之前僅用于Zune系列播放器上），Windows Phone 則是 Windows 系統向小屏幕探索的必經之路，而 Surface RT 固然失敗，但是它是帶著桌面端 Windows 系統從傳統 X86 架構走上 ARM 的一次大膽嘗試。

失敗總是難免的，而微軟這種大廠更是有著試錯買單的底氣。從內部設計和產品團隊各自為戰，到統一到一個部門來統一管理，Surface 系列產品的誕生就是分水嶺，而這件事情是在 10 年發生的。

當然，在此之后翻車的產品依然會有，但是成功的概率比起更早的階段（比如應對 iPad 誕生時，倉促推出的觸摸屏PC），已經提升很多了。

如今只剩下拼硬件參數數字產品的世界簡直是太無聊了。我很期待 Surface Duo 這類雙屏折疊硬件能帶來改變。

文章來源：優設    作者：Jon Friedman

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了12款優秀并富有創意的交互作品，為你的產品設計注入靈感。

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

   --手機appUI設計--

（以上圖片均來源于網絡）

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  更多精彩文章：

       手機appUI界面設計賞析（一）

       手機appUI界面設計賞析（二）

       手機appUI界面設計賞析（三）

       手機appUI界面設計賞析（四）

       手機appUI界面設計賞析（五）

這并不是一篇關于設計趨勢的文章，而是一篇關于基礎的設計準則的文章。如果你是一名 UI 設計師，無論你經驗是否豐富，有些設計的基準是需要保證的，有些容易遺忘的細節，需要借助速查清單來進行走查優化。

這份優化 UI 界面的速查清單，就是幫你搞定這件事情的。

1、字體版式

首先聲明，一個項目中最好不要使用超過2種主要字體。不過這種原則已經廣為流傳，就不多說了，下面說說更細節的事情：

1.1、注意大寫

純大寫的字母文本，要額外拉開字母之間的字間距，提升可讀性。

1.2、注意超細體的字體

字重超細的字體要謹慎使用?？梢允褂脺\色，但是要根據字體情況進行選擇。如果你設計的文本是裝飾性也就算的，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分手機屏幕上看起來會非常糟糕。

1.3、標題和正文字體尺寸

先說說網頁排版。標題通常分 H1 到 H6 總計6個不同層級，但是通常不會全部用到，你需要確保層級最多不超過 4 個，并且控制它們整體的邏輯和一致性。網頁的首屏和登錄頁面上的大標題，可以用最大的那一級，畢竟，富有表現力的視覺排版是當下趨勢。

但是其他的文本不要和這個標題文本差距太大。英文文本以Chrome 瀏覽器為例，正文使用 16px 和 17px 這種大小，并且保留 12px 文本作為最小文本。

另外，同一個段落中，不要同時使用 16px 和 17px 這樣相近又不同的文本尺寸，會讓用戶感到迷惑。

1.4、行高

盡量不要在行高上采用自動行高。通常，現在比較流行的做法，是將行高拉高一些，確保整體版面的透氣性和可讀性，尤其是涉及到大量文本的時候。

1.5、文本和標題的層次結構

在需要突出顯示的部分使用粗體。標題、鏈接、按鈕都在這個范疇內。如果將粗體樣式應用到全部文本，這樣重點就不突出了。

1.6、文字對比

請特別注意文本的色彩?？刂坪脤Ρ榷?，確保任何類型的顯示器上都可以清晰閱讀。在設計占位符文本的時候，這個問題特別突出。

2、間距和邊距

留白對于整體設計的重要性是毋庸置疑的。留白的變化有助于設計師理清元素之間的關系，提供節奏感，增加平衡感。

2.1、去掉多余的框架和線條

將一個語義塊和另外一個語義塊分開，最簡單的方法就是在兩者之間增加一條 1px 的線。但是這并不是最好的方法。

我見過不少設計作品中，界面中一個又一個線條繪制的盒子相互嵌套，復雜無比，每個盒子都是用 1px 粗細的線繪制的。但是，如今的UI界面上基本不用這種手法了，大量的卡片替代了以往的各種「盒子」，通過投影和間距來控制卡片之間的關系。

2.2、梳理從屬關系

邊距有助于從視覺上來判斷元素之間的親疏關系。當我們考慮一個新聞資訊卡片的布局的時候，它包含有一張圖片、一個標題，還有3~4行預覽文本和發布日期，那么應該如何分組和間隔？標題和文本應該是一組，這一組和圖片、日期的距離更遠一些。聽起來很令人困惑？看下面的圖片你就理解了：

2.3、少即是多

總會有客戶或者產品會想把所有的功能和元素都懟到同一個頁面或者 APP 當中。這個時候，要你讓標題、菜單、文本、特價優惠、社交帳號和電話號碼都齊齊整整地塞到一起，同時還要給每個組件搭配上圖標。

說真的，這種問題總不能避免。這個時候可以使用這個理由來試圖進行溝通：用戶一次接收的信息越少，進行有效操作的可能性就越大。循序漸進地呈現信息，能夠讓人更加愉悅，用戶對于信息的接受性也更強。

用戶永遠都不會費力巴拉地去拆解和分析你的頁面布局，緊密局促的布局也早已不符合主流審美和日常需求了。

2.4、屏幕邊緣留白不均勻

如果你設計的是海報、Banner 或者是 卡片 等我們所熟知的視覺元素，那么請注意邊緣留白的設計。如果按照經典的方式來布置（從左上到右下），那么盡量讓上方的留白更大，這看起來會讓視覺更加穩當，并且更加具有視覺吸引力。

3、配色和圖像

Logo、圖像、圖標、背景這些元素決定了整個設計給人的情緒。所以在設計的時候，需要有針對性地挑選和優化。

3.1、關于 LOGO

我并不經常做 LOGO，但是在我的職業生涯中也起碼做過 20 個LOGO。我的經驗是：好 LOGO 很難制作。但是設計師只要遵循基本的原則，就能創建出像樣的 LOGO。

比如仔細選擇配色。我有一次看到一家名為 「VIP catch」 的釣魚用品店，他們使用了紫色的 LOGO，從名字、配色到色彩的選擇都和釣魚這個場景沒有一點關系。如果選對配色，有針對性地加入一些和釣魚相關的元素，其實也就好了。

另外就是，如果你時間有限，就不要試圖給品牌 LOGO 設計一個特定的符號或者圖形了，因為真的很難做好。最好制作成文本 LOGO，通過微調字體來制作。

3.2、陰影

元素下方的陰影一定不要用黑色。始終基于表層的、前景的元素來選取陰影的顏色和明暗。通常，一個看起來舒適的陰影是通過多個陰影疊加造就的，一個小且明確的陰影，位于正下方，另外一個陰影模糊且彌散，透明度更高。

3.3、圖標和圖像

任何可以矢量化的元素，都盡量制作成為矢量的。從符號、箭頭到 LOGO ，現在都最好制作成為矢量 SVG 格式，方便開發人員嵌入到設計系統當中。PNG 圖標的邊緣模糊，在清晰度越來越高的視網膜屏幕上，矢量圖形元素不僅更加銳利，而且消耗更少的系統資源。

如果你正在為網站處理一組圖標，請盡量確保這些圖標在視覺風格和細節處理上是統一的，看起來是同屬一個「家族」的。這意味著圖標的筆觸寬度、邊框半徑、視覺重量都應該是一樣的。

4、其他設計常識

除了上面的幾個常見的要點之外，我還要額外補充幾點，它們很難直接歸結為一類，但是同樣重要。

4.1、避免使用怪異的布局

很多 UI 界面元素在過去多年的發展過程中，已經形成了認知廣泛的「最佳實踐」。如果在設計這些 UI 組件的時候，采用打破甚至徹底違背「最佳實踐」的做法，比如將圖片+標題+ 文本 的順序打亂，可能會讓人感到迷惑。

熟悉的設計并不意味著無聊，你總能夠在 UI 界面的一些地方找到發揮創造力的地方，而不是在這些有著清晰規則的地方搞創新。設計師和藝術家是截然不同的職業，在設計過程中，創意沖動應該在不干擾用戶體驗的前提下，進行發揮。

4.2、布局尺寸和參數

在設計移動端 UI 界面之前，應該和開發人員進行充分的溝通，這一點很重要。iOS 和 Android 端的 APP 的尺寸還相對固定，但是如果你設計的是移動端的網頁，那么可能涉及到的頁面尺寸就非常多了，這個時候就要用到斷點非常多的網格系統來進行響應式的設計了。

4.3、亂數假文

Lorem Ipsum 在中文中叫亂數假文，它是自動生成的一種占位符。在如今的設計領域當中，直接使用亂數假文看起來非常不專業，因為無論是 Sketch 還是 Figma 當中都有太多的插件，可以幫你生成符合語境的占位符內容。在此基礎上還有另外一個要點，就是展示性的組件內容也不要簡單地復制，盡量使用不同的圖片和配色，讓它們看起來更加真實。

結語

這份UI快速檢查清單目前是比較符合當下 UI 設計行業的需求的，但是它并非是教條，在特定的情況下，你可能不用遵循它。當然，在多數時候，這份清單能夠幫你讓設計更加優秀。

文章來源：優設    作者：Anna Sh

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

之前我也無意中看到餓了么把「超級會員」改成了「吃貨卡」，感覺還不錯。雖然并不了解餓了么的會員業務，但這次改版體現了一些有趣的設計思路，正好對應了我們在設計上的疑惑點。于是就著該讀者的問題，一起來聊聊其中有意思的點。

比如，如何在同質化的功能上做出一些創新且有價值的改變；如何降低營銷感，把商業需求統一到用戶需求上；如何不需要再糾結今天到底吃什么了……

我們「以為」的，就是真實的嗎？

今天的文章，從一張圖開始。

在《認知與設計》的第一章里，作者提到了關于感知的話題，在影響感知的幾種方式里，第一種就是「感知的啟動」，其中很典型的案例是下面的一張素描，你能看出畫面中是什么嗎？

一條斑點狗。

或者你沒看出來？如果你看到了這只狗，就很難再回頭把這張素描看做隨機無序的點了。就像書里說的那樣，我們看到的很多東西取決于別人告訴我們它是什么。

產品功能也是如此，它告訴了我們這是什么，我們就會這么認為。如果一開始設計的就是吃貨卡，也許很多人不會想到它是會員的變體，而是僅僅當做一個福利卡來看了。對于超級會員和吃貨卡的感知差別僅僅在于定義上的不同，而非本質的改變，這是很有意思的一個點。

拿生活中的一個例子去看，相同的杯子，我們可以叫它咖啡杯，同樣也可以叫它養生杯，當面對不同的叫法時，我們是不是就會產生不同的代入感？

而產品大多數時候都是通過渲染場景、營造氛圍來達到這個目的，我們通常將其稱之為產品定位。

所以產品需要定位，需要一個鮮明的形象，然后讓產品中的所有信息、功能、風格、色彩都去表現它，才能樹立起用戶的認知，帶來深入人心的記憶點。于是，相同的功能在不同產品中的差異除了內容的填充、使用的方法、規則的定義外，還可以改變的就是 —— 包裝。

就餓了么這次改版的「吃貨卡」而言，它本身并非一個新功能，只是「超級會員」的一個變體，會員的本質就是產品根據用戶的投入而給予的特權。所以產品只是集合了這一部分有投入有特權的群體罷了，至于怎么稱呼，會員也好、吃貨也罷，在產品層面都是一樣的。

會員，官方的解釋是：通過正式手續加入某個會社或專業組織的人。

在任何地方，我們都可以成為會員，但不是任何地方，我們都能變成吃貨。所以吃貨卡這個定義，一下子就把強烈的產品屬性透傳了出來，并聯結了我們的目標用戶，會員的「積分」也自然地轉化成了「吃貨豆」，這種概念上的改變，就是一種包裝。

這是我在這篇文章中要聊的第一個點，就是通過品牌塑造來重新包裝一個功能，而包裝的形式要依附于產品定位。

第二大點，我們來聊營銷廣告與產品功能的碰撞。

在廣告濫用和形式多變的今天，我們已經逐漸習慣至無感那些具有豐富色彩和設計元素的廣告內容，以至于可以自動篩選出它們，打上標簽，從我們的視覺中過濾出去。

但總有一些廣告似乎天生具有一種隱秘的商人氣質，帶著精明的窺探，去誘導大家瀏覽、點擊、分享、消費。

廣告是產品的一種營銷語言，而營銷有時就是讓利，以廣告的形式，通過優惠與福利來抓住用戶的心，而用戶往往會認為這是欺騙。那么當商業目標和用戶目標無法趨于一致的時候，我們又該如何讓用戶為產品站臺呢？

首先，對于廣告的刻板印象常源自我們接觸廣告的失敗經驗，其大致可分為三類。

第一類「虛假利益」?？浯蠛锰?，或拿非最終的利益引誘，直到我們了解了詳情才發現自己是個被騙的傻瓜。

于是，產品通過弱化營銷性的信息流廣告，并加上清晰的廣告標簽，公開透明的讓用戶感受到自己被平等地尊重，即滿足商業利益，又解決了用戶的訴求問題，將兩者利益統一。

但這一類并不是我們今天要聊的重點，我們繼續往下看。

第二類「難度操作」，比如那些假的關閉圖標、廣告背景中極小的跳過按鈕、或者在領取福利時的層層步驟，都是用戶在接觸廣告時難度操作的體現。

前兩種對用戶來說無法原諒，而最后一種往往會作為一種營銷策略，去增加用戶獲得獎勵前對產品的投入，比如瀏覽、轉發、消費等，這是沒有問題的，關鍵是用戶是否提前獲知了我們得到獎勵的所有條件。我們厭惡的，是超出我們預期的那些負擔任務。

吃貨卡的任務模塊在優化后就直接展示了任務詳情。但是首頁領任務的提示卻隱藏了任務的重要條件，比如「下 2 單，賺 400 吃貨豆」，實際是兩筆超 20 元的訂單。那是否會存在一類用戶，沒有點擊查看詳情而直接下單，下單之后，發現并沒有完成進度？因為外賣費用沒有超過 20 元。

如果產品是擔心用戶因為 20 元的門檻而不做任務，那么在點擊查看后的任務詳情不是把這一類用戶推向進一步的否定嗎？我們因這樣的手段能夠額外獲得多少增長，同時，又有多少用戶因此對所有的任務失去信任，我們無法準確計算，因為得到是顯性的，而失去是隱性的。比如一些音樂產品的會員機制，用戶辦理好之后想聽某首歌，發現還需要另外再付費，于是卸載了軟件。

另外，改版后吃貨豆的領取方式也對應發生了改變，不是直接的發放，而是轉為點擊領取。

雖然趣味的動效消解了部分用戶對冗余操作的厭惡感，但還是能從反饋渠道中看到用戶對這種強制限時去領取獎勵做法的反感。這種領取模式也可說是一種變相簽到，只不過這種簽到的獎勵不是你通過額外行為主動賺取的，而是在已經得到的情況下被迫操作領取，和支付寶領取積分的方式一樣。限定時間內不領取，還會消失。

游戲積分的領取，之所以有領取操作，是因為積分積攢的寶箱獎勵，是額外的收獲。玩家玩游戲的目的是體驗游戲而不是為了積分與寶箱，這兩者之間是有差異的。

多余的操作看起來增加了頁面的曝光度，帶來了更多的轉化可能，卻「實在」地提高了用戶獲得獎勵的成本，從而間接降低了獎勵的價值，因為投入產出比太低，所以用戶常常寧愿放棄這樣的獎勵。

產品想要讓用戶感覺到方便和實惠，體驗滿意，但又通過這種點擊才能領取的方式，強制綁定用戶與頁面，來觸發用戶的下一步行動。表面上可玩性增強了，實則是體驗感的缺失。

第三類是關于「過度選擇」。交互設計有一本經典的入門書籍叫《Don’t make me think》，描述了如何通過設計幫助用戶理解與操作，來提高產品的易用性。同理，當我們思考營銷在產品中的表現時，難道就不需要考慮用戶了么？

過去的營銷就像過去的產品一樣，以產品實現而非用戶為中心，表現產品的實現方式而不去考慮用戶的心理模型。

比如軟件需要我們命名才能保存，特別是系統自帶的記事本軟件，不僅需要自己輸入文件名，還用 *txt 占了命名位，使用星號讓我們無法直接保存。相比之下，很多軟件已不再需要用戶命名，會直接提供默認命名，還有像 Typora 這類產品，可以自動將我們的第一段文本內容作為默認文件名。

對營銷而言，以實現為中心的設計想法體現在制造了盡可能多的活動類型和規則上，希望觸達不同的用戶。而事實是，在過度選擇的壓力下，很多用戶直接選擇了忽視。

如果去看餓了么會員舊版的設計，我們會發現它有紅包、獎勵金和折扣商品三類福利，三者的關系是相對分離的。

其中的規則是，當我們成為了會員：

• 可以直接領取紅包；
• 可以通過消費得到獎勵金，再去兌換紅包；
• 可以直接低價購買紅包；
• 折扣商品與紅包無關，只展示優惠價格，可直接購買。

所以我們有三種獲得紅包的途徑：領取、購買、兌換。

再看新版吃貨卡的設計，在直接領取與購買紅包不變之外，新版強調以用戶的消費去獲得獎勵，不管是直接兌換紅包或者兌換店鋪的專屬紅包，都是以吃貨豆兌換為核心。相比舊版，將商鋪折扣商品，替換為吃貨豆兌換專項紅包，其實本質是一樣的，無非就是為了提高吃貨豆與吃貨卡的利用率罷了。

在這樣一個前提下，產品增加了紅包類別，給予了用戶更多選擇的自由。雖然隨著紅包的分類維度變多（專享和吃貨聯盟的紅包、特定品牌和分類的紅包、具體店鋪的紅包），產品的規則趨向復雜，但是理解變簡單了，我們也只需要做好兌換這一件事就可以。

復雜的規則仍然可以呈現出簡明的設計，我們不需要用戶來負責過濾這些復雜信息，而應當要求產品，站在用戶這邊，去降低理解成本。自然地，產品與用戶就能并軌而走，商業需求與用戶需求也可統一。

當然，或許也會有用戶反感這樣的功能被活動化，但不得不說，這確實是一個品牌的升級。

這篇文章從幾個角度聊了「吃貨卡」好與不好的地方。

當然它不僅僅是一個會員功能的改版，在概念玩法上也是一種升級。從設計角度看，確實有創意的表現，雖然也有不可取之處，但是它背后的設計思考是值得學習的。

我們知道，設計雖然會受到許多框架和規則的限制，但從問題出發，思考方案的過程才是設計本身最有意思的地方。好比游戲，也是因為規則與框架的限制，以至于才有了如今豐富多彩的游戲形態。

所以即使看向那些常規的功能和成熟的設計，我們也可以融入一些不一樣的東西，站在過去到現在的經驗上，再做出一點改變，使其更具可玩性。

文章來源：優設    作者：呆呆U理

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務