整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇文章講到HTML炫酷的主流框架，今天小明就介紹一個(gè)HTML5功能的實(shí)現(xiàn)代碼
Introduce(介紹)
用戶簽到的H5例子（css+jquery，無圖片），由于網(wǎng)上找的的用戶簽到例子都不好，要不就是好多圖片組成的，要不就大量冗余代碼，所以特意做了個(gè)簽到界面（移動(dòng)端）。
User sign sample page for mobile using h5 which only use css + jquery + html.
一些關(guān)鍵的地方
這個(gè)功能的編寫思路是，先構(gòu)建日期和簽到相關(guān)數(shù)據(jù)，然后從服務(wù)端獲取數(shù)據(jù)，并對(duì)原有數(shù)據(jù)進(jìn)行更改，最后進(jìn)行渲染。
這樣子很好的擺脫了邏輯比較凌亂的問題，并且可以直接將這些數(shù)據(jù)用 vue.js 來掛載（本文沒有這樣做）。
生成日期數(shù)據(jù)
//生成日期數(shù)據(jù)
function buildData() {
var da = {
dates: [],//日期數(shù)據(jù)，從1號(hào)開始
current: '',//當(dāng)前日期
monthFirst: 1,//獲取當(dāng)月的1日等于星期幾
month: 0,//當(dāng)前月份
days: 30,//當(dāng)前月份共有多少天
day: 0,//今天幾號(hào)了
isSigned: false,//今天是否已經(jīng)簽到
signLastDays:3,//連續(xù)簽到日子
signToday: function () {
this.isSigned = true;
this.dates[this.day].isSigned = true;
},
};
var ds = [];
//初始化日期數(shù)據(jù)
var dt = new Date();
da.current = dt.ToString('yyyy年M月d日');
da.monthFirst = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
da.month = dt.getMonth() + 1;
da.days = new Date(dt.getFullYear(), parseInt(da.month), 0).getDate();//獲取當(dāng)前月的天數(shù)
da.day = dt.getDate();
for (var i = 1; i < da.days + 1; i++) {
var o = {
isSigned: false,//是否簽到了
num: i,//日期
isToday: i == da.day,//是否今天
isPass: i < da.day,//時(shí)間已過去
};
ds[i] = o;
}
da.dates = ds;
return da;
}
有了數(shù)據(jù)之后，就可以將數(shù)據(jù)轉(zhuǎn)換為界面了
//渲染數(shù)據(jù)
function renderData(da) {
var signDays = document.getElementById('spSignDays');
signDays.innerText = da.signLastDays;
var root = document.getElementById("signTable");
root.innerHTML = '';
var tr, td;
var st = da.monthFirst;
var dates = da.dates;
var rowcount = 0;
//最多6行
for (var i = 0; i < 42; i++) {
if (i % 7 == 0) {
//如果沒有日期了，中斷
if (i > (st + da.days))
break;
tr = document.createElement('tr');
tr.className = 'darkcolor trb';
root.appendChild(tr);
rowcount++;
}
//前面或后面的空白
if (i < st || !dates[i - st + 1]) {
td = document.createElement('td');
td.innerHTML = '<div class="sign-blank"><span></span></div>';
tr.appendChild(td);
continue;
}
//填充數(shù)字部分
var d = dates[i - st + 1];
td = document.createElement('td');
var tdcss = '';
if (d.isToday)
tdcss = 'sign-today';
else if (d.isPass)
tdcss = 'sign-pass';
else
tdcss = 'sign-future';
if (d.isSigned) {
tdcss = 'sign-signed ' + tdcss;
td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span><svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="sign-pin svg-triangle "><polygon points="0,0 35,0 0,35" /></svg></div>';
} else {
tdcss = 'sign-unsign ' + tdcss;
td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span></div>';
}
tr.appendChild(td);
}
//計(jì)算是否需要添加最后一行
if ((st + da.days + 1) / 7 > rowcount)
root.appendChild(tr);
}
//構(gòu)建日期數(shù)據(jù)
var da = buildData();
//渲染
renderData(da);
以上就是本篇文章的全內(nèi)容了
學(xué)習(xí)從來不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問題的小伙伴可以私信回復(fù)小明“學(xué)習(xí)” 獲取資料，一起學(xué)習(xí)！
014年5月，我在騰訊內(nèi)部轉(zhuǎn)崗，開始從事產(chǎn)品相關(guān)的工作，我RTX資料中的“職位”一欄后面的內(nèi)容變成了“產(chǎn)品策劃”，這標(biāo)志著我之前4年交互設(shè)計(jì)師工作經(jīng)歷的正式結(jié)束。
畢業(yè)后的這幾年，從前端工程師轉(zhuǎn)到交互設(shè)計(jì)，再由交互設(shè)計(jì)轉(zhuǎn)為產(chǎn)品經(jīng)理，一路上不斷的去探索和適應(yīng)新的工作、新的團(tuán)隊(duì)。這其中的驅(qū)動(dòng)力有自身興趣的轉(zhuǎn)變，有職業(yè)發(fā)展的影響，同時(shí)，也一直有一個(gè)在心里驅(qū)動(dòng)著我的愿望，就是希望能夠有機(jī)會(huì)將“用戶體驗(yàn)”做得更好。沒錯(cuò)的，我離開“用戶體驗(yàn)部”，是希望有機(jī)會(huì)將“用戶體驗(yàn)”做得更好。
轉(zhuǎn)了產(chǎn)品經(jīng)理后，需要從更加全局的角度去思考每一件事情，這其中也包括用戶體驗(yàn)。但思考東西得多了、雜了，反而對(duì)于用戶體驗(yàn)這件事情有了一些更加清晰的認(rèn)識(shí)。雖然聽起來，“用戶體驗(yàn)”這東西就跟“情懷”一樣，已經(jīng)被說爛了。但是，就當(dāng)是作為對(duì)設(shè)計(jì)師工作的紀(jì)念吧，這個(gè)時(shí)候我想寫幾篇用戶體驗(yàn)方面的科普文章，觀點(diǎn)也不一定對(duì)或錯(cuò)，但是希望能夠針對(duì)這個(gè)話題，跟更多的同學(xué)，特別是產(chǎn)品經(jīng)理和設(shè)計(jì)師們，來聊一聊我們心目中真正的“用戶體驗(yàn)”。
第一部分：先糾結(jié)兩個(gè)概念「用戶體驗(yàn)」和「設(shè)計(jì)」
其實(shí)關(guān)于用戶體驗(yàn)的定義，雖然有一個(gè)國(guó)際標(biāo)準(zhǔn)（ISO9241-210），但是我覺得它的描述過于“散”，過于學(xué)術(shù)化。所以在網(wǎng)上翻來翻去，我決定使用這個(gè)定義：
用戶體驗(yàn)（UserExperience，簡(jiǎn)稱UX）是一種在用戶使用產(chǎn)品過程中建立起來的純主觀感受。
這個(gè)定義中提到了3個(gè)關(guān)鍵詞，分別是「用戶」、「過程中」和「主觀感受」。我以為，這3個(gè)關(guān)鍵詞構(gòu)成了用戶體驗(yàn)的靈魂。我們來一一分析。
用戶
「用戶」意味著，對(duì)于不同的目標(biāo)用戶來說，「好的用戶體驗(yàn)」的定義是不同的。所以如果脫離了用戶，是無法評(píng)價(jià)一個(gè)產(chǎn)品的用戶體驗(yàn)的。
可能很多朋友都認(rèn)為我們應(yīng)該將產(chǎn)品做得盡量的“簡(jiǎn)單”，最好是用戶不需要學(xué)習(xí)就能“自然的”使用。這個(gè)原則可能對(duì)于大部分面向大眾的產(chǎn)品來說，是對(duì)的。但是在另外一些情況下，就不一定了。比如說：美圖秀秀和Photoshop都可以處理圖片，但是它們的用戶體驗(yàn)?zāi)膫€(gè)好，哪個(gè)不好呢？這事兒我看還真不能簡(jiǎn)單的下結(jié)論。
美圖秀秀的目標(biāo)用戶，可能是一些妹紙們。她們的一個(gè)典型用戶場(chǎng)景，是用手機(jī)自拍，希望把自己變得更“美”一些，然后發(fā)到朋友圈上面去。大部分妹紙估計(jì)并沒學(xué)過設(shè)計(jì)或者美術(shù)，可能也不太懂?dāng)z影，但是美圖秀秀可以讓妹紙們只通過簡(jiǎn)單的點(diǎn)按、選擇，就能把自己的照片變美。不需要過多的思考，不需要專業(yè)知識(shí)，所以，在這個(gè)場(chǎng)景中，它的「用戶體驗(yàn)」是好的。
上圖：在美圖秀秀中選擇一種風(fēng)格
但Photoshop的目標(biāo)用戶，估計(jì)并不是這些妹紙們，而是專業(yè)的設(shè)計(jì)師。對(duì)于一個(gè)專業(yè)的設(shè)計(jì)師來說，他用Photoshop工作，這時(shí)「能夠最大限度的幫助設(shè)計(jì)師表達(dá)他們的創(chuàng)意」才是好的用戶體驗(yàn)。為了做到這一點(diǎn)，專業(yè)的設(shè)計(jì)師并不介意去深入的學(xué)習(xí)這個(gè)軟件的使用方法。從“易用性”來看，Photoshop顯然不夠易用，但對(duì)于專業(yè)設(shè)計(jì)師來說，它的體驗(yàn)太棒了！
上圖：在Photoshop中打開一張圖片，可以進(jìn)行復(fù)雜的圖像處理工作
再看一個(gè)例子：在現(xiàn)代的電子產(chǎn)品中，圖形界面已經(jīng)應(yīng)用得非常廣泛了。我們一般認(rèn)為，圖形界面更加生動(dòng)、易用、易學(xué)。從這個(gè)角度看，圖形界面的用戶體驗(yàn)是好的。但是如果你去問一個(gè)專業(yè)的運(yùn)維工程師，問他們配置服務(wù)器的時(shí)候用圖形界面還是命令行，他們基本上都會(huì)選命令行。相比于圖形界面，命令行的“易用性”太差了，不學(xué)習(xí)根本不會(huì)用。但是對(duì)于運(yùn)維工程師來說，命令行更加簡(jiǎn)潔、精確和高效。他們使用命令行可以提升工作效率，可以更快更好的完成工作，然后回家陪老婆。這才是用戶體驗(yàn)好吧。
過程中
「過程中」告訴我們，在設(shè)計(jì)用戶體驗(yàn)的時(shí)候，需要考慮用戶所處的環(huán)境和使用場(chǎng)景。
我們使用電腦時(shí)的環(huán)境大部分是相對(duì)穩(wěn)定的環(huán)境，例如辦公室、家里、咖啡館等等。但是使用手機(jī)的環(huán)境就不一定了，有可能在地鐵車廂中、電梯中、旅行路上，這樣意味著，使用手機(jī)的時(shí)候可能會(huì)伴隨晃動(dòng)、光線變化、網(wǎng)絡(luò)不穩(wěn)定等等因素。所以在做具體設(shè)計(jì)的時(shí)候，這兩邊會(huì)有一些區(qū)別。
上圖：在不同的環(huán)境和用戶場(chǎng)景下，需要不同的功能來支撐「好的體驗(yàn)」
例如：在很多閱讀類的應(yīng)用中，都會(huì)提供“夜間模式”功能。如果你睡覺前，躺在被窩里，關(guān)了周圍的燈，那平時(shí)常見的黑底白字的屏幕可能會(huì)變得很刺眼，這時(shí)將背景換成深色，調(diào)低文字與背景的對(duì)比度，在黑暗中能夠幫助你更好的閱讀。所以這時(shí)“看不清”的文字用戶體驗(yàn)反而是好的。
上圖：在某閱讀app中，左側(cè)是其正常的界面，右側(cè)是開啟了“夜間模式”的界面。右側(cè)的文字雖然在電腦屏幕上可能看不太清楚，但是如果把燈關(guān)掉，用iPhone來查看，就比較柔和，適合閱讀了。
主觀感受
「主觀感受」提示我們，不要浮于表面。一個(gè)優(yōu)秀的產(chǎn)品經(jīng)理或者設(shè)計(jì)師，一定會(huì)傾聽用戶的反饋，但絕不會(huì)被用戶牽著走。他們需要去挖掘用戶主觀感受背后真正的需求。
據(jù)說，福特汽車公司的創(chuàng)始人亨利·福特說過一句話：“If Ihad to ask customers what they want,they wil ltell me : a faster horse.”在網(wǎng)絡(luò)上，曾經(jīng)有很多人討論過這句話，特別是《喬布斯傳》出版后，很多人以此為論據(jù)試圖證明用戶研究是沒用的，產(chǎn)品設(shè)計(jì)者主觀的“感覺”才是關(guān)鍵。
我并不反對(duì)“感覺”的重要性，但是其實(shí)我們只要對(duì)這句話稍作分析就能看出，福特的客戶其實(shí)已經(jīng)清晰的表達(dá)出了他們的需求，只不過，并不是“horse”，而是“faster”。而汽車最終超越了它的競(jìng)品——馬，其中一個(gè)重要的因素也的確是faster。所以在速度這一點(diǎn)上面，汽車的用戶體驗(yàn)是好的。但是否就能說明，馬的用戶體驗(yàn)不好呢？當(dāng)然不是，如果到了沒有公路崎嶇不平的地方，即便還是比速度，十有八九還是馬更強(qiáng)一些。
上圖：福特和他的T型車，注意速度，比馬快哦~
討論完了用戶體驗(yàn)，我們?cè)賮砑m結(jié)一下「設(shè)計(jì)」吧。
大部分時(shí)候，我們?cè)诠緝?nèi)部所說的設(shè)計(jì)，指的是狹義的設(shè)計(jì)，偏重于“表現(xiàn)層”的設(shè)計(jì)。互聯(lián)網(wǎng)公司里面的各種“用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)”負(fù)責(zé)的大部分是界面層面的設(shè)計(jì)。但是，界面能代表「用戶體驗(yàn)」嗎？
其實(shí)在我的理解中，「設(shè)計(jì)」這兩個(gè)字所涵蓋的范圍是很大的，甚至夸張點(diǎn)兒，可以這樣講：人類所從事的全部工作，拆分出來一共就只有2件事情，一個(gè)叫「設(shè)計(jì)」，另一個(gè)叫「工程」。去思考，要做什么，要怎么做，叫設(shè)計(jì)；去做，叫工程。并且在現(xiàn)代社會(huì)，大部分的工作其實(shí)是包含這兩者的，只是誰多誰少而已。
例如，我們說鄧公是“改革開放的總設(shè)計(jì)師”，這里的設(shè)計(jì)顯然就跟我們平時(shí)所說的設(shè)計(jì)是不一樣的，他設(shè)計(jì)的是整個(gè)改革開放的策略。
例如，一個(gè)律師，他是設(shè)計(jì)師還是工程師呢？我傾向于認(rèn)為他是「設(shè)計(jì)師」，他設(shè)計(jì)的是每一個(gè)案子應(yīng)該如何辯論，要引哪部法律的哪一條，整個(gè)的這些策略。一個(gè)基金經(jīng)理，他是設(shè)計(jì)師還是工程師？他更像「設(shè)計(jì)師」，他設(shè)計(jì)的是投資策略，是分?jǐn)傦L(fēng)險(xiǎn)的方式。一個(gè)開發(fā)工程師，他當(dāng)然是「工程師」，因?yàn)樗?fù)責(zé)把產(chǎn)品經(jīng)理的需求用代碼“做出來”，他更關(guān)注的可能并不是需求本身，而是具體的代碼如何寫，以及如何寫代碼能夠運(yùn)行得更高效，能夠讓服務(wù)更穩(wěn)定，讓程序包更小。一個(gè)清潔工，他是設(shè)計(jì)師還是工程師？看起來好像更像「工程師」，因?yàn)榇蟛糠謺r(shí)候，他是在干活的，但一個(gè)“經(jīng)驗(yàn)豐富”的清潔工，絕對(duì)會(huì)去思考，地板如何清掃會(huì)更干凈、更快速，這就是設(shè)計(jì)啊。
回到互聯(lián)網(wǎng)產(chǎn)品上來，我以前曾經(jīng)總結(jié)過，影響互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)的主要有4個(gè)因素，這些因素其實(shí)都是需要設(shè)計(jì)的，這其中任何一個(gè)“設(shè)計(jì)”不合理，結(jié)論都是“用戶體驗(yàn)不好”。它們分別是：產(chǎn)品策略、用戶界面、技術(shù)、運(yùn)營(yíng)。
所以從這個(gè)角度來看，「用戶體驗(yàn)部」的設(shè)計(jì)師能夠cover到的，其實(shí)僅僅是「用戶界面」這一個(gè)環(huán)節(jié)而已。而所謂的「設(shè)計(jì)」，則是有著更加廣闊的延伸。
第二部分：設(shè)計(jì)原則概覽
我們還是把關(guān)注的焦點(diǎn)從“哲學(xué)”的層面，拉回到具體的產(chǎn)品設(shè)計(jì)上吧。任何領(lǐng)域，一定都會(huì)有一些基礎(chǔ)原則作為這個(gè)領(lǐng)域里面的方法論，這些原則往往是前人經(jīng)過大量的分析和實(shí)踐得出的，一般情況下，后人可以直接使用。我挑選了一些我認(rèn)為常用的設(shè)計(jì)原則與大家分享。但是在敘述這些原則之前，還是要先明確一下對(duì)待它們的基本態(tài)度，就是：反對(duì)「原教旨主義」。
原教旨主義是一個(gè)宗教名詞，具體的介紹你可以去維基百科上搜一下。很多宗教都會(huì)有原教旨主義的分支，概括起來，原教旨主義者的典型特征如下：
試圖回歸原初的信仰的運(yùn)動(dòng)
提倡對(duì)其宗教的基本經(jīng)文或文獻(xiàn)做字面的、傳統(tǒng)的解釋
并且相信從這些闡釋中獲得的教義應(yīng)該被運(yùn)用于社會(huì)、經(jīng)濟(jì)和政治生活的各個(gè)方面
在整個(gè)人類歷史上，原教旨主義給人類帶來了巨大的災(zāi)難，為此有很多無辜的人犧牲。同樣，在「設(shè)計(jì)」中，也存在類似的原教旨主義，我將其特征概括為下面這幾點(diǎn)：
死扣設(shè)計(jì)原則的字面意思，不考慮或較少考慮場(chǎng)景、整體邏輯
對(duì)「潮流」盲目跟風(fēng)
任性。不考慮或較少考慮狹義設(shè)計(jì)以外的因素
同樣，「設(shè)計(jì)原教旨主義」也會(huì)帶來災(zāi)難，我們或許會(huì)在后面的文字中看到相關(guān)的案例。好吧，我們正式開始闡述設(shè)計(jì)原則。
原則1：符合用戶使用需求
是的，一般的基礎(chǔ)原則，講出來都像是廢話。設(shè)計(jì)一個(gè)產(chǎn)品，最基礎(chǔ)的原則就是要符合用戶的使用需求。上文提到的福特，就是成功的在“速度”這個(gè)關(guān)鍵點(diǎn)上，設(shè)計(jì)出了符合用戶需求的產(chǎn)品，提升了用戶體驗(yàn)，于是大獲成功。確定需求是一個(gè)產(chǎn)品經(jīng)理的基本工作內(nèi)容，有很多方法和工具可以幫助我們找到用戶的需求。例如觀察用戶行為、分析數(shù)據(jù)、構(gòu)建用戶場(chǎng)景等等。由于這篇文章是從用戶體驗(yàn)的角度切入，所以在這個(gè)原則中，我們來討論這樣一個(gè)問題：你覺得12306這個(gè)服務(wù)的用戶體驗(yàn)如何？
聽起來好像又是一句廢話。我們翻一翻網(wǎng)上的各種評(píng)論就知道，大家對(duì)于12306基本上是罵聲一片的。例如，在知乎上面就有一個(gè)類似的問題：
如你所料，一片罵聲，甚至當(dāng)年還有人說你們這些做“用戶體驗(yàn)”的，做“設(shè)計(jì)”的，P用沒有，你看人家12306，“設(shè)計(jì)”得那么爛，PV、UV流量不照樣是全國(guó)領(lǐng)先，所以“用戶體驗(yàn)”沒用。我覺得說這話的人，一方面是冤枉我們這些“做設(shè)計(jì)”的人了，另一方面，只能說，您對(duì)“用戶體驗(yàn)”的理解還不夠。如果把12306看做一個(gè)互聯(lián)網(wǎng)產(chǎn)品，它的體驗(yàn)真的是爛到極點(diǎn)了。交互流程混亂、UI難看、服務(wù)不穩(wěn)定等等。但是請(qǐng)注意，我的問題是“12306這個(gè)「服務(wù)」的用戶體驗(yàn)如何”。從服務(wù)的角度看，12306是一個(gè)幫你買火車票的東西。我們想一下在沒有12306的時(shí)候，我們買火車票的體驗(yàn)是怎樣的呢？那年我在北京，零下20多度的氣溫，為了買到過年回家的火車票，我需要凌晨4點(diǎn)半起床，搭最早一班2號(hào)線地鐵到北京站；需要排3個(gè)小時(shí)的隊(duì)，有時(shí)候還是在室外排；但你會(huì)發(fā)現(xiàn)總是會(huì)有1到2個(gè)人排在你前面，好不容易開始賣票了，他們會(huì)天南海北買一堆車票。雖然你排第二，但是輪到你的時(shí)候，臥鋪票保證已經(jīng)賣光了。
上圖：北京站門口排隊(duì)購票的人群
但是現(xiàn)在有了12306，你依然只是「有可能」在上面買到票而已，但是至少我覺得，概率并不低于去車站排隊(duì)。在這個(gè)前提下，你可以放票的時(shí)候再起床，可以坐在溫暖的家里，可以一邊喝咖啡一邊點(diǎn)鼠標(biāo)。平心而論，對(duì)于買票這個(gè)需求來說，12306的體驗(yàn)比去火車站好太多了。
從產(chǎn)品策劃角度，我把一個(gè)產(chǎn)品的「體驗(yàn)」分為3個(gè)層級(jí)，分別是「有用」、「可用」、「易用」。
而12306這貨，在「有用」這個(gè)層級(jí)上是要等于或優(yōu)于排隊(duì)的，雖然在「可用」和「易用」兩個(gè)層級(jí)做得很差，但綜合起來，其「用戶體驗(yàn)」還是要優(yōu)于其“競(jìng)品”——去火車站排隊(duì)。
原則2：基于用戶的心理模型設(shè)計(jì)
這個(gè)原則聽起來有點(diǎn)兒抽象，但如果我在后面加上后半句，理解起來就會(huì)容易一些：基于用戶的心理模型設(shè)計(jì)，而不是基于業(yè)務(wù)或者工程模型，更加不是基于你自己的想法。
我們來研究這樣一個(gè)用戶場(chǎng)景：假設(shè)我的房東給我發(fā)短信，催我交房租，內(nèi)容如下：
harry啊，該交房租了啊。把錢匯到我的銀行賬戶吧。建設(shè)銀行，622600000001123，戶名：房東
這條短信中，核心信息有3個(gè)，銀行名稱、賬號(hào)和戶名。于是我打開某銀行的手機(jī)app，點(diǎn)擊了一個(gè)叫“轉(zhuǎn)賬匯款”的入口后，看到了這樣一個(gè)界面：
這是一個(gè)典型的基于業(yè)務(wù)模型，而不是用戶的心理模型來設(shè)計(jì)的功能。行內(nèi)轉(zhuǎn)賬、跨行轉(zhuǎn)賬我還能理解，但是不免想到，如果只給我一個(gè)框，選擇對(duì)方的銀行名稱，難道app本身還沒辦法判斷是“行內(nèi)”還是“跨行”嗎？第三項(xiàng)叫“跨行轉(zhuǎn)入”...聽起來好像是我會(huì)收到錢，它為什么會(huì)出現(xiàn)在“轉(zhuǎn)賬匯款”里面呢？好奇怪。后面，“手機(jī)號(hào)轉(zhuǎn)賬”和“一鍵轉(zhuǎn)賬”又是什么東西？如果我想使用這兩個(gè)功能需要另外開通嗎？另外“手機(jī)號(hào)轉(zhuǎn)賬”，聽起來好像是不需要知道對(duì)方的賬號(hào)，知道對(duì)方的手機(jī)號(hào)就能轉(zhuǎn)賬？是這個(gè)意思嗎？但是如果對(duì)方?jīng)]開通這個(gè)服務(wù)，會(huì)怎樣？我的錢會(huì)不會(huì)丟？萬一有兩個(gè)人在銀行使用了同一個(gè)手機(jī)號(hào)，我的錢到底會(huì)匯到哪兒去呢？
如果對(duì)于一個(gè)像我一樣，至少還上過幾年學(xué)，自己本身在做互聯(lián)網(wǎng)，并且其實(shí)每個(gè)月都要用相同方式交房租的人來說，看到這些都會(huì)糊涂的話，那如果對(duì)方是一個(gè)不懂互聯(lián)網(wǎng)，不懂金融的普通用戶呢？簡(jiǎn)直是災(zāi)難。
但相比之下，我們看看互聯(lián)網(wǎng)公司做的產(chǎn)品，就很不一樣了。下圖是支付寶的“轉(zhuǎn)賬匯款”界面：
這個(gè)界面上，只有卡號(hào)、銀行、姓名和金額4個(gè)必填項(xiàng)目，與房東提供的信息高度重合，完全符合用戶的心理模型。作為普通用戶，幾乎完全不需要思考，即可使用了。（雖然展示的是界面，但實(shí)際上我們并不是在討論界面本身，而是其背后的設(shè)計(jì)思想）
再舉一個(gè)例子，是我親身經(jīng)歷的。我之前在“騰訊微云”這個(gè)項(xiàng)目做交互設(shè)計(jì)，我們用了很長(zhǎng)時(shí)間，產(chǎn)品、設(shè)計(jì)、開發(fā)通力合作，終于做出了我們自己認(rèn)為很牛x的微云2.0手機(jī)客戶端。平心而論，微云2.0在當(dāng)時(shí)，不論是功能上，還是狹義的“設(shè)計(jì)”上，包括給用戶提供的存儲(chǔ)容量上，在國(guó)內(nèi)都是領(lǐng)先的。于是我們信心滿滿的將它提交到了App Store，過了一段時(shí)間，我們?nèi)シ从脩舻脑u(píng)論，好的就不說了，但是用戶罵的，大部分集中在同一個(gè)問題上。先賣個(gè)關(guān)子，您能從下面這幾張對(duì)比圖上，猜到用戶可能罵什么嗎？
上圖：微云1.6（舊版）的iPhone客戶端截圖
上圖：微云2.0（新版）界面。以內(nèi)容為核心，幫助用戶更加方便的找到存在云端的內(nèi)容，同時(shí)引入分類概念，使檢索更加有效。在交互、界面風(fēng)格等方面也更加“現(xiàn)代”。
怎么樣？對(duì)比了這兩個(gè)版本的截圖后，有沒有猜到，用戶最不滿意的罵的最多的是哪里？恩，估計(jì)你猜不到，因?yàn)榻貓D上沒有體現(xiàn)出來。哈哈~~事實(shí)上，用戶抱怨最多的，可能占80%以上的，是一個(gè)叫“簽到”的運(yùn)營(yíng)功能。如下圖所示：
簽到這個(gè)功能跟所有你見過的類似功能差不多，是用來拉活躍度的。具體來講，就是用戶每天可以打開微云，在一個(gè)特定的地方點(diǎn)一下，就能獲得一些空間，少則16M，多則512M。
微云2.0發(fā)布前夕，正好是國(guó)內(nèi)“網(wǎng)盤大戰(zhàn)”最火熱的時(shí)期。競(jìng)品們推出了各種各樣的送空間活動(dòng)，有送10G的，有送20G的，有送幾百G的，也有上T的。微云自然也不甘落后，喊出了贈(zèng)送10T空間的口號(hào)。只要進(jìn)行幾個(gè)簡(jiǎn)單的操作（例如登錄手機(jī)客戶端），就可以獲得10T空間，到了后來，幾乎是只要注冊(cè)就能拿到10T的空間了。按照我們掌握的數(shù)據(jù)，結(jié)合國(guó)內(nèi)的網(wǎng)速，我們認(rèn)為10T是很大的空間，很多用戶可能“一輩子”都用不完。既然如此，在微云2.0發(fā)布時(shí)，我們選擇了將簽到功能砍掉（當(dāng)時(shí)想的是，以后上一個(gè)更完善的用戶等級(jí)體系），我們的邏輯很簡(jiǎn)單，你既然都已經(jīng)有10T空間了，并且你拼命用都很難用完，那每天送你的那幾百M(fèi)空間，自然是沒有意義了。
但出乎預(yù)料的是（現(xiàn)在想來，簡(jiǎn)直是必然的），用戶對(duì)于升級(jí)了新版后找不到簽到功能這件事情大為憤怒（前提是他們知道自己已經(jīng)擁有10T的存儲(chǔ)空間），紛紛到App Store給一星，破口大罵，甚至在百度貼吧“微云吧”里面開始流傳舊版本的apk安裝包用來降級(jí)。最終，我們加回了簽到功能（HTML5做的，不需要升級(jí)客戶端）。
這是一個(gè)比較典型的，沒有“基于用戶的心理模型設(shè)計(jì)”，而是基于業(yè)務(wù)模型和自己的想法設(shè)計(jì)的案例。按照業(yè)務(wù)模型來思考，既然空間已經(jīng)足夠多，那每天增長(zhǎng)的那一點(diǎn)點(diǎn)空間顯然是無意義無價(jià)值的；但是如果結(jié)合用戶的心理模型，就很容易理解用戶的行為。很多用戶已經(jīng)習(xí)慣了每天過來點(diǎn)一下，到也不一定是送的那一點(diǎn)兒空間他真的有用，只是這樣的行為會(huì)很大程度上加深用戶的成就感，這就是“人性”啊。
作者：xidea 來源：xidea的咖啡館
目經(jīng)驗(yàn)（案例一）
項(xiàng)目時(shí)間：2016-05 - 2016-08
項(xiàng)目名稱：醫(yī)療健康主題界面及功能開發(fā)
項(xiàng)目描述：
項(xiàng)目介紹
根據(jù)運(yùn)營(yíng)需求開發(fā)醫(yī)療健康主題活動(dòng)，向用戶推送活動(dòng)信息并進(jìn)行調(diào)查，根據(jù)調(diào)查結(jié)果向用戶反饋用戶的一個(gè)健康情況。
我的職責(zé)
完成后端+前端功能開發(fā)與實(shí)現(xiàn)，html5+css3+less+zepto+bootstrap實(shí)現(xiàn)響應(yīng)式布局，將動(dòng)態(tài)網(wǎng)頁生成靜態(tài)文件，編寫后臺(tái)接口給前端調(diào)用，調(diào)用微信Jssdk實(shí)現(xiàn)微信自定義分享、網(wǎng)頁授權(quán)，同時(shí)實(shí)現(xiàn)與app數(shù)據(jù)交互，實(shí)現(xiàn)用戶體檢報(bào)告在app中的展示瀏覽。
項(xiàng)目經(jīng)驗(yàn)（案例二）
項(xiàng)目時(shí)間：2015-12 - 2016-03
項(xiàng)目名稱：極速貸款（web移動(dòng)端）
項(xiàng)目描述：
項(xiàng)目介紹
極速貸款是一個(gè)金融貸款綜合服務(wù)平臺(tái)，致力于為上班族、工薪族、個(gè)體戶、藍(lán)領(lǐng)人群提供金融貸款產(chǎn)品的搜索和推薦服務(wù)。
我的職責(zé)
該項(xiàng)目是兩個(gè)人開發(fā) 我主要負(fù)責(zé)項(xiàng)目的搭建，頁面的跳轉(zhuǎn)，和數(shù)據(jù)的渲染。
1.使用百分比布局+響應(yīng)式布局適配不同終端。
2.使用ajax請(qǐng)求數(shù)據(jù)渲染頁面。
3.使用canvas實(shí)現(xiàn)圖表功能。
4.使用rem作為度量單位。
項(xiàng)目經(jīng)驗(yàn)（案例三）
項(xiàng)目時(shí)間：2016-11 - 2017-02
項(xiàng)目名稱：千色店app商城開發(fā)
項(xiàng)目描述：
項(xiàng)目介紹
千色店app商城是千色店自主開發(fā)的，除了一般商城該有的功能外，還包括門店預(yù)約、專屬顧問等功能，app的功能都比較貼合千色店的運(yùn)營(yíng)模式。該app商城為原生開發(fā)與H5相結(jié)合。
我的職責(zé)
負(fù)責(zé)千色app相關(guān)界面功能開發(fā)，包括但不限于每日簽到、時(shí)間軸、我的粉絲、收入明細(xì)、風(fēng)云榜等，與app配合完成交互，調(diào)取后端接口實(shí)現(xiàn)數(shù)據(jù)交互，同時(shí)處理好兼容。采用html5+css3布局排版，使用less編譯css，運(yùn)用css3實(shí)現(xiàn)小動(dòng)畫，通過requireJS進(jìn)行模塊化開發(fā)；運(yùn)用原生js、zepto、moveJs、droploadJs等實(shí)現(xiàn)上拉刷新下拉加載效果等。
項(xiàng)目經(jīng)驗(yàn)（案例四）
項(xiàng)目時(shí)間：2013-01 - 至今
項(xiàng)目名稱：Html5項(xiàng)目
項(xiàng)目描述：
項(xiàng)目介紹
http://xnxnxn.duapp.com/#/h5-pc
http://xnxnxn.duapp.com/#/h5-mobile
我的職責(zé)
1.按照設(shè)計(jì)稿原型制作頁面(div+css)
2.按照設(shè)計(jì)師要求制作動(dòng)畫效果
3.開發(fā)后臺(tái)接口,與前臺(tái)通信(Webservice)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
