背景介紹

Daily UI DAY4 的任務(wù)是做一個計算器，感覺原意大概是要做一款集加減乘除的計算器，看了很多其他的設(shè)計，都很漂亮很簡潔大方，自己做的話1234567890+-*/大概也是那樣的布局吧，突然想起上個學(xué)期的一個想法，然而執(zhí)行力極低的我?guī)缀跻阉袅?。趁有這個任務(wù)把那個想法稍微實現(xiàn)一下好了。

家里是藥店，中藥西藥都有售，西藥的價格比較簡單，都是一瓶或者一盒?？墒侵兴幍膬r格卻不是，有些特別輕是以克為單位，稍微重些以10克為單位，有些以兩為單位，斤的很少，但也有。去年放假回家在家?guī)兔Φ臅r候竟覺得自己也是退化了，6塊錢10克的可沖水喝的菊花，8塊錢10克的銀花，4.5一兩的枸杞，這幾個數(shù)我直到開學(xué)還會記混。直接說買幾兩幾克的還好，最心塞的是大部分人上來一問完價格就會直接“給我來10塊吧”，每次都弄好久，假裝很細(xì)心地把藥品包裝好！其實是因為心里一直在算啊啊啊，又覺得拿旁邊的那個高調(diào)發(fā)聲的計算器來算的話簡直會LOW到爆，然后就磨蹭好久哈。那時候一直想著要開發(fā)一個APP能定單價后選擇輸入價格或者輸入數(shù)量就可以直接算出相應(yīng)的值。然而這個想法一直拖到再次放假還是沒有實現(xiàn)，那就借這一次先做一下設(shè)計吧，開發(fā)的就再說吧。。。

交互設(shè)計

這個想法最主要的就是涉及幾個奇怪參數(shù)，定價、定價的單位、支付的錢數(shù)和購買的數(shù)量，前兩個是必須定下的，后兩個任選一個填寫，剩下的就是需要計算的結(jié)果。用戶需要填寫三項，比較麻煩，但這是不可必免的，只能盡量讓這個過程更快更清晰。它們的填寫并不像加減乘除那樣有一個絕對的順序，所以可能需要用戶去一個一個點著選擇，但是想一想這個過程覺得好可怕，我得【點單價>輸入單價>點單位>選擇單位>點支付或數(shù)量>輸入數(shù)值>結(jié)果】！??！還不如直接心算得了。

怎么簡化流程？我想一般都會先輸入單價和單位，才是客人要買的錢數(shù)或數(shù)量，那么其實他們還是可以有順序輸入的，那我直接在鍵盤區(qū)域加入一個“下一項”的按鈕，那么用戶在輸入數(shù)值的時候順帶馬上點“下一項”就會方便許多，不用再移動到上方去選擇參數(shù)相應(yīng)區(qū)域，“下一項”按鈕可以一直在四個輸入?yún)^(qū)一直循環(huán)，這樣的話可以跳過（解決了第三個支付錢數(shù)可能就是我要的結(jié)果的問題），不小心跳過的話也可以“嗒嗒嗒”點三次回到上個數(shù)值。當(dāng)然輸入?yún)^(qū)域還是可以點擊的咯，不用白不用。

接下來是比較棘手的單位問題，最初十分堅定的是要用滾動選擇的方法來設(shè)計這個輸入，操作方便，甚至在想輸入定價要不要也用這個滾動，但這個實在不可能，0.1-10.0就會有100個選項，操作就算再流暢也需要手指滾好幾輪吧，那這個還是得輸入數(shù)值。那么單位，如果直接在顯示區(qū)域滾動，那不就違背了“下一項”按鈕的初衷了，我還是得移動手指到上方去點擊單位項并且還要在那個區(qū)域滑動手指，好費勁哦！所以，把滾動選項放到數(shù)字鍵盤區(qū)吧，好像還行。

手指左右滑動選擇單位

可是我發(fā)現(xiàn)只有單位這一項是需要滾動選擇的（數(shù)量的單位可以默認(rèn)跟單位一樣）。我有必要在鍵盤區(qū)為這么一項選擇鋪出1/5的區(qū)域嗎？而且它應(yīng)該只有4個值?。恕⑹?、兩、斤）。果斷放棄吧。而且這么一個小項目，又點擊又滑動的也是很奇怪。

那還是點擊輸入，可是只有4個值，我專門為些做文字鍵盤簡直不可能！那采用“下一項”按鈕的方法？設(shè)置一個“換單位”的按鈕，反正最多也是“嗒嗒嗒”點三次。先這樣吧。

界面設(shè)計

其實交互設(shè)計的過程一直是和界面交替著的，感覺這樣其實不好。設(shè)計最開始陷入奇怪的配色過程，因為一直很想試試經(jīng)典的藍(lán)粉配，感覺很好看啊，就試試吧。然后就一直在想鍵盤區(qū)的配色要不要跟著變化，那豈不是很亂。可是單色的話我要先粉色還是藍(lán)色呢哈哈哈。。。糾結(jié)后決定！我還是先用黑色吧，所以前面浪費了好長一段時間。

