2015-12-15 用心設(shè)計(jì)
臨近春如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
來(lái)源：莫貝網(wǎng)
其實(shí)我已經(jīng)很久沒(méi)用12306官方 APP 了，光看圖標(biāo)那騷氣的紅藍(lán)配色我已經(jīng)醉了，打開(kāi)12306 APP，我的內(nèi)心是奔潰的，感覺(jué)整個(gè)人都不好了，依舊是那么的…………… 嗶 ..
不說(shuō)了，發(fā)幾個(gè)截圖你們感受一下：
這略顯沉悶的配色（莫非這就是傳說(shuō)中的高級(jí)灰），粗糙的界面，虛邊兒的圖標(biāo)，疏密不一的留白間距，讓人心塞的排版，一個(gè)界面就超過(guò)N種字號(hào)的文字，最不能容忍的是加載沒(méi)有居中！沒(méi)有居中！沒(méi)有居中！重要的事要說(shuō)三遍，強(qiáng)迫癥不能忍，確定不是直接拿原型開(kāi)發(fā)的嗎？
體驗(yàn)上，生硬的切換動(dòng)效，卡爆了的操作，最重要的是那個(gè)已經(jīng)擊敗了全國(guó)99%購(gòu)票者的奇葩。。。驗(yàn)。。。證。。。碼。。。說(shuō)好的“便捷購(gòu)票”呢！這已經(jīng)不是我能用文字表達(dá)清楚的了，相信小伙伴們已經(jīng)親身感受過(guò)了。
之前看到很多小伙伴重設(shè)計(jì)了 12306 APP，每個(gè)人對(duì) 12306 APP 都有自己不同的感受和想法。
我在去年年初也對(duì)12306進(jìn)行了重設(shè)計(jì)：
那時(shí)的 12306 APP 還不是這一版，度娘了一下當(dāng)時(shí)我重設(shè)計(jì)時(shí)看到的版本，你們感受下。
簡(jiǎn)單挑幾個(gè)界面說(shuō)一下我當(dāng)時(shí)設(shè)計(jì)的想法吧——因?yàn)槭蔷毩?xí)作，也沒(méi)有過(guò)任何實(shí)際的 APP 項(xiàng)目經(jīng)驗(yàn)，所以其中部分功能純屬臆想，可能會(huì)跟開(kāi)發(fā)有沖突，還有一些功能現(xiàn)在回看一下是沒(méi)有考慮到的。
那時(shí)對(duì)12306APP重設(shè)計(jì)的初衷就是：不想搞天馬行空炫酷的概念設(shè)計(jì)，跟上扁平化的腳步，視覺(jué)扁平化，信息架構(gòu)層級(jí)扁平化，摒棄復(fù)雜多余的功能和元素，設(shè)計(jì)一個(gè)用戶(hù)看著舒心，操作簡(jiǎn)單，購(gòu)票便捷實(shí)用的 APP ——給用戶(hù)少的選擇，突出信息，用少的點(diǎn)擊和時(shí)間購(gòu)到票。
碰到春運(yùn)這種客觀因素請(qǐng)自動(dòng)忽略，因?yàn)槟鞘钦娴膿尣坏狡卑。。。。ㄔ谶@鄙視一下鐵總對(duì)春節(jié)客運(yùn)路線的規(guī)劃和可惡的黃牛黨）
12306 APP 整體色調(diào)采用了紅色和深灰藍(lán)作為主色調(diào)，一方面是鐵道部 logo 是紅色的，另一方面考慮到紅色是刺激性顏色，能夠潛意加快用戶(hù)瀏覽訂票信息、購(gòu)票的速度。
深灰藍(lán)這個(gè)顏色，純屬為了跟紅色搭配，靠直覺(jué)配出來(lái)的，木有理論依據(jù)支撐（我是野生派出生）。
選擇地點(diǎn)側(cè)邊欄彈出城市，是想讓整個(gè) APP 在深度上層級(jí)變淺。有小伙伴會(huì)說(shuō)點(diǎn)擊字母選擇時(shí)容易誤操作返回主界面，這個(gè)當(dāng)時(shí)想的是無(wú)法點(diǎn)擊右側(cè)返回，而是選擇城市后自動(dòng)返回或者手勢(shì)左滑拖動(dòng)返回主界面。這想法未考慮到一些移動(dòng)規(guī)范，現(xiàn)在我可能不會(huì)采用這種交互形式了。
標(biāo)簽欄的“更多”這個(gè)非高頻率使用的板塊，當(dāng)時(shí)確實(shí)沒(méi)有考慮到，只是遵循了原12306的布局，現(xiàn)在我也會(huì)把它整合到“個(gè)人”里。改成“搶票”也不錯(cuò)，這個(gè)用戶(hù)痛點(diǎn)當(dāng)初沒(méi)想到啊，失??！
選票頁(yè)面，頂部時(shí)間和篩選功能保持固定，跟主界面統(tǒng)一，讓用戶(hù)保持操作習(xí)慣，減少界面跳轉(zhuǎn)后用戶(hù)的視覺(jué)斷層和識(shí)別思考的停頓時(shí)間。時(shí)間可左右滑動(dòng)選擇，相對(duì)于點(diǎn)選上一天下一天來(lái)說(shuō)靈活選擇性更大。
點(diǎn)擊右上角“+”下拉篩選功能。那個(gè)時(shí)候訂票還沒(méi)有提前60天這么多，所以下拉時(shí)間選擇這塊現(xiàn)在看來(lái)可能會(huì)體驗(yàn)上不是那么好。有小伙伴可能會(huì)說(shuō)用戶(hù) 對(duì)右上角“+”這個(gè)具體功能的認(rèn)知度很低，一般情況下會(huì)不知道是干嘛用的。這個(gè)會(huì)在新用戶(hù)第一次進(jìn)入界面的時(shí)候有個(gè)文字引導(dǎo)說(shuō)明。
選擇自己想要的車(chē)次后底部彈出購(gòu)票按鈕。可能小伙伴們會(huì)問(wèn)我為何我要讓用戶(hù)點(diǎn)擊兩次呢？而不是直接點(diǎn)擊想要的車(chē)次進(jìn)入下一步訂票頁(yè)面。
一方面，我考慮到的是用戶(hù)在上下滑動(dòng)瀏覽信息的過(guò)程中可能會(huì)誤操作，而點(diǎn)中了不是自己想要的票（這個(gè)機(jī)率貌似很小，可能是我想多了），另一方面，考
慮到用戶(hù)可能會(huì)繼續(xù)往下瀏覽看看其它車(chē)次選擇，這樣在回翻的時(shí)候，大面積的色塊選中能讓用戶(hù)快速定位到，減少了用戶(hù)再一次反復(fù)滑動(dòng)尋找的時(shí)間。
接下來(lái)的購(gòu)票頁(yè)面，個(gè)人當(dāng)初的想法就是想簡(jiǎn)簡(jiǎn)單單呈現(xiàn)基本信息就好，現(xiàn)在回看，在實(shí)用性和用戶(hù)體驗(yàn)上還有待欠缺，比如余票的數(shù)量，訂票的支付剩余時(shí)間等一些基本提示信息都沒(méi)有考慮到。
簡(jiǎn)單總結(jié)下我重設(shè)計(jì)APP時(shí)秉持的原則吧：
· 嚴(yán)格遵守視覺(jué)規(guī)范，包括字號(hào)，間距，icon 大小
· 保持良好的交互思維，好的產(chǎn)品一定是建立在好的交互體驗(yàn)上的
· 多體驗(yàn)優(yōu)秀APP產(chǎn)品
野生派出生，木有強(qiáng)大的數(shù)據(jù)去支撐，木有豐富的理論依據(jù)去解釋每一處設(shè)計(jì)細(xì)節(jié)，現(xiàn)在回看這個(gè)設(shè)計(jì)還是略顯單薄稚嫩的。移動(dòng)端設(shè)計(jì)在不斷變化創(chuàng)新發(fā)展，現(xiàn)在也已經(jīng)有很多優(yōu)秀的第三方訂票助手，相信小伙伴們體驗(yàn)了那么多產(chǎn)品后，有比我更好的想法，讓用戶(hù)驚喜的交互功能和視覺(jué)表現(xiàn)形式。
作者：@玖八壹
來(lái)自：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net