大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法，了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。本文介紹了十一條有效的設(shè)計(jì)準(zhǔn)則，用形象的圖解幫助讀者更好地理解設(shè)計(jì)準(zhǔn)則在設(shè)計(jì)工作中的運(yùn)用，幫助你利用這些方法更快捷地開展設(shè)計(jì)。適合關(guān)注產(chǎn)品設(shè)計(jì)的小伙伴閱讀。
感知力是大腦將不同的信息連接和組織成一個(gè)連貫整體的機(jī)制。例如我們將相似的對(duì)象分組并連接起來，能夠輕松地區(qū)分出不屬于該組的對(duì)象。
大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法，了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。
在UI設(shè)計(jì)時(shí)，我們應(yīng)該有意識(shí)地運(yùn)用感知力，用足夠的事實(shí)來驗(yàn)證設(shè)計(jì)，有依有據(jù)地解釋為什么這個(gè)圖形元素要這樣設(shè)計(jì)？背后的原因是什么？
提升感知力有助于清晰地解釋設(shè)計(jì)方案，避免常見的設(shè)計(jì)錯(cuò)誤，引導(dǎo)我們將設(shè)計(jì)做得更好、更容易理解！
彼此靠近的元素會(huì)被自動(dòng)理解為一組。把它們的位置放得更遠(yuǎn)，會(huì)給人一種這些元素是完全獨(dú)立的個(gè)體的印象。
在UI設(shè)計(jì)中，可以利用鄰近原則將相似的界面元素組合在一起，把控總體布局。
鄰近規(guī)則適用于主導(dǎo)航、卡片、按鈕、內(nèi)容和圖標(biāo)等。我們還可以使用適當(dāng)?shù)牧舭讓⒉煌脑剡M(jìn)一步分開，創(chuàng)建一個(gè)層級(jí)更清晰的界面結(jié)構(gòu)，以此來幫助用戶瀏覽和理解不同類型的信息。
鄰近原則是直接影響界面可用性的基本規(guī)則之一。如果隨意控制元素的位置和間距，有可能會(huì)讓整個(gè)產(chǎn)品變得混亂和難以理解。
視覺上相似的元素會(huì)被視為同一組，視覺上不同的元素，大腦會(huì)下意識(shí)將其視為單獨(dú)的元素。
利用相似性可以來定義界面的特征，例如顏色、形狀、尺寸、紋理或空間位置等。最容易區(qū)分的是顏色相似，其次是尺寸和形狀相似。
如果一個(gè)元素和界面中其他的元素都不同，無法融入到其他元素組中，那么這個(gè)元素就會(huì)變得非常顯眼。
我們可以利用這種差異化的效果來突出一些具有引導(dǎo)性或者功能性的元素，例如登錄按鈕或者加入購(gòu)物車按鈕等。
一組不相連的元素組合在一起，我們會(huì)下意識(shí)地自動(dòng)補(bǔ)充這些元素之間的空白，得到一個(gè)完整的、可識(shí)別的形狀。
閉合原則有多種不同的用法。例如一個(gè)虛線箭頭，我們會(huì)填補(bǔ)空白并把這些點(diǎn)連接在一起，得到一條完整的線段。
閉合原則還有助于識(shí)別抽象的圖標(biāo)形狀并賦予更多的含義。在圖標(biāo)設(shè)計(jì)中，為了避免信息過載，大多數(shù)圖標(biāo)的設(shè)計(jì)都很簡(jiǎn)潔，更方便用戶理解。
運(yùn)用閉合原則的經(jīng)典案例包括用不同虛線構(gòu)成的IBM標(biāo)志、利用正負(fù)形空間組合而成的WWF熊貓標(biāo)志。
UI界面中的元素一旦有對(duì)稱性，就會(huì)產(chǎn)生秩序感，我們很快就能看到并理解這種形式。
我們天生喜歡對(duì)稱的物體。對(duì)稱排列的元素在視覺上更令人舒服，也更美觀。
可能有人覺得對(duì)稱設(shè)計(jì)過于呆板，這種想法在平面廣告或視覺設(shè)計(jì)中可能正確，但在UI設(shè)計(jì)中對(duì)稱布局是相當(dāng)重要且實(shí)用的界面排版形式。
對(duì)稱布局讓設(shè)計(jì)更容易理解，也更友好，缺乏對(duì)稱會(huì)導(dǎo)致界面混亂，不知道該關(guān)注哪個(gè)元素。當(dāng)然，如果想讓某個(gè)模塊突出展示，也可以嘗試打破對(duì)稱性，這樣不對(duì)稱的元素就能在界面中脫穎而出。
界面中沿著同一條線對(duì)齊的元素會(huì)被認(rèn)為屬于同一組。
在瀏覽界面時(shí)，視線會(huì)第一時(shí)間尋找最順暢的視覺動(dòng)線。這也解釋了為什么在使用連續(xù)性原則時(shí)，需要確保直線(或曲線)是均勻和可預(yù)測(cè)的。
線條越均勻，生成的形狀越容易被用戶正確識(shí)別。
連續(xù)性有助于界面保持上下垂直滾動(dòng)時(shí)的節(jié)奏，相似的內(nèi)容應(yīng)始終保持對(duì)齊。如果某個(gè)元素打破了這種連續(xù)性，我們的瀏覽節(jié)奏會(huì)被打亂，瀏覽速度也會(huì)變慢。
當(dāng)下的UI設(shè)計(jì)中，流行帶有圓角的卡片和按鈕效果。其中的一個(gè)原因是我們對(duì)于直角的處理速度稍慢，視線需要停頓并旋轉(zhuǎn)90度，而更圓滑的導(dǎo)角效果能幫助我們的視線更快地轉(zhuǎn)換。
按相同方向、以相同速度運(yùn)動(dòng)的元素被認(rèn)為是一組。
在設(shè)計(jì)輪播、下拉列表、過渡動(dòng)畫等場(chǎng)景時(shí)，共同命運(yùn)原則會(huì)很有幫助。例如我們的視線既跟隨輪播圖水平移動(dòng)，還跟隨下拉列表向下展開。
根據(jù)?？硕?，可供的選擇數(shù)量應(yīng)該有限制。有太多東西可供選擇可能會(huì)導(dǎo)致用戶迷失方向，做出判斷的時(shí)間加長(zhǎng)，甚至?xí)械綁毫Α?/p>
米勒定律提到，大腦處理信息的能力與認(rèn)知負(fù)荷有直接的關(guān)系。我們大腦一次能處理的信息量大約是7個(gè)對(duì)象。對(duì)象數(shù)量越多，處理它們所需的時(shí)間就越長(zhǎng)。
在設(shè)計(jì)時(shí)，盡量不要超過七個(gè)選項(xiàng)，為了獲得最好的體驗(yàn)，應(yīng)盡量將選項(xiàng)保持在4-5個(gè)。這意味著需要控制主導(dǎo)航數(shù)量、按鈕數(shù)量、下拉選項(xiàng)和輪播圖數(shù)量等。
當(dāng)需要用戶做選擇時(shí)，最好能突出顯示最受歡迎或最推薦的選項(xiàng)，幫助用戶更快做出決策。
我們能夠本能地區(qū)分界面中的圖形元素和背景。
界面由不同類型和樣式的圖層組成，每個(gè)圖層都有不同的層次結(jié)構(gòu)。
為了避免層次結(jié)構(gòu)混淆，我們需要清楚地定義界面的所有元素。背景不需要設(shè)計(jì)設(shè)計(jì)的太花哨，有可能會(huì)搶奪用戶對(duì)主要內(nèi)容的注意力。
輔助內(nèi)容和功能不需要太明顯，并且需要與主要內(nèi)容在設(shè)計(jì)上做出區(qū)分。
可以使用對(duì)比關(guān)系、位置關(guān)系和陰影等方法幫助用戶區(qū)分內(nèi)容和背景。
用戶通常認(rèn)為具有視覺吸引力(美觀)的產(chǎn)品更實(shí)用。
根據(jù)這個(gè)原則，流行、對(duì)稱、美觀的界面會(huì)對(duì)用戶產(chǎn)生更積極的影響。如果視覺效果給人足夠好的第一印象，用戶可能會(huì)忽略一些可用性問題。
審美可用性的基礎(chǔ)在于具有一定的可用性，之后才會(huì)起作用。如果產(chǎn)品本身的功能就很糟糕，那么再美觀的界面也無濟(jì)于事。
高質(zhì)量、美觀的界面有助于建立用戶信任。相反一個(gè)看起來混亂的設(shè)計(jì)會(huì)讓用戶感到不靠譜。即使用戶不能確切說出界面視覺的問題，但他們也會(huì)覺得這個(gè)產(chǎn)品有風(fēng)險(xiǎn)或者不正規(guī)。
高質(zhì)量的UI設(shè)計(jì)對(duì)于銀行類、金融類和醫(yī)療類產(chǎn)品來說尤為重要，尤其是在需要用戶提供個(gè)人信息或涉及交易的使用場(chǎng)景中。
我們最容易記住一組當(dāng)中的第一個(gè)和最后一個(gè)元素。
將最重要的內(nèi)容或元素放在每組的第一個(gè)或最后一個(gè)，吸引用戶注意力，方便高頻操作。而次要的內(nèi)容操作頻率相對(duì)較低，則放到中間位置。
例如在構(gòu)建導(dǎo)航、下拉列表等場(chǎng)景中，將重要的操作放到首位。
在一組看起來相似的元素中，我們總是會(huì)記住與其余元素不匹配的那個(gè)元素。
在UI設(shè)計(jì)中，隔離效應(yīng)意味著將界面中重要的內(nèi)容或關(guān)鍵的操作在視覺上與眾不同。
最典型案例是界面中的CTA(號(hào)召性用語)按鈕。通過改變CTA按鈕的顏色、尺寸等，與界面中的其他按鈕區(qū)分開來，第一時(shí)間引起用戶的注意。
專欄作家
作者：Clippp，每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
這次全面的改版，針對(duì)UI與UE不統(tǒng)一的問題，邁出了關(guān)鍵的一步——首次構(gòu)建組件庫(kù)
盡管在初期階段，面臨諸多挑戰(zhàn)和困難，但堅(jiān)持不懈的努力使得組件庫(kù)逐漸成形。組件庫(kù)基本完善后，對(duì)工作效率的提升效果簡(jiǎn)直令人興奮。組件的靈活變體和自動(dòng)化的布局功能，不僅極大地提升了設(shè)計(jì)效率，也確保了界面的一致性和用戶體驗(yàn)的連貫性。這一嘗試不僅解決了我們面臨的問題，更為未來的設(shè)計(jì)和開發(fā)工作奠定了堅(jiān)實(shí)的基礎(chǔ)，期待未來更多的挑戰(zhàn)與進(jìn)步。
判斷 UI 設(shè)計(jì)公司的收費(fèi)是否合理，可以從以下多個(gè)方面著手：
考量設(shè)計(jì)公司的專業(yè)水平與資質(zhì)
團(tuán)隊(duì)專業(yè)背景：查看設(shè)計(jì)團(tuán)隊(duì)成員的學(xué)歷、畢業(yè)院校以及所學(xué)專業(yè)等情況，若團(tuán)隊(duì)成員大多來自知名設(shè)計(jì)院校，具備扎實(shí)的專業(yè)基礎(chǔ)，例如有專業(yè)的視覺傳達(dá)、交互設(shè)計(jì)等相關(guān)專業(yè)背景，往往意味著能產(chǎn)出高質(zhì)量的設(shè)計(jì)成果，相應(yīng)收費(fèi)可能會(huì)偏高，但也更具合理性。
行業(yè)經(jīng)驗(yàn)：了解其在 UI 設(shè)計(jì)領(lǐng)域的從業(yè)年限以及過往參與過的項(xiàng)目類型和數(shù)量。有豐富行業(yè)經(jīng)驗(yàn)的公司，經(jīng)歷過各種不同客戶需求和復(fù)雜項(xiàng)目的打磨，在處理問題、把握設(shè)計(jì)方向上更有優(yōu)勢(shì)，對(duì)于復(fù)雜項(xiàng)目合理收取較高費(fèi)用是正常的，比如長(zhǎng)期服務(wù)大型企業(yè)、完成過多個(gè)行業(yè)標(biāo)桿性 UI 設(shè)計(jì)項(xiàng)目的公司，其報(bào)價(jià)高些可能是基于深厚的實(shí)踐積累。
所獲榮譽(yù)與資質(zhì)認(rèn)證：關(guān)注該公司是否獲得過一些權(quán)威的 UI 設(shè)計(jì)相關(guān)獎(jiǎng)項(xiàng)，或者具備如紅點(diǎn)獎(jiǎng)等。這些榮譽(yù)和認(rèn)證是對(duì)其設(shè)計(jì)實(shí)力與服務(wù)質(zhì)量的一種認(rèn)可，收費(fèi)相對(duì)高些如果匹配其專業(yè)形象，也是合理的體現(xiàn)。
蘭亭妙微一直秉持著 “設(shè)計(jì)優(yōu)秀，不斷超越” 的理念。誠(chéng)信敬業(yè)、專業(yè)耐心是他們工作作風(fēng)的真實(shí)寫照。在設(shè)計(jì)服務(wù)方面，他們不斷創(chuàng)新，與時(shí)俱進(jìn)。公司深知，只有幫助企業(yè)提升軟件和互聯(lián)網(wǎng)產(chǎn)品的界面設(shè)計(jì)水平，進(jìn)行開發(fā)升級(jí)，才能為企業(yè)帶來更多的價(jià)值。
設(shè)計(jì)的審美大多數(shù)是依照市場(chǎng)的改變而變化的，市場(chǎng)選擇的東西要試著去相信，可以參考，不表示要一比一的模仿，加入自己的想法和理解，也許能有新的東西出來。接到委托之后先具體化的溝通，理解需求，復(fù)述你的理解，讓對(duì)方同屏，之后再進(jìn)行更具體的論述，能減少之后的許多麻煩。
藍(lán)藍(lán)設(shè)計(jì)( www.kadanni.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前言
15年開始，紅包大戰(zhàn)占據(jù)了春節(jié)營(yíng)銷的重要位置，各家互聯(lián)網(wǎng)平臺(tái)紛紛“發(fā)錢”搶占用戶，紅包總額曾在2021年一度達(dá)到120億元的峰值。不過近兩年開始，過往簡(jiǎn)單粗放的紅包大戰(zhàn)逐漸失去熱度。平臺(tái)不再追求短時(shí)間用戶增長(zhǎng)，這次春節(jié)活動(dòng)就是百度FEED年底以運(yùn)營(yíng)手段打造的內(nèi)容營(yíng)銷活動(dòng)。設(shè)計(jì)團(tuán)隊(duì)以“有福氣 趣新春”為主題提出了內(nèi)容場(chǎng)景化的營(yíng)銷策略，整體圍繞如何把“內(nèi)容做的有趣”來分享設(shè)計(jì)思路。
一、心智建立內(nèi)容護(hù)城河
1、心智占領(lǐng)：
提到內(nèi)容營(yíng)銷，先不說老掉牙的腦白金、可口可樂。我們先說說產(chǎn)品和用戶的關(guān)系。我們通過各大平臺(tái)的定位，提供了信任背書，但產(chǎn)品只是流量的承載地，最終讓目標(biāo)用戶到達(dá)目的地的還是我們的品牌、內(nèi)容、形象。所以我們?cè)谧鰞?nèi)容營(yíng)銷活動(dòng)的時(shí)候，究竟應(yīng)該怎么做？
2、你的產(chǎn)品容易記住么？
海的味道你知道，是波力海苔。提到藍(lán)瓶的鈣，腦海會(huì)浮現(xiàn)產(chǎn)品的藍(lán)色包裝。說到這里，我們就明白了，內(nèi)容營(yíng)銷的核心是圖形和口號(hào)。營(yíng)銷活動(dòng)的核心是品牌符號(hào)和Slogan。
品牌符號(hào)拆解
以春節(jié)項(xiàng)目舉例，提取中國(guó)傳統(tǒng)團(tuán)扇形，象征著大團(tuán)圓。引申為家家戶戶的心愿，全家團(tuán)圓、福氣滿滿。以FEED產(chǎn)品愿景「看更多有趣有用的內(nèi)容」為使,結(jié)合「新年要有福氣」的新年祝福，推出品牌Slogan【有福氣·趣新春】的活動(dòng)理念，開啟活動(dòng)篇章。
有了主要的符號(hào)傳達(dá)，其它輔助元素的提取從桂花造型和錢幣上做了簡(jiǎn)化，寓意吉祥富貴財(cái)源滾滾，應(yīng)用在頁面細(xì)節(jié)裝飾中。
用顏色表達(dá)個(gè)性
提起品牌符號(hào)，我們首先想到的可能是 Logo，但有些時(shí)候色彩卻是第一印象。春節(jié)是中國(guó)傳統(tǒng)文化的傳承。因此嘗試從中國(guó)傳統(tǒng)色彩體系中象征“福氣、福來、富貴”的海棠紅作為會(huì)場(chǎng)主顏色。
為了更好的區(qū)分內(nèi)容場(chǎng)景以及增加色彩豐富度，受到“一年四季輪回”的啟發(fā)，延伸品牌輔助色。一年的圓滿在于四季的圓滿，在色彩表現(xiàn)上，從春到人間萬物鮮到春雪滿空；對(duì)應(yīng)綠、紅、黃、藍(lán)給人煥然新生的視覺感受。
用字體豐富品牌基因
字體，不僅可以指代文字內(nèi)容含義和字形美學(xué)價(jià)值，還能透過字體設(shè)計(jì)的初衷洞察到品牌濃縮其中的理念和哲學(xué)。利用彎曲讓作品動(dòng)感有張力。利用圓角處理增加趣味性，呼應(yīng)“有趣”的品牌理念。用傾斜的樣式營(yíng)造出視覺張力，形成視覺焦點(diǎn)。
3、洞察產(chǎn)品的「生命力」
定形象-品牌基因的獨(dú)特形象
角色、品牌、用戶必須是一個(gè)標(biāo)簽，清晰可見。以IP角色與用戶互動(dòng)溝通，建立信任關(guān)系，擁有獨(dú)立人格和魅力。通過更具人格化的形象，使品牌變得更溫暖。本次活動(dòng)的主IP，在設(shè)定上采用FEED字母演變不同性格IP角色，作為不同維度的形象代表，豐富B/C端的內(nèi)容場(chǎng)景。
情感鏈接-圍繞人設(shè)講故事
如何通過「IP角色」讓用戶對(duì)產(chǎn)品產(chǎn)生情感呢？首先賦予他們性格，他們分別是福氣、財(cái)富、快樂和有趣的化身。為用戶帶來財(cái)、富、樂、趣是他們的責(zé)任。IP的人格化能很好的與用戶建立品牌好感度。同時(shí)「持續(xù)曝光+情感鏈接」的品牌策略，在活動(dòng)中貫穿內(nèi)容場(chǎng)景、物料推廣、分享轉(zhuǎn)發(fā)等，反復(fù)強(qiáng)調(diào)品牌。
二、你的差異點(diǎn)是什么？
1、化繁為簡(jiǎn)，強(qiáng)化內(nèi)容
由于春節(jié)活動(dòng)周期長(zhǎng)、內(nèi)容多的特點(diǎn)，使得頁面呈現(xiàn)龐大復(fù)雜，會(huì)造成用戶的理解成本影響留存，因此把內(nèi)容有效呈現(xiàn)、提升屏效、優(yōu)化體驗(yàn)路徑是交互的重點(diǎn)。我們通過“框架分層”“減少活動(dòng)步長(zhǎng)”對(duì)所有活動(dòng)進(jìn)行了框架升級(jí)。提升活動(dòng)易用性，讓用戶快速參與活動(dòng)。在設(shè)計(jì)表達(dá)上簡(jiǎn)化頭圖背景，讓用戶聚焦場(chǎng)景，引入內(nèi)容。
2、創(chuàng)意場(chǎng)景，引爆內(nèi)容
洞察設(shè)計(jì)策略
百度FEED不同于其他矩陣，我們的產(chǎn)品內(nèi)核是“內(nèi)容”；作為春節(jié)活動(dòng)，濃濃的“年味”是活動(dòng)外核。如果只去介紹我們自己產(chǎn)品的功能、種種好處，這種干巴巴的內(nèi)容無法在這個(gè)時(shí)代獲得關(guān)注和認(rèn)同，因?yàn)闊o法與用戶建立切身聯(lián)系。所以在不同層次的內(nèi)容上，我們可以通過故事化、場(chǎng)景化來把內(nèi)容做的更有趣，最終實(shí)現(xiàn)業(yè)務(wù)互動(dòng)轉(zhuǎn)化提升。
年俗互動(dòng)-故事型敘述 增強(qiáng)產(chǎn)品代入感
抓住用戶情緒洞察，采用年俗的理念打造場(chǎng)景，營(yíng)造用戶代入感。在視覺表現(xiàn)上，根據(jù)時(shí)間推移，場(chǎng)景也隨之變化；以回家團(tuán)圓吃年夜飯、到走親訪友云拜年、看煙花賞燈會(huì)，實(shí)現(xiàn)了場(chǎng)景從年三十到十五的視覺呈現(xiàn)，釋放出情緒共感的疊加效應(yīng)。引發(fā)用戶“過年”的心理共鳴。
場(chǎng)景設(shè)定
場(chǎng)景一：花樣團(tuán)圓飯。圍繞“三十吃餃子”的年俗為主要點(diǎn)切入，通過具象的關(guān)鍵詞構(gòu)思場(chǎng)景，結(jié)合品牌符號(hào)，融入中國(guó)風(fēng)建筑表達(dá)“家”，并將餃子、房子、人的比例重構(gòu)，增加畫面沖擊力，在配色上摒棄大面積的紅黃配色，加入蔻梢綠和淡曙紅作為輔色，為整體添加了一絲春天的氣息。
場(chǎng)景二：神評(píng)云拜年，發(fā)評(píng)送好禮。圍繞“云拜年”的年俗為主要點(diǎn)切入，過年的時(shí)候拜年是人們辭舊迎新、互相表達(dá)祝愿的一種方式。創(chuàng)意表達(dá)上，除了沿襲以往“登門”的拜年方式外，在畫面表現(xiàn)上加入代表新興禮儀“云拜年”的概念，讓視覺吸引眼球，同時(shí)又很接地氣。
場(chǎng)景三：猜燈謎送吉祥。以元宵賞燈會(huì)的年俗為切入點(diǎn)，夜色旖旎，花燈璀璨，在一片流光溢彩之下，鬧元宵、賞花燈、迎新春。"玉兔東升、鯤鵬萬里”，用最美好的祝福為用戶開啟新年新篇章。
人文互動(dòng)-內(nèi)容聯(lián)想 強(qiáng)化產(chǎn)品特點(diǎn)
我們?yōu)槭裁匆研〗M內(nèi)容關(guān)聯(lián)到人文上？我們需要給產(chǎn)品定義一個(gè)標(biāo)簽，讓內(nèi)容進(jìn)入一個(gè)優(yōu)勢(shì)的心智賽道，用設(shè)計(jì)手段具像化演繹出來，讓目標(biāo)用戶最快對(duì)號(hào)入座，提升產(chǎn)品的認(rèn)知效率。而人文包羅萬象，與小組內(nèi)容分類不謀而合。
內(nèi)容聯(lián)想
在視覺表現(xiàn)上，圍繞“小組發(fā)布內(nèi)容”的類比聯(lián)想，場(chǎng)景選取攝影、養(yǎng)花、命理、詩詞、鄉(xiāng)村等七大不同人文場(chǎng)景，著力刻畫“小組內(nèi)容”強(qiáng)關(guān)聯(lián)的人文元素，以此映射產(chǎn)品的特點(diǎn)，激發(fā)用戶參與意愿。借助想象放大或夸張內(nèi)容特征，更鮮明的強(qiáng)調(diào)內(nèi)容本質(zhì)。
3、豐富體驗(yàn)
為了維護(hù)用戶粘性，讓用戶每天都來“玩”。加入2級(jí)活動(dòng)，用“獎(jiǎng)勵(lì)”“成就”“抽簽”形成驅(qū)動(dòng)用戶雷達(dá)地圖，多維度持續(xù)牽引，增強(qiáng)互動(dòng)體驗(yàn)。
如何讓用戶玩下去？
【抽簽活動(dòng)-新年福氣簽】
活動(dòng)玩法：用戶每天進(jìn)入活動(dòng)可抽福氣簽，隨機(jī)發(fā)放簽文以及紅包獎(jiǎng)勵(lì)，中獎(jiǎng)+祝福的滿足感驅(qū)動(dòng)用戶回流。
洞察&創(chuàng)意
新的一年，人們對(duì)美好生活都有向往和期盼，“討彩頭”是每位用戶對(duì)生活的新追求。在活動(dòng)的設(shè)計(jì)上要吉祥滿滿，自帶好彩頭。用福袋作為容器承載簽文，以抽幸運(yùn)球、得獎(jiǎng)勵(lì)贏福氣作為情感驅(qū)動(dòng)，刺激用戶玩下去。
在簽文設(shè)定上用團(tuán)扇的品牌符號(hào)作為基礎(chǔ)形狀，加持“祥云”“吉祥話”讓活動(dòng)不止驚喜，更是平臺(tái)對(duì)用戶的祝愿。
如何讓用戶“回來”玩？
【激勵(lì)玩法-我的成就】
洞察&創(chuàng)意
在成就玩法中，勛章作為精神激勵(lì)直接授予用戶，提升用戶在活動(dòng)內(nèi)的成就感和價(jià)值。另一方面，勛章也作為主活動(dòng)物質(zhì)激勵(lì)的間接載體，用戶通過解鎖勛章來獲得終極大獎(jiǎng)。從設(shè)計(jì)角度，采用三維立體視覺風(fēng)格，結(jié)合IP形象，使勛章更年輕有趣，讓用戶形成記憶點(diǎn)。強(qiáng)化視覺沖擊，滿足用戶的成就感和榮譽(yù)感，刺激用戶回流和分享。
驚喜彩蛋，拉升互動(dòng)體驗(yàn)
除了視效的打磨外，營(yíng)造“驚喜感”是在體驗(yàn)中非常重要的一環(huán)。無論是抽獎(jiǎng)還是成就，除了在視覺上有抽獎(jiǎng)的儀式感。在活動(dòng)中增加互動(dòng)彩蛋，用戶在投票以及點(diǎn)贊后會(huì)有對(duì)應(yīng)的動(dòng)效，讓整體體驗(yàn)更加細(xì)膩。
精彩視頻，點(diǎn)擊可看
結(jié)語
總結(jié)一下本篇文章關(guān)于內(nèi)容場(chǎng)景化營(yíng)銷的設(shè)計(jì)要點(diǎn)：
心智占領(lǐng)：前置化思考品牌打法，從品牌符號(hào)、Slogan、色彩基因、字體設(shè)計(jì)到IP的設(shè)定，全鏈路反復(fù)強(qiáng)調(diào)品牌。
設(shè)計(jì)創(chuàng)意：用故事性、場(chǎng)景化演繹設(shè)計(jì)創(chuàng)意，差異化視覺呈現(xiàn)。
互動(dòng)體驗(yàn)：用“驚喜感”拉升互動(dòng)體驗(yàn)。
希望以上的設(shè)計(jì)思考，可以給大家一些啟發(fā)。
藍(lán)藍(lán)設(shè)計(jì)( www.kadanni.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
。
WWDC22 全球開發(fā)者大會(huì)結(jié)束，有太多小眾產(chǎn)品脫穎而出。無形中有一股巨大的力量，在慢慢崛起，那便是來自世界各地的小型開發(fā)團(tuán)隊(duì)和獨(dú)立開發(fā)者。他們的產(chǎn)品小而美，小到僅靠一個(gè)功能撐起產(chǎn)品，美到完全忘記這是工具產(chǎn)品。那么具體都有哪些產(chǎn)品細(xì)節(jié)，不妨聽我細(xì)細(xì)道來～
其中，我精挑細(xì)選出一個(gè)海外和三個(gè)國(guó)區(qū)優(yōu)秀產(chǎn)品進(jìn)行產(chǎn)品設(shè)計(jì)細(xì)節(jié)分析，一探小眾產(chǎn)品究竟好在哪里！
（專注面條 - 輕松重獲專注力）2022年Apple設(shè)計(jì)大獎(jiǎng)入圍名單之一
（謎底時(shí)鐘 - 讓時(shí)間看得見）2022年Apple設(shè)計(jì)大獎(jiǎng)入圍名單之一
（Waterllama - 開啟喝水時(shí)間）2022年Apple設(shè)計(jì)大獎(jiǎng)入圍名單之一
（OffScreen - 自律番茄鐘，不做手機(jī)控）Apple Store精品推薦64次
排名不分先后，從以上幾款產(chǎn)品logo中可以看出產(chǎn)品之間設(shè)計(jì)風(fēng)格基本不一樣，不存在借鑒抄襲，各自都在細(xì)分領(lǐng)域深耕播種。
也正是因?yàn)殚_發(fā)者的敬業(yè)、精益、專注、創(chuàng)新的“工匠精神”，才能讓產(chǎn)品突出重圍，優(yōu)秀的呈現(xiàn)在用戶面前使用。
Slogan：專注，可以做出一碗好面條。
你以為這只是讓人做泡面的App！那就錯(cuò)了。這是用“煮一碗好面條是需要時(shí)間的”為理念，讓用戶專注工作，類似番茄工作法。
有趣的是，這款效率工具被插畫元素完美包裹起來，一點(diǎn)感受不到工具給人帶來的疏遠(yuǎn)感。相反，極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。
正因這上乘的設(shè)計(jì)質(zhì)感，《專注面條》曾數(shù)次登上 App Store 推薦頁，至今收獲 7000+ 個(gè)評(píng)價(jià)、4.9 的評(píng)分。
想象一下你正在烹飪一碗面條。
在烹飪時(shí)間結(jié)束前．不要試圖拿起你的手機(jī)，這樣會(huì)讓水蒸汽流失，面條就不好吃了。日后，你可以使用專注面條完成你希望專注的任何事情。
它把工作比喻成煮面，煮面要專心，把控火候，合適時(shí)間放入主料和調(diào)料；工作同樣要專心，遵循自己的方法論，把每個(gè)步驟和流程都執(zhí)行到位。工作完成了，一碗面也就煮好了。
專注力在哪里，效率就在哪里。
「專注面條」希望輔助你以一種詼諧有趣的方式，重獲這個(gè)時(shí)代最稀缺的專注力。放下你的手機(jī)，煮一碗面，我們一起對(duì)抗手機(jī)成癮！
時(shí)間一到，你的面條就做好了，你也完成了一次有意義的專注。
打破常規(guī)，不用系統(tǒng)默認(rèn)蘋方字體，而是選擇手寫體風(fēng)格的「素材集市康康體」字體（文末領(lǐng)取可商用字體包）作為通篇文字載體。
這也是為統(tǒng)一界面風(fēng)格做的一個(gè)優(yōu)化嘗試。
不得不說，這個(gè)選擇是非常適合的。（體量較小的產(chǎn)品可以適當(dāng)選用設(shè)計(jì)字體，一旦產(chǎn)品功能做多做大還是乖乖用默認(rèn)字體規(guī)范靠譜些）。
打開App，你能明顯看到簡(jiǎn)潔的手繪風(fēng)格元素，使整個(gè)產(chǎn)品透?jìng)鞒銮逍驴蓯鄣囊幻?。這也是Alex作者受到女兒?jiǎn)l(fā)，畢竟小孩子總有天馬行空的想象，但大人們卻很難跳脫現(xiàn)實(shí)產(chǎn)生有趣想法。
App界面極其簡(jiǎn)潔，只有黑白灰三種顏色，搭配手繪風(fēng)格的設(shè)計(jì)元素，使產(chǎn)品整體清新脫俗，與眾不同。
圖標(biāo)設(shè)計(jì)脫離設(shè)計(jì)規(guī)范，采用更加符合產(chǎn)品氣質(zhì)的手繪風(fēng)格，這樣使得界面統(tǒng)一性極高，氛圍感十足。
這也間接告訴設(shè)計(jì)師們圖標(biāo)設(shè)計(jì)上一定要跟著產(chǎn)品形態(tài)去做設(shè)計(jì)，而不要一味以第三方規(guī)范為唯一衡量標(biāo)準(zhǔn)來設(shè)計(jì)，結(jié)果就是同質(zhì)化泛濫。
計(jì)時(shí)是產(chǎn)品核心功能，點(diǎn)擊首頁左上角專注時(shí)長(zhǎng)，會(huì)出現(xiàn)不同的煮面方案。
可設(shè)置5分鐘-180分鐘之內(nèi)任意時(shí)長(zhǎng)的專注時(shí)間，同時(shí)為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘，這13個(gè)時(shí)間段繪制了專屬面條配方。你不用手機(jī)的時(shí)間越長(zhǎng)，你煮的泡面配料就越豪華越高級(jí)。設(shè)計(jì)元素也越豐富。當(dāng)你碰到手機(jī)，就會(huì)震動(dòng)十閃光。
面條設(shè)計(jì)方案與功能的完美呈現(xiàn)是產(chǎn)品最吸引人的地方。
根據(jù)累積的專注時(shí)長(zhǎng)還可以獲得相應(yīng)的稱號(hào)，配合幸苦工作后汗水落下動(dòng)畫，很是生動(dòng)有趣。
不僅如此，專注面條還特意為女性男性做了兩套插圖設(shè)計(jì)方案，充分考慮不同群體的使用體驗(yàn)，僅僅是效率型產(chǎn)品就做到如此細(xì)節(jié)，不好才怪。
這也是除了故事卡片第二種用總時(shí)長(zhǎng)配圖來增加產(chǎn)品使用黏性產(chǎn)生記憶點(diǎn)的設(shè)計(jì)之處。
1.永久買斷制
【專注面條】一次買斷制，面條價(jià)格￥18。購(gòu)買后產(chǎn)品內(nèi)的功能都可使用。但“故事卡片”需要鑰匙來解鎖，￥6.00=鑰匙*6，不想付費(fèi)那就乖乖完成計(jì)時(shí)任務(wù)來隨機(jī)獲得故事卡片。
作為一個(gè)功能單一的產(chǎn)品，賣點(diǎn)在哪里？核心競(jìng)爭(zhēng)力在哪里？依碳水Sir來看付費(fèi)用戶大多在為品牌理念買單。
就是產(chǎn)品自身的品牌調(diào)性，區(qū)別于市面上任何一款產(chǎn)品，不隨波逐流，用全新的面條理念代替時(shí)間，并且有其鮮明的手繪風(fēng)格和插圖元素，即使被抄襲也只能抄到“外殼”，內(nèi)在的東西是偷不走的。
2.購(gòu)買鑰匙
專注完成后，靠概率獲得鑰匙，用來解鎖故事卡片以及 “腦洞大開” 的結(jié)局作為獎(jiǎng)勵(lì)。緩解你專注后的緊張感，增加趣味互動(dòng)性，同時(shí)為下一次專注做好準(zhǔn)備。
故事中皮諾曹、烏鴉喝水、長(zhǎng)發(fā)公主等雖然都是我們耳熟能詳?shù)耐?，但作者?Alex ）給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里，解謎前三個(gè)猴子看到河流中有一個(gè)圓圈，當(dāng)我們找到面條的位置時(shí)，會(huì)發(fā)現(xiàn)猴子們看到的不過是一個(gè)香菇都大為震驚，畫面里充滿奇妙的想象力。
當(dāng)用戶看到未解鎖的故事會(huì)出于好奇點(diǎn)進(jìn)去，這時(shí)就需要鑰匙來解鎖，畢竟不是靠專注獲得的卡片就要用別的辦法（購(gòu)買鑰匙）打開，這就是第二個(gè)商業(yè)轉(zhuǎn)化點(diǎn)。
目前已有的27張故事卡片，每一個(gè)都與面條結(jié)合進(jìn)行故事綁定，讓用戶在效率軟件中也能感受到游戲的樂趣，把故事卡片當(dāng)成解鎖過關(guān)元素，引發(fā)用戶對(duì)故事卡片更多的渴望。這也是通過獎(jiǎng)勵(lì)機(jī)制提高用戶參與感進(jìn)而提高使用黏性以及提升付費(fèi)轉(zhuǎn)化的一種方式。
一個(gè)動(dòng)作，一堆腦洞，組成了一個(gè)能量滿滿的 app。
6 月 1 日，蘋果發(fā)布了 2022 年度設(shè)計(jì)大獎(jiǎng)入圍名單，在「創(chuàng)新思維」類別中出現(xiàn)了中國(guó)區(qū)《專注面條》的身影，雖然止步于決賽圈，但我覺得這并不是結(jié)束，而是全新的開始。
優(yōu)秀的產(chǎn)品總有其相似之處，也有其不同。要想做一款好的小眾產(chǎn)品，除了把產(chǎn)品本身所解決的用戶痛點(diǎn)做好做精外，植入產(chǎn)品理念，與用戶產(chǎn)品某種關(guān)聯(lián)。
就如它把專注計(jì)時(shí)比作烹飪時(shí)間，當(dāng)完成專注，你將獲得一碗香噴噴的泡面一樣，給用戶感受并不是冷冰冰的機(jī)器“?！钡母嬖V用戶專注結(jié)束，而是通過巧妙的設(shè)計(jì)與用戶之間產(chǎn)生真實(shí)聯(lián)系，這或許就是成功的秘密。
借用「專注面條」Slogan說的：專注，可以做出一碗好面條。
各位設(shè)計(jì)師們不妨學(xué)習(xí)一下背后的思考。
謎底時(shí)鐘是一款設(shè)計(jì)精美的時(shí)鐘應(yīng)用。
Slogan：陪伴你學(xué)習(xí)、工作與生活。
你沒看錯(cuò)！它僅有時(shí)間和計(jì)時(shí)功能。
作為一款時(shí)鐘App，UI設(shè)計(jì)有什么不同，才被入選2022 蘋果設(shè)計(jì)大獎(jiǎng)！成為中國(guó)開發(fā)者之光！我們一起來看看。
第一次下載，就會(huì)啟動(dòng)引導(dǎo)流程，切換頁面時(shí)配合錯(cuò)幀動(dòng)畫，使設(shè)計(jì)細(xì)節(jié)更加突出明顯，強(qiáng)化品牌調(diào)性。產(chǎn)品中的引導(dǎo)頁都可以嘗試這種表現(xiàn)形式。
進(jìn)入首頁，展示文字+動(dòng)效的引導(dǎo)流程，統(tǒng)一的表現(xiàn)形式，讓使用者更容易理解。首頁交互引導(dǎo)，讓用戶對(duì)產(chǎn)品隱藏的交互功能得到二次記憶，具有增強(qiáng)產(chǎn)品記憶的作用。
2-1.設(shè)計(jì)元素
品牌風(fēng)格設(shè)計(jì)很前沿，采用2020年大火的新擬態(tài)設(shè)計(jì)風(fēng)格，也能看出設(shè)計(jì)表現(xiàn)緊跟市場(chǎng)潮流走，是一款個(gè)性且年輕的App。
整體使用下來，印象最深的就是模塊列表、圖標(biāo)的微質(zhì)感設(shè)計(jì)，以及彈窗布局的規(guī)范化設(shè)計(jì)，還有部分組件采用毛玻璃設(shè)計(jì)手法等。
值得注意的是，產(chǎn)品對(duì)iOS原生組件進(jìn)行大量重新設(shè)計(jì)，結(jié)合新擬態(tài)風(fēng)格繪制了一套更符合產(chǎn)品調(diào)性的組件出來。讓人使用一次就記憶猶新。
2-2.核心力-交互感知
我分別羅列出計(jì)時(shí)切換器、計(jì)時(shí)完成動(dòng)效、時(shí)間選擇器、鬧鐘動(dòng)效、刪除交互、浮窗切換交互這六個(gè)來簡(jiǎn)單談?wù)効捶?。以下幾個(gè)動(dòng)效交互基本涵蓋市面上的多半產(chǎn)品的基礎(chǔ)功能，之所以展示出來，是因?yàn)椤钢i底時(shí)鐘」在原有的基礎(chǔ)組件上大膽創(chuàng)新，摒棄原生組件。
這樣做對(duì)于功能簡(jiǎn)單的產(chǎn)品來說絕對(duì)是錦上添花有助于產(chǎn)品形成記憶點(diǎn)的設(shè)計(jì)細(xì)節(jié)。這也從側(cè)面反映出市面上的部分產(chǎn)品，只注重功能堆疊而完全忽視原生組件還可以二次設(shè)計(jì)的方向。
什么是好的交互，操作時(shí)無感知是一種，操作時(shí)有記憶點(diǎn)也是一種。顯然「謎底時(shí)鐘」是后者。要知道優(yōu)秀的交互自成一派，把單一的功能做到極致，你的產(chǎn)品就不會(huì)差到哪里。
時(shí)鐘就是要長(zhǎng)時(shí)間靜默展示，除了極簡(jiǎn)、擬物、科技、馬賽克、霓光、積木、微質(zhì)感、電子屏、睡眠屏、卡通風(fēng)、各類鐘表材質(zhì)等等19種風(fēng)格高顏值時(shí)鐘外，霓光時(shí)鐘具有不一樣的功能。
當(dāng)你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個(gè)包”，除了文案變化，圖標(biāo)也跟隨名稱而變，又一個(gè)用美食來拉近與用戶距離的設(shè)計(jì)細(xì)節(jié)。
不僅如此，在低電量情況下，霓光效果不顯示，底部會(huì)持續(xù)閃爍電量不足的指示燈，告訴用戶手機(jī)沒電信號(hào)，請(qǐng)及時(shí)充電。當(dāng)用戶插上電源，霓光時(shí)鐘會(huì)重新啟動(dòng)亮光模式，給予用戶通電感知。
雖然很小的設(shè)計(jì)點(diǎn)，但誰又能想到時(shí)鐘與電量不足產(chǎn)生聯(lián)系?？磥黹_發(fā)者對(duì)時(shí)鐘的創(chuàng)意聯(lián)想是豐富多彩的。
無意間觸碰手機(jī)時(shí)發(fā)現(xiàn)積木零星掉落下幾個(gè)，在好奇的驅(qū)使下又晃動(dòng)了一下手機(jī)，所有積木都掉落下來了。
具有數(shù)字屬性的積木依然不斷變換數(shù)字，并且配合手機(jī)陀螺儀可以模擬現(xiàn)實(shí)空間進(jìn)行移動(dòng)，交互玩法趣味十足，讓我忍不住多玩了幾次。
這種用到iOS系統(tǒng)功能做的大膽嘗試，有時(shí)會(huì)給產(chǎn)品帶來意想不到的好處，各位總監(jiān)們不妨試試。
采用終身會(huì)員與月會(huì)員模式，月會(huì)員很好理解，為了產(chǎn)品能持續(xù)做下去，而推出的付費(fèi)模式，目的是能持續(xù)有營(yíng)收。終身會(huì)員是一個(gè)很有意思的模式。
據(jù)了解，產(chǎn)品前期功能相對(duì)單一時(shí)，推出的一種買斷制，但隨著新功能不斷增加，原有￥25定價(jià)相比較低，早期買斷的用戶獲利更大，為了商業(yè)與產(chǎn)品平衡，使其具備良性發(fā)展空間，于是又推出月會(huì)員模式。
這也牽扯到另一點(diǎn)，凡是未上線新功能都可以輕松決定是否開發(fā)上線，一但功能上線，想要取消或抹掉功能，就沒那么輕松簡(jiǎn)單了。這也是早期App都一次買斷，后期改為訂閱模式也必須有終身買斷的內(nèi)購(gòu)入口。
如果我們是“匠人”就會(huì)把 App 當(dāng)藝術(shù)品，雖然只有也僅有一種功能，但只要花費(fèi)了大量的時(shí)間去想創(chuàng)意，去做到設(shè)計(jì)、交互的完美融合，甚至一遍一遍地優(yōu)化各種細(xì)節(jié)部分，埋設(shè)彩蛋，最后的最后呈現(xiàn)出來讓自己滿意。那么它就很可能成為一款小而美的產(chǎn)品。
烏克蘭開發(fā)團(tuán)隊(duì)出品。讓喝水變成一件快樂輕松的活動(dòng)。僅有的喝水記錄功能，卻用大量動(dòng)物角色來獎(jiǎng)勵(lì)喝水后的你，讓你欲罷不能。保持水分保持快樂！從截圖中不難看出，該App內(nèi)置大量動(dòng)物插圖，通過喝水來解鎖小動(dòng)物，解鎖前僅展示動(dòng)物輪廓，讓用戶產(chǎn)生好奇從而保持喝水好習(xí)慣，這個(gè)概念很好，產(chǎn)品很棒，那我們一起來看看吧。
產(chǎn)品中icon展示較少，更多是用小插畫來代替，頁面中大量的banner以及動(dòng)物卡片，豐富產(chǎn)品的同時(shí)營(yíng)造一種輕松的感覺。并沒有很多圖標(biāo)干擾用戶操作。與水相關(guān)的插圖用動(dòng)效來承載，讓簡(jiǎn)單的元素變得趣味橫生，很是新穎。除了普通的水以為，Waterllama還為各種飲料酒水做了全套icon，共計(jì)48+之多，可見產(chǎn)品對(duì)于水的核心功能做足了努力，才有如此多的類型與選擇供用戶記錄。
無論您是想休息一下咖啡因，還是想通過果汁和冰沙來增強(qiáng)免疫系統(tǒng) - 選擇任何挑戰(zhàn)，盡情享受吧！
遠(yuǎn)離含糖飲料和酒精，或者在 10 天內(nèi)只喝水補(bǔ)充水分?？纯茨愕倪M(jìn)展如何，別忘了與朋友分享你的結(jié)果。
Waterllama 應(yīng)用程序中已有超過 45 個(gè)可愛的動(dòng)物角色，我把解鎖與隱藏的都羅列到上放品牌元素中，可以看下總有一款是你的菜。你也可以使用隨機(jī)模式，讓每一天都變得不同。當(dāng)天喝水目標(biāo)達(dá)成就會(huì)解鎖一個(gè)動(dòng)物，精美的插圖讓人賞心悅目，期待第二天繼續(xù)喝水打卡挑戰(zhàn)。
首頁下方的動(dòng)物挑戰(zhàn)卡片，交互形式采用App Store卡片點(diǎn)擊交互，無論是轉(zhuǎn)場(chǎng)過度，還是下拉放大主體都給畫面賦予趣味性操作體驗(yàn)。一邊體驗(yàn)交互細(xì)節(jié)，一邊了解喝水的各種好處，娛樂加學(xué)習(xí)兩不誤，很是輕松。
內(nèi)購(gòu)頁面采用icon輪播的動(dòng)效展示，優(yōu)點(diǎn)是在一小塊區(qū)域通過消失漸現(xiàn)可以展示所有內(nèi)容，使內(nèi)購(gòu)頁面干凈清爽能更好的閱讀頁面信息。按鈕通過循環(huán)放大，引導(dǎo)用戶進(jìn)行付費(fèi)操作，雖然很刻意，但絲毫沒有感受到強(qiáng)制性選擇。
當(dāng)產(chǎn)品想要在內(nèi)購(gòu)頁強(qiáng)化品牌背書，給到用戶可靠穩(wěn)定感，可以選出具有代表性的優(yōu)質(zhì)評(píng)價(jià)，展示在內(nèi)購(gòu)頁下方，通過左右切換查看更多評(píng)價(jià)。
每年￥28，終身買斷制￥48.00。兩個(gè)價(jià)格是利用價(jià)格差來制造價(jià)格錨點(diǎn)，引導(dǎo)用戶購(gòu)買終身會(huì)員，這對(duì)用戶來說最實(shí)惠劃算的方案，同時(shí)也是產(chǎn)品所希望的。大量的終身用戶長(zhǎng)時(shí)間使用產(chǎn)品，成為核心用戶群體，助力產(chǎn)品越做越好。
現(xiàn)在不難看出，優(yōu)秀的產(chǎn)品往往更關(guān)注細(xì)節(jié)表現(xiàn)，用動(dòng)態(tài)展示內(nèi)容，讓玩法更具趣味性，頁面簡(jiǎn)約而不簡(jiǎn)單。并不是頁面元素越多越好，相反把簡(jiǎn)單的功能做到極致就會(huì)帶來正向有價(jià)值的反饋。
這款產(chǎn)品雖然沒出現(xiàn)在WWDC22上，但與「謎底時(shí)鐘」是同一家公司。無論設(shè)計(jì)或功能使用都相媲美。
手機(jī)已成為人人必備的物品，內(nèi)置的各種App占有著人們的生活，手機(jī)依賴已成為這個(gè)時(shí)代普遍的一種現(xiàn)象。雖然人們都知道長(zhǎng)時(shí)間看手機(jī)不好，下意識(shí)的克制看手機(jī)行為，以為這樣脫離手機(jī)依賴患者這個(gè)稱號(hào)。往往碎片化看手機(jī)，一天下來使用手機(jī)的時(shí)長(zhǎng)不降反增?！窸ffScreen」通過細(xì)分時(shí)間屬性為用戶直觀呈現(xiàn)各種場(chǎng)景下使用手機(jī)的詳細(xì)數(shù)據(jù)，通過數(shù)據(jù)展示以及專注時(shí)間，防止用戶沉迷手機(jī)無法自拔。
「OffScreen」背景色使用極其大膽。
淺色模式下采用暖橘色作為品牌主色調(diào)，暗色模式下采用海藍(lán)色作為主色調(diào)，相比Apple設(shè)計(jì)規(guī)范中的顏色，這種帶有傾向性的色彩更容易營(yíng)造一種產(chǎn)品氛圍，強(qiáng)化產(chǎn)品感知度。
圖標(biāo)方面，具有操作屬性的圖標(biāo)采用線性（相對(duì)好理解），具有展示屬性的圖標(biāo)采用面性風(fēng)格（設(shè)計(jì)表現(xiàn)更強(qiáng)且有文字描述相對(duì)好理解）。
引導(dǎo)流程專場(chǎng)用了大量位移、漸變效果，使原本單調(diào)的靜態(tài)頁賦予生動(dòng)表現(xiàn)力。吸引用戶眼球，達(dá)到品牌傳播效果。
動(dòng)效貼合操作效果，用戶還沒使用就能一眼明白產(chǎn)品如何使用，這就是引導(dǎo)動(dòng)效的好處。
當(dāng)你專注番茄鐘時(shí)，只需在番茄上滑動(dòng)標(biāo)尺選擇準(zhǔn)確時(shí)間，就能開始專注。
當(dāng)完成專注會(huì)提供統(tǒng)計(jì)數(shù)據(jù)，并且有彩帶飄落效果，營(yíng)造打卡勝利的儀式感，強(qiáng)化產(chǎn)品感知，為用戶下一次專注做準(zhǔn)備。
內(nèi)購(gòu)頁采用依次呈現(xiàn)的交互方式，頭圖是一個(gè)人在看手機(jī)，采用線性風(fēng)格手法，這種形式區(qū)別于其他產(chǎn)品，會(huì)給人以眼前一亮的感覺，加深用戶對(duì)產(chǎn)品的記憶。
付費(fèi)按鈕吸附與頁面底部，根據(jù)菲茨定律，起始于目標(biāo)位置越近，到達(dá)目位置的時(shí)間就會(huì)越短，從而用戶更容易點(diǎn)擊。
一次買斷制，￥30.00解鎖終身會(huì)員。
作為一款時(shí)間統(tǒng)計(jì)、番茄鐘、專注時(shí)間與一身的產(chǎn)品，對(duì)于時(shí)間管理有強(qiáng)需求的用戶來說價(jià)格還算不錯(cuò)。流暢的交互呈現(xiàn)以及有趣的配圖描述，間接感受到Off Screen產(chǎn)品的細(xì)膩之處，用戶為此買單也不是說。
OffScreen的成功在于能把單一的屏幕使用時(shí)間進(jìn)行多維度分析呈現(xiàn)，就說“呆呆的看”與“邊走邊看”這兩項(xiàng)數(shù)據(jù)，就是調(diào)用系統(tǒng)運(yùn)動(dòng)數(shù)據(jù)來判斷使用屏幕的場(chǎng)景。
況且每項(xiàng)數(shù)據(jù)都支持時(shí)間軸可視化圖表的方式呈現(xiàn)，細(xì)節(jié)之處方見專業(yè)，這也是好產(chǎn)品所要具有的垂直領(lǐng)域?qū)I(yè)度。
想要產(chǎn)品脫穎而出，一定要嘗試將軟件與硬件結(jié)合，可以是陀螺儀、眼動(dòng)追蹤、閃光燈等等，總之系統(tǒng)推出新的功能，就盡量把它用到產(chǎn)品里去。
不僅如此，看以上幾個(gè)產(chǎn)品，截圖模塊內(nèi)容都頂滿了，說明App想要展示的細(xì)節(jié)還有很多，從側(cè)面也能看到開發(fā)者們不留一塊“空白”的用心。
大廠產(chǎn)品固然很好，做法更符合大眾市場(chǎng)符合消費(fèi)者需求，隨著不斷新增功能，產(chǎn)品變得越來越普適大眾，無產(chǎn)品獨(dú)特風(fēng)格可言。因?yàn)楸澈笥旋嫶蟮膯T工要養(yǎng)活。
相反小團(tuán)隊(duì)獨(dú)立開發(fā)者們沒有太多顧慮，一心想把一個(gè)點(diǎn)做好做緊致，哪怕只是計(jì)時(shí)，也要做的自己滿意為止，才會(huì)交卷，時(shí)代在變，匠人之心從未改變。值得致敬這些開發(fā)者們。
跳脫大廠的產(chǎn)品，來看看獨(dú)立開發(fā)者和小型開發(fā)團(tuán)隊(duì)，一人即團(tuán)隊(duì)，遇到各類問題都要獨(dú)自進(jìn)行解決，可想而知工作量會(huì)有多大。
他們的產(chǎn)品或許沒有龐大的生態(tài)體系來滿足大眾用戶使用需求，但App Store十余年的發(fā)展，建立起細(xì)顆粒的開發(fā)環(huán)境，正是這種良性生態(tài)，讓那些有光的開發(fā)者，隨心所欲讓心中的想法變成現(xiàn)實(shí)，讓夜里的小路燈照亮了整片街道。
就連開發(fā)者們都這么拼搏，作為設(shè)計(jì)師的我們哪還有抱怨之說，這么多好的產(chǎn)品擺在眼前，真是難得的學(xué)習(xí)機(jī)會(huì)，習(xí)他人之處，補(bǔ)自我之短。一起加油一起進(jìn)步。
設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。 認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
本期產(chǎn)品細(xì)節(jié)分析結(jié)束，點(diǎn)擊原文鏈接查看更多，我們下期再見！
作者：碳水Sir；公眾號(hào)：草蓉三石
本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
藍(lán)藍(lán)設(shè)計(jì)( www.kadanni.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.kadanni.com.cn