藍(lán)粉配色的輸入?yún)^(qū)

然后就是說明文字要放哪，像上圖肯定是不行了，占用太多空間了，我要放1234567890等呢。那就直接放到框內(nèi)吧，想起注冊登錄時一般都會有特別淺色的說明文字在input里，然后用戶開始輸入后消失，但是我這個吧，有四個輸入?yún)^(qū)，感覺好亂哦，而且四者很容易混（在定說明文字的時候就糾結(jié)了一會），所以開始輸入后去掉說明文字就會變成，4.5/十克/支付/50克，好奇怪的內(nèi)容，很容易不知道自己正在輸入的是什么。

沒有數(shù)值時顯示說明文字，輸入數(shù)值后說明文字透明度降低

那我就在輸入的時候把說明文字變淡？好吧，一個字，亂。還是乖乖把說明文字顯示著吧，可以小點。

最終效果

最后就是這樣了。首次輸入的時候點擊定價，輸入數(shù)值>下一個>換單位>下一個>數(shù)值>得到結(jié)果。再加入一個小功能，該輸入數(shù)值的時候“換單位”按鈕變淡（表示不可點擊），該換單位時數(shù)字區(qū)和“取消”按鈕變淡。

Demo演示

app 操作動畫

感覺還是需要有個操作演示才能說清楚，在網(wǎng)上找了各種做GIF的方法，最后還是KEYNOTE拯救了我。Keynote簡直神器，自帶動畫簡直舒服到不要不要的。雖然單Demo演示就做了一個多小時，但都值啦，有動畫還是比較直觀的。

最后

很小很簡單的一個APP設(shè)計，但過程中還是糾結(jié)了許多的，使得這個Daily UI的訓(xùn)練過程不僅限于設(shè)計，交互上也思考了許多。雖然覺得最后不是最優(yōu)解，功能的用處很小，也不一定會去開發(fā)出來，但做完后還是很滿足的。

第一次寫設(shè)計過程，好啰嗦，寫完后感覺其實也沒寫什么。

可能性

這樣的設(shè)計開發(fā)出來還是不好用吧。輸入定價和單位還是太麻煩了，其實正確做法應(yīng)該是把藥品信息全都事先導(dǎo)入，然后計算的時候選擇藥品名，再輸入數(shù)量或支付錢數(shù)就直接算出，但問題在于如果藥品種類太多在手機上也不好選擇，那掃碼呢？就像超市的結(jié)賬系統(tǒng)一樣，也是通過條形碼獲得商品價錢。但是需要稱重量買的東西都是散裝的，不可能都貼上條形碼，就像在超市買米還是得先在米區(qū)裝一袋稱完后貼上有條形碼的標(biāo)簽【而且這種情境下好像并不能實現(xiàn)“我要買10塊錢米，你稱給我”】。但至少我可以將一條一條的單價數(shù)據(jù)存入一個一個的條形碼或者二維碼，貼在特定的散裝區(qū)，我只要掃碼就能獲取數(shù)據(jù)自動填入“定價”和“單位”，接下來只要輸入一項就可以得到結(jié)果。所以藥品種類多的話可以掃碼的方式替換手動選擇。但需要付出的成本是將需要讓數(shù)據(jù)與碼一一對應(yīng)，還需要一一貼到相應(yīng)的藥品上，工程量還是挺大的。

那么，再開點腦洞，用語音輸入好吧。甚至三項操作都可以直接由語音來實現(xiàn)，如“10塊銀花”“100克銀花”，簡單的一句話可以獲取三個信息，首先，定位“塊”字或“克”字，這也確定了填的是第三項（支付）還是第四項（數(shù)量），這個字前面的內(nèi)容就是數(shù)值，這個字后面的就是藥品名，通過藥品名檢索數(shù)據(jù)就可獲得相應(yīng)定價和單位。輸入?yún)^(qū)獲得三項值啦，結(jié)果當(dāng)然就出來了，所以不需要去生成二維碼，也不需要貼，只要幾個字就可得到結(jié)果。想想竟覺得好方便啊我的天！然而！我普通話好差，我爹媽普通話也好差，“14塊”怎么辦？！所以，全文結(jié)束了。

把明天的任務(wù)ICON也做了，但沒認(rèn)真做，ICON實在是...總覺得有時候花多久都做不出來，有時候有一個好的想法一下子就有產(chǎn)出了，然而還是不知道如何是好。太令人捉摸不透了。

英文版： https://medium.com/@wykay_z/design-processing-of-daily-ui-004-calculator-32757a2ebe45

Daily UI: http://weibo.com/p/1008087c8674a8467bd94ef3290de6dc656be0?k=Daily+UI&from=501&_from_=huati_topic