節(jié)能環(huán)保是符合可持續(xù)發(fā)展戰(zhàn)略的一個課題。在節(jié)能環(huán)保方面界面設(shè)計都有哪些風(fēng)格呢？
下面給您展示兩種風(fēng)格界面：清新明快和深色沉穩(wěn)。
綠色和黃色為主的色調(diào)給人一種清新自然，富有生機與活力的印象。圖形以圓形為主，比較有親和力，同時圓形也是今年UI設(shè)計的流行趨勢。
紫色和粉紅色漸變?yōu)楸尘?，明快有活力，容易吸引人眼球。綠色、黃色、藍色作為輔助色，增加頁面的靈動感。圖標簡潔清晰，辨識度高。
黑白色調(diào)是一種低調(diào)雅致的配色，配以簡潔的線條，更符合節(jié)能環(huán)保的主題。
這款A(yù)PP界面采用深灰色底色，沉穩(wěn)大氣，有現(xiàn)代科技感，界面采用卡片式布局。配以粉紅和橘黃作為點綴，讓界面不因深色而顯得呆板。
界面采用深藍和灰色為主的配色，大面積留白?？ㄆ讲季郑湟郧€圖表，扁平風(fēng)格圖標。簡潔清晰，表意明確。讓人對節(jié)能的理念一目了然。
（圖片均來源于網(wǎng)絡(luò)）
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
更多精彩文章：
大數(shù)據(jù)可視化界面設(shè)計賞析（一）
大數(shù)據(jù)可視化界面設(shè)計賞析（二）
大數(shù)據(jù)可視化界面設(shè)計賞析（五）
Design project的第三個特點是根據(jù)反饋快速迭代。我們的第一個想法是設(shè)計一個暑期實習(xí)計劃，鼓勵EPAPA學(xué)生到心儀的企業(yè)做一個簡單的實習(xí)（即使是打雜也無不可），由學(xué)校和企業(yè)合作提供培訓(xùn)和導(dǎo)師，旨在幫助學(xué)生在進入大學(xué)之前就對感興趣的職業(yè)有第一手的認知，例如我們認為如果你親眼看過谷歌的工程師工作，就會對成為工程師需要什么知識更加有譜。我們拿著這個方案到學(xué)校和老師、學(xué)生交流，收集他們的反饋，發(fā)現(xiàn)其中一個較大的問題：學(xué)生自己分析和提取信息的能力較弱，很難從兩個月的實習(xí)期當(dāng)中收獲很多有用的信息，我們設(shè)想中的“從實干中學(xué)習(xí)”很難實現(xiàn)。
那我們最終設(shè)計的方案是什么呢？在這里賣個關(guān)子，如果大家感興趣可以去看我們小組final presentation的內(nèi)容：
這篇文章是對大部分產(chǎn)品都有的簽到功能的一些總結(jié)。
說到簽到，幾乎是互聯(lián)網(wǎng)產(chǎn)品的標配了，大家估計都很熟悉。但是簽到功能并不是所有的APP都合適的，出現(xiàn)這個總結(jié)的原因就是小伙伴在工作中遇到問題的一個吐槽。
場景：小伙伴公司在做一個記賬功能的APP，她發(fā)現(xiàn)原型中有個簽到功能
小伙伴：為什么要做簽到，對于我們的產(chǎn)品好像沒啥用？
產(chǎn)品經(jīng)理：吸引用戶進入APP， 提升用戶活躍度呀。
小伙伴：你用啥吸引用戶，我們就一個記賬APP？
產(chǎn)品經(jīng)理：用戶簽到，我們就給積分，積分高了等級就高了，他可以給別人看看他多牛逼！
小伙伴陷入了久久的沉默，然后就來和我吐槽了，什么“天才”會因為一個記賬APP的等級高覺得牛逼啊……
就像小伙伴公司做簽到功能的目的是為了提高用戶的活躍度，他的初衷我覺得是對的，但是沒有考慮到產(chǎn)品本身適不適合做簽到、以及給予用戶的獎勵是否能吸引用戶。
所有拋開產(chǎn)品本身談簽到的行為都是耍流氓，我是個正經(jīng)人！會結(jié)合一些市面上的產(chǎn)品來總結(jié)一下簽到功能，其中包括為什么要做簽到？什么產(chǎn)品適合做簽到？簽到有哪些方式和類型？做簽到功能需要考慮哪些東西？若總結(jié)有不足之處大家友好交流呀。
什么是簽到？在生活中第一個想到的是上班打卡、小時候上學(xué)點名。這些簽到場景都有具體的時間限制、要按規(guī)定的方式進行登記并且伴隨著未完成簽到會有一定的“懲罰”。當(dāng)簽到功能被用到APP中時，APP中的簽到通常是指產(chǎn)品通過一些獎勵強化用戶行為并促使用戶打開APP進行瀏覽、打卡。用戶為了得到獎勵再次簽到，達成閉環(huán)，產(chǎn)品用簽到來提升用戶活躍度和用戶粘性，繼而達到業(yè)務(wù)上的轉(zhuǎn)化。
APP簽到和現(xiàn)實簽到的差別：1、APP中的簽到擴寬時間維度（一天24小時都可以簽到、并且還可以補簽）；2、強化“獎勵”只要你簽到，我就給你獎勵；3、弱化了“懲罰”，大部分APP對用戶的簽到都是給予獎勵，個別APP也有懲罰機制，如早起打卡活動，如果未達到目標，用戶參與活動的錢就會被其他完成目標的用戶瓜分。
了解了什么是簽到后，接下來就是看我們的產(chǎn)品適不適合做簽到，并不是所有App都適合做簽到的，適合做簽到的產(chǎn)品通常都具有以下特點
當(dāng)用戶希望從你的產(chǎn)品獲得實質(zhì)利益或某種精神滿足的時候，你的產(chǎn)品就適合做簽到。比如內(nèi)容、社區(qū)、電商、金融、游戲類型產(chǎn)品。
當(dāng)用戶認為你的產(chǎn)品是一個工具，那么就不適合做簽到功能。如日歷、天氣、瀏覽器、翻譯等（還有小伙伴公司正在做的記賬APP），因為用戶使用工具類產(chǎn)品是在有需求的時候打開并在短時間內(nèi)完成操作，在沒有需求的時候不會使用。
一般簽到常用于高頻服務(wù)，低頻的工具型產(chǎn)品就不適合做簽到。（有人肯定會想，微信也是高頻次為什么沒有簽到，因為用戶每天都會進行社交，好的社交產(chǎn)品不需要簽到就有很高的活躍度。微信這樣的產(chǎn)品并不需要簽到功能，畢竟大家每天都會打開微信吧……增加簽到就雞肋了）
了解你的產(chǎn)品適不適合做“簽到”后，接下來看看APP中，為什么要做簽到，也就是簽到的作用。能想到的有提高用戶活躍度、培養(yǎng)用戶習(xí)慣、匯集流量轉(zhuǎn)化業(yè)務(wù)、拉新等等。接下來從用戶和產(chǎn)品兩個角度來看為什么要做簽到。設(shè)計師在做設(shè)計前一定要先了解好做簽到需求的目的！需要了解不同的目的相對應(yīng)的設(shè)計的側(cè)重點也是不同的。
簽到有一定的作用但是小聲逼逼：簽到不能決定一個APP的死活，對產(chǎn)品有多大的作用，本質(zhì)上還是要看產(chǎn)品的核心功能，要想靠簽到救活一個APP，基本不可能（除非你是王多魚）
1）促活：通過獎勵來促使用戶每天使用產(chǎn)品。培養(yǎng)用戶的使用習(xí)慣。這個其實是大多數(shù)APP做簽到的目的，也是衡量簽到功能是否成功的重要指標；設(shè)計師在設(shè)計的時候，就要考慮獎勵的樣式呈現(xiàn)、簽到的方式、激勵點的設(shè)置、簽到的提醒等。
2）留存：一般簽到頁面為了提高留存率，在設(shè)計上可以展示第二天或者近7天登錄的獎勵（例如很多游戲的簽到頁），會吸引想要獎勵的用戶再次登錄。如果通過簽到讓用戶養(yǎng)成了每日簽到的習(xí)慣，那產(chǎn)品的留存率將提高；
3）拉新：通過簽到來滿足用戶的技能成長記錄與分享后得到他人的夸獎、認同的需求。從而刺激用戶對外分享，讓產(chǎn)品獲得更多曝光，某一定程度上也能拉新。如朋友圈經(jīng)常能看到keep用戶的健身簽到圖、堅持背英語的簽到圖。
4）營收：讓用戶從簽到轉(zhuǎn)化達到營收是最重要的目的。現(xiàn)在很多產(chǎn)品的簽到功能跟商城掛鉤，給予獎勵吸引用戶購買商品，一定程度上能拉升營收。設(shè)計師在設(shè)計的時候，就要考慮優(yōu)惠券、兌換的設(shè)計怎么結(jié)合到簽到中，因為優(yōu)惠券能促使用戶下單、積分加現(xiàn)金能增加禮品、道具等的收入。
5）會員體系：簽到有助于產(chǎn)品建立更加完善的會員積分系統(tǒng)，不同的會員等級，享受的待遇和優(yōu)惠不一致。通過堅持打卡，來激勵用戶激活更高的會員等級。設(shè)計師在做簽到頁的時候就要考慮和會員等級怎么掛鉤，引導(dǎo)用戶。
6）品牌印象：這個目的就需要設(shè)計師在簽到頁增加品牌吉祥物或其他象征物，強化用戶對產(chǎn)品的印象。
簽到對用戶而言，是因為能夠用戶獲利，所以才會去簽到，獲利分為物質(zhì)和精神兩種。
1）物質(zhì)獎勵：即用戶可以獲得積分、兌換商品、優(yōu)惠券、現(xiàn)金等（大部分有商城的APP常用的獎勵）
2）精神獎勵：即用戶自己的情感滿足（如keep打卡技能成長記錄與分享后得到他人的夸獎、認同的需求）、以及簽到獲得不同的會員等級與用戶權(quán)限、或者虛擬的獎?wù)拢ㄈ缬螒騽渍拢⑴判邪裰惖摹?
在了解了我們的產(chǎn)品是否適合做簽到后，接下來了解要把簽到功能做好，需要從哪幾個點入手？（另外，在做這篇總結(jié)的時候，有大佬的簽到設(shè)計上了首推，大家可以結(jié)合大佬的設(shè)計一起看這個模塊，食用效果更佳）
把簽到功能加到APP里，在不影響主要功能使用的前提下，把簽到功能入口做的越明顯越好，這樣才能在更新后讓用戶更加容易發(fā)現(xiàn)，并且讓用戶在每天簽到時能夠更加快捷，不會因為進入的路徑過長或者過于復(fù)雜而讓用戶放棄
1）首頁金剛區(qū)圖標
這類的簽到功能相對獨立且內(nèi)容強大，比較能吸引用戶，有的簽到就是常規(guī)入口，如：拼多多的現(xiàn)金簽到、京東的領(lǐng)京豆、飛豬的領(lǐng)里程。放在首頁的目的是為了曝光。
2）底部單獨tab
這類型多見于生鮮、超市之類的APP，簽到對其功能比較重要的產(chǎn)品。
3）首頁右下角懸浮球
首頁右下角的懸浮球是簽到快捷入口，未簽到情況下顯示，簽到完成則會消失（之前有遇到，沒找到就不配圖了）
懸浮球會遮擋一部分底部內(nèi)容以及干擾用戶操作。友好用戶體驗就是當(dāng)用戶向下滑動頁面的時候懸浮入口就會消失或者收納到頁面右側(cè)只露出一點，也就不會造成干擾的問題了。
4）個人中心的列表類、按鈕類
這類是很多APP會采用的簽到模塊入口，與個人中心模塊的其他列表的展現(xiàn)形式一致（圖標+文字）
5）彈窗類提示
一般使用的App并不是太多，在進入APP時，就會跳彈窗，想引導(dǎo)用戶去簽到，因為這類形式容易造成用戶不同程度的反感。（從我的彈窗總結(jié)就能看出大家多不喜歡彈窗了）
6）導(dǎo)航欄
簽到在導(dǎo)航欄上進行展示的時候，用戶是較為容易忽略導(dǎo)航欄上的簽到功能的，所以設(shè)計師通常會做成金幣、紅包、禮物的形式并加上動畫效果來用戶的注意。
7）個人主頁頂部小標簽/小按鈕
通常放置在用戶名邊上或者頂部，突出簽到的功能
1）寫死的界面（需要重新發(fā)版才能更改）
這種適合簽到頁面不復(fù)雜，不需要經(jīng)常調(diào)整的
2）H5（可以在不發(fā)版的情況下進行替換）
適合經(jīng)常改需求的產(chǎn)品，可以根據(jù)需求不斷更替（如有些電商產(chǎn)品會根據(jù)節(jié)日做不同的簽到樣式）
1）自動簽到
在APP中就是登錄即簽到，優(yōu)點是用戶很便捷簽到成本低，缺點是放棄成本也隨之變低，不利于習(xí)慣養(yǎng)成和形成有效轉(zhuǎn)化。用戶一般對自動簽到的感知度較低，因為自動簽到通常顯示為：連續(xù)簽到X天，獲得XX積分。用戶不能明確感知獲利信息，如簽到獲取的積分能做什么，產(chǎn)品想要吸引用戶長期簽到很難。在設(shè)計的時候需要把簽到結(jié)果反饋給用戶又不能給用戶形成過多的干擾。
游戲類的自動簽到一登錄就自動簽到，并向用戶展示簽到得到的獎勵，并且會展示多天的，吸引用戶再次點擊進入產(chǎn)品
2）手動簽到
用戶要主動去點擊并獲取獎勵。手動簽到在設(shè)計的時候，為了簽到的效率，通常會把簽到按鈕放大處理，讓用戶可以快速找到簽到入口并快速完成操作。通常會除了簽到功能外，還會有簽到說明、規(guī)則、以及引導(dǎo)用戶進行轉(zhuǎn)化模塊。手動簽到盡量讓用戶長時間停留更有利于用戶停留和轉(zhuǎn)化，大部分電商產(chǎn)品都是手動簽到。手動簽到缺點是不能一步完成，用戶通常要付出操作成本。若簽到層級太深，用戶通常注意不到（所以需要在首頁做快捷入口）
1）連續(xù)簽到
需要用戶在一段時間內(nèi)連續(xù)完成簽到不可間斷，斷簽后需要重新開始的計算方式。連續(xù)簽到我認為包含了每日簽到所以不單獨拆開說。連續(xù)簽到通常會故意設(shè)計成單次簽到的獎勵不如連續(xù)簽到的獎勵多，連續(xù)簽到所獲得的獎勵內(nèi)容存在疊加與翻倍關(guān)系。每完成一個短周期，就可以獲得一個大獎，增強新鮮感，刺激用戶養(yǎng)成連續(xù)簽到的習(xí)慣。但這樣，一旦用戶斷簽，帶來的損失感也要比前一種大得多，用戶不一定愿意重新開始，而是會徹底放棄?？梢栽谠O(shè)計中加個每日提醒功能和補簽功能。
若產(chǎn)品打算使用連續(xù)簽到的方式，就需要考慮斷簽的情況下的設(shè)計
A 用戶斷簽就需要重新開始簽到
B 提供補簽，可以是用積分兌換、拉新，補簽的具體方法可以很多具體可以和公司負責(zé)運營的小伙伴商量，但是要補簽對用戶來說一定要付出的成本小于補簽后獲利成本，用戶才會完成補簽動作。
2）累計簽到
用戶在在APP內(nèi)達到規(guī)定次數(shù)即認為簽到成功，可間斷。斷簽后依舊計算總天數(shù)。用戶每天簽到可以獲得當(dāng)日獎勵，并且只要保證周期內(nèi)達到規(guī)定次數(shù)就可以獲得額外獎勵。亮點：由于能連續(xù)簽到的用戶實在太少，累積簽到可以給用戶有緩和度，給用戶還能達到的心理暗示，會更容易讓用戶接受。
當(dāng)產(chǎn)品要設(shè)置簽到周期通常就是連續(xù)簽到方式，常見的簽到周期為5天、7天、21天、一個月。很多APP都會選擇7天這個周期設(shè)置。選擇7天，因為我們平時上班、上學(xué)都是以周為單位的，比較容易被用戶習(xí)慣。
在簽到周期的最后一天會設(shè)置一個激勵點，設(shè)計師在設(shè)計的時候可以在第三天設(shè)置激勵點，把2個小部分，因為我們在上班的過程中通常把周三做為一個節(jié)點，過了周三后，就好像馬上周末了一樣，開心！讓用戶在較短周期完成簽到獲得獎勵，再通過小周期的疊加來培養(yǎng)用戶簽到習(xí)慣。激勵點的設(shè)置可以和數(shù)據(jù)結(jié)合分析，看哪天最容易斷簽，就在那天設(shè)置獎勵日，讓用戶看到獎勵打開APP實現(xiàn)連續(xù)簽到的目的。
簽到的獎勵反饋內(nèi)容和產(chǎn)品希望培養(yǎng)的用戶行為直接相關(guān)，根據(jù)產(chǎn)品提供給用戶的獎勵，簽到可以分成以下幾種常見類型：
1）物資激勵簽到
就是只要用戶簽到，就給用戶物資獎勵，獎勵可以是優(yōu)惠券、現(xiàn)金抵現(xiàn)、抽獎、兌換商品等，是大多數(shù)產(chǎn)品的簽到手段，模式簡單粗暴，大部分APP都是使用這種方式。這種簽到激勵往往耗時較長，且有一定的運營成本，獎勵的價值往往都比較低。同時過程中缺乏新意，且只能滿足用戶較低層次的需求。
有個有意思的簽到是網(wǎng)易云簽到，雖然這個產(chǎn)品簽到成功會有積分獎勵，但是最吸引用戶的是每次簽到后，網(wǎng)易云會推薦一首歌以及一些歌曲評論，身邊有堅持網(wǎng)易云簽到的小伙伴基本是奔著這個獎勵去的。
還有另一種物資激勵，如早起計劃這種類型的簽到方式，是先讓用戶付出少量的資金，周期簽到完成后可以瓜分獎金池里的資金。如果簽到失敗，你前面付出的資金就會被其他完成的小伙伴瓜分，這類簽到由自愿參與，在設(shè)計的時候，要列出挑戰(zhàn)成功獎勵、失敗的結(jié)果，利用用戶“厭惡失去”的心理讓用戶更加容易堅持下去，并且只要參與這個計劃，每天醒來第一件事，就是快打開我們的APP進行簽到。
2）精神激勵簽到
這類簽到，主要是利用等級、稱號、曝光率、成就感、認同感等一些自我實現(xiàn)和尊重的需求來刺激用戶使用。最典型的產(chǎn)品就是Keep的運動徽章，微博話題的簽到熱度排行、螞蟻莊園等等，但對于獲得獎勵的門檻往往要求較高（例如：keep要運動目標才可以簽到）。
3）體驗驅(qū)動簽到
這有的產(chǎn)品沒有“簽到”功能，但是產(chǎn)品本身自帶簽到，將“簽到”作為產(chǎn)品的一種屬性，使產(chǎn)品擁有了每天都需要被打開的原因，很好的提高了整個產(chǎn)品的活躍度。例如：網(wǎng)易蝸牛讀書，登錄即可領(lǐng)1小時免費時長就是這個產(chǎn)品的“簽到功能”，吸引很多用戶每天登錄雖然沒有簽到功能，但是將其內(nèi)化成了用戶每天必須打開它的理由。做這種簽到的前提是產(chǎn)品能夠滿足用戶的某個需求，就像用戶如果沒有閱讀需求，這個免費時長就毫無價值和吸引力了。
4）游戲化簽到
很多平臺為了凸顯簽到的差異化，增強吸引力，游戲化簽到方式就應(yīng)運而生了。相比普通的簽到方式，游戲化包含了更加豐富的內(nèi)容和場景，更容易讓用戶上癮。對用戶而言，也不會有任務(wù)般的強迫感，用戶體驗相對更好。非常建議小伙伴們可以研究下游戲化簽到。
比較典型的就是種水果，用戶簽到達到一定周期后，平臺給你送水果。支付寶的螞蟻森林和養(yǎng)雞就是非常成功的游戲化簽到。比如我沉迷的養(yǎng)雞，就是通過養(yǎng)雞讓小雞產(chǎn)生愛心，每達到5顆愛心就可以讓一個人得到救助，以這種公益的方式吸引用戶使用支付寶（因為沒飼料了，使用支付寶付款后就會產(chǎn)生飼料）和達到店鋪賦能（還可以看店鋪獲得飼料）。
這個模塊展示常見APP簽到的幾種樣式
1）彈窗類
此類簽到通常在一個頁面內(nèi)即可完成簽到操作，無需跳轉(zhuǎn)到其他頁面，此類簽到規(guī)則在游戲類app中也運用的較多，展示模式也跟游戲類app相似。
2）標簽類
標簽卡片式適合展示當(dāng)天較為重要的獎勵數(shù)據(jù)，通常在當(dāng)天簽到展示信息較多的時候使用。相比其它展示類型更加清晰明了。但不能看到隔天的獎勵，刺激用戶連續(xù)簽到。
3）時間進度類
A 時間軸平鋪類
時間軸平鋪類通?？梢院苊黠@的看到時間進度，一般以時間軸進度條橫向平鋪的形式進行展示。周期通常為7天為并設(shè)置獎勵日，培養(yǎng)用戶簽到習(xí)慣。在知乎看到一個問答帖：為什么現(xiàn)在很多男生不追女生了？下面有個高贊的回答：看不到進度條。同理，大部分人沒能堅持簽到，是因為看不到進度條。
B 日歷平鋪類
頭部展示宣傳運營信息。彈窗類上的日歷展示會相對簡潔，日歷類跳轉(zhuǎn)頁通常在簽到邏輯較為復(fù)雜的情況下使用，能夠更好的呈現(xiàn)當(dāng)月的簽到情況。
4）勛章類
在運動健身類、游戲類App中運用較多，當(dāng)直觀看到獎?wù)聵s譽，對用戶有較強的激勵作用。
游戲形式有抓娃娃、地圖闖關(guān)、澆水種樹、建設(shè)小鎮(zhèn)等
了解完簽到的設(shè)計要點后，怎么運用到設(shè)計中？看兩個典型的，一個是標準的簽到的產(chǎn)品，一個是去除簽到字樣但有簽到概念的產(chǎn)品
京東的簽到瓜分京豆頁面，將拉新、留存、促活、轉(zhuǎn)化結(jié)合到一塊。這一套下來，用戶在參與這個活動時，保證了用戶這23天每天會打開一次（如果漏簽，用戶會拉新補簽）。
螞蟻森林就是游戲化的方式展現(xiàn)出來，去除了“簽到”字樣，但是依舊達到簽到功能的產(chǎn)品，用戶的參與度和留存度都很高，
用戶的典型路徑為：
進入螞蟻森林界面；
收取自己行為產(chǎn)生的能量（運動、支付、回收……）；
去好友的頁面收取他們的能量，或者幫他們收取即將消失的能量；
積累到一定數(shù)量后，種下真實的樹。獲得證書
1、螞蟻森林的簽到形式是收取能量（或收取好友能量），能量是你前一天的運動、支付產(chǎn)生的
2、獎勵是產(chǎn)品方替你種下一棵樹并獲得證書（這個是物資獎勵+精神獎勵）這是很強的精神獎勵（看周圍小伙伴沉迷于透能量，早上7點半定鬧鐘來偷我的能量就知道了）
3、簽到周期，能量3天不收會消散，這形成了一個簽到周期。獎勵是種樹，不同的樹苗所需能量不一樣，用戶可以自行選擇對其難度小的。能量種樹并領(lǐng)取證書就是激勵點的設(shè)置
4、可以收取他人能量形成社交聯(lián)系（我下次也要定鬧鐘去偷他的能量！），也會進一步提升產(chǎn)品的活躍和留存。
這個總結(jié)了簽到的定義、什么產(chǎn)品適合做簽到、為什么要做簽到以及做簽到要注意哪些要點，簽到確實不能決定一個產(chǎn)品生死，最終要看的還是產(chǎn)品本身的核心功能。但如果你用得好，雖不能雪中送炭，但一定可以錦上添花。希望小伙伴們在做簽到功能的時候，能提供給大家清晰的認知和方法?？赡艽嬖谝欢ǖ木窒扌?。這個總結(jié)也斷斷續(xù)續(xù)寫了兩周，希望能對大家有幫助。
文章來源：站酷 作者：是阿三三呀
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
使用互聯(lián)網(wǎng)產(chǎn)品過程中，會有很多因素造成操作錯誤或失誤，導(dǎo)致無法順利完成任務(wù)。因此產(chǎn)品的容錯性設(shè)計是交互設(shè)計中的重要內(nèi)容。
用戶在實際使用互聯(lián)網(wǎng)產(chǎn)品的過程中，會有很多因素造成操作錯誤或者失誤，而導(dǎo)致無法順利完成任務(wù)，或者完成任務(wù)的效率很低。產(chǎn)品自身所具備的容錯能力對于各種使用場景的有效覆蓋，可以提升產(chǎn)品糾錯效率、降低用戶操作出錯概率，因此產(chǎn)品的容錯性設(shè)計是交互設(shè)計中的重要內(nèi)容，也是提升用戶體驗不可忽視的一個環(huán)節(jié)。
容錯性概念源于計算機領(lǐng)域，容錯性是指計算機系統(tǒng)在發(fā)生故障的情況下，依然能夠保證系統(tǒng)正常運行。計算機這種保證系統(tǒng)正常運行的能力也被稱為容錯能力。
本篇內(nèi)容我們討論的是容錯性在互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域的內(nèi)涵和意義。延伸到互聯(lián)網(wǎng)產(chǎn)品設(shè)計領(lǐng)域，容錯性的范疇更為寬泛，涉及產(chǎn)品對錯誤操作承載能力的多個方面，包括：如何降低用戶操作的出錯率，如何及時提供糾錯幫助，以及如何給用戶提供解決方案等內(nèi)容。
「 即便你的產(chǎn)品90％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的?！禛etting Real》」
一個產(chǎn)品設(shè)計的無論多么簡單，用戶都難免在使用過程中因為各種原因而犯錯。互聯(lián)網(wǎng)產(chǎn)品面向的用戶群體是復(fù)雜多樣化，教育背景的不同，行為習(xí)慣的差異，復(fù)雜的使用場景，都會使得用戶的真實操作相比產(chǎn)品設(shè)計之初的預(yù)期有一定出入。此外，一些產(chǎn)品本身存在的因素，例如產(chǎn)品路徑復(fù)雜，邏輯不暢等，也有可能造成用戶無法順利完成任務(wù)，亦或是完成任務(wù)的效率低，出錯率高。產(chǎn)品在遇到錯誤如不能夠及時糾錯幫用戶挽回損失，會給用戶帶來不好的用戶體驗，也是產(chǎn)品的一種設(shè)計缺陷。因此設(shè)計師應(yīng)具有良好的容錯性設(shè)計思維，盡量避免用戶錯誤操作的出現(xiàn)，當(dāng)用戶出現(xiàn)錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復(fù)。最終達到使產(chǎn)品更可用、更易用的目的，給用戶帶來更優(yōu)的用戶體驗，使用戶與產(chǎn)品的交流更加順暢。
互聯(lián)網(wǎng)產(chǎn)品的容錯設(shè)計可從用戶使用產(chǎn)品的三個階段來考慮，即操作前、操作中、操作后。可大致歸納為以下幾方面內(nèi)容：首先在用戶操作前給予正確有效的引導(dǎo)；其次在重要的操作步驟給予用戶及時有效的提示；當(dāng)用戶發(fā)生操作錯誤或失誤時及時為用戶糾錯并提供有效的解決方案；最后幫助用戶在錯誤發(fā)生后迅速回到正確狀態(tài)。
在用戶開始任務(wù)操作前給出用戶正確有效的提示，可減少錯誤操作的發(fā)生。需要注意的是，引導(dǎo)應(yīng)盡量醒目且簡單易理解，確保能引起用戶注意，并且在用戶注意到后快速獲取信息，到有效的防錯幫助。
產(chǎn)品常見的引導(dǎo)主要針對兩種情況。第一種是針對于新手用戶的功能介紹，不同于曾使用過產(chǎn)品的用戶或者高級用戶，新用戶首次使用產(chǎn)品的過程其實是一個學(xué)習(xí)的過程，此時需要讓用戶快速了解產(chǎn)品核心功能及主要的操作，幫助他們更快地上手。
例如下圖導(dǎo)航APP新版本的新手引導(dǎo)【如圖1】，在用戶首次啟動產(chǎn)品時，產(chǎn)品用趣味性的圖文形式給用戶展示了打車、公交乘車、實時公交路線等功能的信息介紹，能夠讓新用戶快速熟悉核心功能，并在正式使用產(chǎn)品的過程中提升效率，降低出錯率。
圖1-導(dǎo)航APP新手引導(dǎo)
第二種情況是針對產(chǎn)品上線的新功能或者較大的功能變動而設(shè)計的初次引導(dǎo)，產(chǎn)品的功能改動可能會是用戶產(chǎn)生不同程度的陌生感，適當(dāng)?shù)奶崾究蓭椭脩艨焖偈煜ば鹿δ茳c或頁面信息的調(diào)整。初次引導(dǎo)常見的方式有很多種，包括：遮罩式引導(dǎo)、彈窗式引導(dǎo)、氣泡、浮層式引導(dǎo)等等。
例如版本升級后的音樂APP【如圖2】，首頁使用情感化圖文設(shè)計加遮罩式的引導(dǎo)，可以有效將注意力集中到特定功能上，用戶進入頁面第一時間就注意到，確保了信息傳達的有效性。
圖2-新版首頁的遮罩引導(dǎo)
以上列舉的內(nèi)容屬于狹義層面的引導(dǎo)，用戶尚處在被動接受引導(dǎo)的學(xué)習(xí)階段，在此階段引導(dǎo)的目的是提醒和防錯。從廣義的層面來講，我們可將對用戶的引導(dǎo)理解為”消減信息的不對稱性“，當(dāng)用戶面對可影響其決策的因素時，給予用戶關(guān)鍵性的信息提示和說明，可以促使用戶做出正確的決策。
針對需要加工時間的特殊品類，如烘焙蛋糕，京東到家在用戶決策的關(guān)鍵頁面和步驟展示時效提醒【如圖3】，避免用戶在完成訂單信息填寫或結(jié)算后才發(fā)現(xiàn)商品的配送時間超出用戶的期望，會給用戶帶來極為不好的購物體驗。
圖3-京東到家頁面中的時效提醒
當(dāng)用戶進行一些如修改、刪除、覆蓋等不可逆操作時，系統(tǒng)需要在用戶做出這類操作指令后告知其產(chǎn)生的后果，讓用戶自主決策是否選擇繼續(xù)執(zhí)行。在此階段的提示需要注意從以下兩個角度考慮：一是提示的方式，二是提示的時機。
在用戶完成任務(wù)的操作路徑中，大部分產(chǎn)品首先會選擇以彈框的形式對用戶進行信息提示。彈框可以分為模態(tài)彈框和非模態(tài)彈框兩種大的類型【如圖4】，主要區(qū)別在于是否強制用戶進行交互操作。如何選擇合適的彈框形式對用戶進行提示，要依據(jù)提示信息的優(yōu)先級和視覺權(quán)重的大小，同時要清楚不同類型的彈框適合的場景。
圖4-彈框分類
模態(tài)彈窗是較重的提示方式，在用戶進行重要且有風(fēng)險的操作時可優(yōu)先考慮使用。其優(yōu)點是可以快速獲取用戶的視覺焦點，缺點是會打斷用戶當(dāng)前的操作流程，用戶需要進行如單擊“確定”、“取消”、“關(guān)閉”按鈕等操作指令將該對話框關(guān)閉后才可繼續(xù)操作。
而非模態(tài)彈框?qū)儆谳p量級的提示方式，其優(yōu)點是不強制用戶進行交互操作，或者用戶依然可以在頁面進行其他操作。彈框出現(xiàn)一段時間后會自動消失，所以但不利于承載過多文字信息。非模態(tài)彈框?qū)τ脩粼斐傻母蓴_較小，但也因此容易被用戶忽視。
給用戶的信息提示還有一點不可忽視的是反饋時機，應(yīng)確保用戶在關(guān)鍵的操作步驟得到及時的反饋，因為滯后的反饋可能會導(dǎo)致用戶因為某一個環(huán)節(jié)的錯誤操作不得不重復(fù)操作一遍之前的流程，或者要修改關(guān)的一系列信息。
【如圖5】中的登錄頁面，用戶登錄需要依次輸入手機號、密碼、圖片驗證碼，但如果用戶輸錯了密碼并不能馬上得到反饋，依然可以繼續(xù)填寫驗證碼，只有在全部信息填寫完之后點擊登錄，系統(tǒng)才會校驗密碼，并提示用戶密碼錯誤重新確認，用戶需要再次輸入密碼以及識別并輸入一次驗證碼。但如果系統(tǒng)驗證密碼可以提前到輸入圖片驗證碼的步驟之前，在用戶在得到密碼填寫錯誤提示后則可以停止操作后面的步驟，馬上修改密碼。
圖5-登錄頁面中的提示滯后
同時，盡量為用戶提供相應(yīng)的解決方案，這樣可以提升糾錯信息有效性。BOSS直聘會因為手機儲存空間不足給用戶報錯，并且會告知用戶如何去管理儲存空間，以解決此問題【如圖7】。
圖6-多行表單報錯頁面
在產(chǎn)品設(shè)計中，為降低操作的出錯率，限制也是一種方式。在可能造成錯誤操作的入口適當(dāng)設(shè)置操作障礙或者禁止操作，增加不可逆操作的難度，可以有效規(guī)避錯誤操作發(fā)生風(fēng)險、減少誤操作概率。例如常見的頁面信息置灰、按鈕置灰的設(shè)計，可以有效避免用戶的誤操作。
此外通過讓控件、動作、選項等變得可見，盡可能減少用戶記憶負擔(dān)，把需要記憶的內(nèi)容作為輔助信息提供給用戶，或幫助用戶自動完成信息填寫也可以幫助用戶快捷地完成既定任務(wù)，降低出錯率。例如【如圖8】在信息填寫的步驟，可在用戶已復(fù)制的內(nèi)容和上傳的圖片中自動識別姓名、電話、地址等內(nèi)容，并在用戶確認后自動幫用戶填寫對應(yīng)信息，為用戶大大節(jié)省時間和記憶成本，快捷地完成既定任務(wù)，降低出錯率。
在用戶執(zhí)行操作后，應(yīng)盡可能的為用戶保留已操作的信息，以便在發(fā)生錯誤或失誤后可撤銷之前的操作。針對一些流程較為復(fù)雜的操作任務(wù)，記錄用戶在每一步驟的操作信息，讓用戶可以從出錯的步驟上及時恢復(fù)到正確的流程上，或恢復(fù)到距離錯誤操作最近的步驟，可有效的幫用戶挽回失誤。例如很多圖片編輯的APP都支持用戶撤銷當(dāng)前的操作，在用戶對照片進行多編輯后頁面上會有回到上一步和下一步操作的按鈕，可讓用戶有機會恢復(fù)到上一步操作結(jié)果上。
圖9-圖片編輯頁面頂部切換上一步和下一步的操作按鈕
以上是關(guān)于互聯(lián)網(wǎng)產(chǎn)品中容錯設(shè)計的概念、重要性以及設(shè)計方法的一些闡述和思考。在產(chǎn)品設(shè)計的實際應(yīng)用的中，可以模擬使用場景，對目標用戶使用產(chǎn)品的真實操作進行行為觀察，分析對比產(chǎn)品設(shè)計的操作路徑與用戶真實操作的差別，發(fā)現(xiàn)并收集用戶可能發(fā)生錯誤或失誤操作的關(guān)鍵步驟，驗證產(chǎn)品的容錯能力是否能達到有效覆蓋。同時，也要通過產(chǎn)品數(shù)據(jù)的對比分析得出用戶操作錯誤及失誤的真實原因，指導(dǎo)并提升產(chǎn)品容錯能力的設(shè)計優(yōu)化，進而不斷提升產(chǎn)品的可用性和易用性。
文章來源：站酷 作者：DXC設(shè)計體驗中心
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
設(shè)計源于生活，本文通過生活視角溯源格式塔原理，從生活到界面設(shè)計感受格式塔原理應(yīng)用在方方面面。
一、什么是格式塔原理
格式塔即Gestalt，是德語中“形狀”和“圖形”的意思。是基于心理學(xué)對人類視覺系統(tǒng)的研究，人類的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu)。
最重要的格式塔原理有：接近性原理、相似性原理、連續(xù)性原理、封閉性原理、對稱性原理、主體/背景原理、共同命運體 原理。
下面將進行詳細分述
視覺會把互相靠近的物體看成一組，反之則不是。
下方示意圖中A被看作三排，B被看作三列
【 生活中】
無論是在看閱兵還是軍訓(xùn)，我們都有所經(jīng)歷，左右間距為一拳，前后間距為一臂。
列與列之間的間距遠大于每個人之間的間距，互相靠近的則被看作一列。
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
【界面設(shè)計中】
個人中心中，同一組信息之間的間距遠小于不同組，下圖中我們明顯可以感知到7組由圖標和文字組成的信息。
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
建議
設(shè)計過程當(dāng)中可以控制元素與元素之間的間距，從而對元素進行視覺分組，就像排隊一樣，有利于元素排列更有規(guī)律，主次分明，易于用戶獲取信息。
視覺會把相似的物體看成一組，反之則不是
下方示意圖中顏色相似的被看成一組，顏色較深的兩個圓被看作一組
【 生活中】
大家都玩過跳棋，在全部棋子形狀相同的情況下，通過顏色進行陣營區(qū)分。相同顏色的棋子很容易區(qū)分被分為一個陣營。
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
【界面設(shè)計中】
下圖中01、02、03三個圖標區(qū)域呈現(xiàn)不同的圖標樣式，通過樣式的相似性進行了合理分組，體現(xiàn)了個人中心圖標的強弱層級。
建議
設(shè)計過程當(dāng)中可以通過制造相似性，包括：顏色、形狀、格式、質(zhì)感等，使某些對象在視覺上成組。
視覺傾向于感知連續(xù)性，而不是零散的事物
下圖中我們更傾向于把圖形看作為兩條不同顏色的線交疊，甚至是一個X。而不是一條淺色線段，兩條深色線段
【 生活中】
被切開的水果我們依然可以感受到完整的樣子，一看便知這是一個完整的橙子被切開之后的樣子
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
【界面設(shè)計中】
利用連續(xù)性原理，我們將上圖中的會員等級曲線看成是完整的曲線，而不是兩段不同顏色的曲線
利用連續(xù)性，下圖中依然可以感受到完整的一盤食物
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
建議
設(shè)計中可以利用連續(xù)性原理，只露出部分元素暗示完整元素，或用連續(xù)性來暗示走向趨勢等。
視覺會將敞開的圖形封閉起來，從而感知完整的物體
下圖中我們不會將其看作三段曲線，而是很容易感知到是一個圓
【 生活中】
劃分停車位的時候，即使不畫出四面封閉的四邊形，我們依然可以感知到完整的四邊形車位
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
【界面設(shè)計中】
下圖中的斷點式icon設(shè)計，即使圖形沒有完全連續(xù)，我們依然可以感受到完整的圖形
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
建議
設(shè)計中可以利用封閉性原理合理刪減、斷點等方式增加設(shè)計感、豐富度，強化頁面趣味感、精細度
視覺會將復(fù)雜物體解析為符合對稱規(guī)律的更簡單的物體，從而降低復(fù)雜性
我們可以很快感知到下圖是兩個圓交疊，而不是其他更復(fù)雜的圖形，因為一對圓的復(fù)雜度遠小于其他
【 生活中】
河對岸的房子倒影在水面上，我們通常會最快地自動解析出水平的對稱線，將其視為上下對稱的兩組房子
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
【界面設(shè)計中】
下圖的網(wǎng)頁排版，我們的視覺自動梳理出了左右對稱的規(guī)律，即使左右的顏色并不一樣，也有其他小字信息干擾。但對稱的解析方式極大地降低了頁面的復(fù)雜性
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
建議
設(shè)計中復(fù)雜圖形可以通過簡單圖形復(fù)用得出，降低視覺理解難度。復(fù)雜的排版中可以制造對稱性，從而降低頁面的理解成本。
視覺將聚焦部分解析為主體其余解析為背景，或改變焦點時呈現(xiàn)不同的主體
大的矩形和圓形交疊時，我們傾向于把小的看作主體，矩形則視為背景。
【 生活中】
下圖中將深色區(qū)域視為主體時我們看到了建筑，把淺色視為主體時我們看到了五角星，在五角星中我們把美隊看作主體，天空看作背景
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
【界面設(shè)計中】
下圖中彈窗的出現(xiàn)轉(zhuǎn)移了頁面的主體
（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
建議
可以通過控制主體與背景，改變用戶視線焦點，從而起到引導(dǎo)用戶視覺的目的。
一起運動的物體被感知成一組或彼此關(guān)聯(lián)
下圖中三個運動的小球被看作一組
【 生活中】
舞蹈表演中，通向運動的舞蹈演員被我們歸位同一組
（資料來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
【界面設(shè)計中】
背景的文字擁有一致的運動速度，因此原本零散的文字在動效過程中被我們視為同一層元素
（資料來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）
建議
設(shè)計中不僅可以通過接近性、相似性，還可以通過同樣的動態(tài)特征將物體成組，減少視覺凌亂感。
文章來源：UI中國 作者：JuneW
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://bouu.cn