既然是評價(jià)設(shè)計(jì)優(yōu)秀的應(yīng)用历筝,那就主要從設(shè)計(jì)層面進(jìn)行評價(jià)脓鹃。
Cockoo (布谷布谷)
是一款集白噪音番茄鐘奋姿、任務(wù)锄开、技能管理于一體的任務(wù)管理應(yīng)用。最大的優(yōu)點(diǎn)是UI設(shè)計(jì)簡潔優(yōu)雅称诗,同時(shí)帶有恰到好處的音效給用戶反饋萍悴。
視覺:
Icon是一只白底上的黑色簡筆畫布谷鳥,定下了整體應(yīng)用色調(diào)為黑白寓免。整體UI風(fēng)格帶手繪風(fēng)癣诱。
主界面主題內(nèi)容為一幅主圖片;下方為一個(gè)巨大的收回播放鍵袜香,意味著「開始」撕予。符合用戶心理模型;播放鍵上方有一個(gè)stepper,能夠準(zhǔn)確顯示這個(gè)stepper的加減號(hào)的作用蜈首,符合iOS HIG实抡。播放鍵左邊有一個(gè)狀態(tài)框,顯示今天在任務(wù)上所花時(shí)間欢策。Stepper似乎沒與其他兩個(gè)對齊吆寨。
上方的navigation bar設(shè)計(jì)也是符合規(guī)范的,標(biāo)題顯示了此頁是什么猬腰,有幫助按鈕(燈泡)以及菜單按鈕彈出隱藏菜單欄鸟废。
點(diǎn)擊播放按鈕,則開始番茄鐘姑荷,界面簡潔盒延,focus在內(nèi)容上(一個(gè)大大的計(jì)時(shí)器)
切換到task界面,navigation bar保持了一致風(fēng)格鼠冕√硭拢可以添加inbox task或者與skill聯(lián)系在一起的task。整體icon都是手繪風(fēng)懈费。并且為task list做了分類(smart list和My list)
切換到skill的時(shí)候计露,免費(fèi)用戶可以添加三種技能,添加后的技能是卡片式設(shè)計(jì)憎乙,每張卡片占據(jù)一屏票罐,timer占據(jù)面積最大,符合focus在內(nèi)容上的原則泞边,左滑則出現(xiàn)下一個(gè)技能卡片该押。Navigation
bar里可點(diǎn)擊查看各技能訓(xùn)練總時(shí)間和占比。
交互上阵谚,主要手勢是常見的點(diǎn)按蚕礼,swipe,比較新的一個(gè)是可以搖動(dòng)設(shè)備添加任務(wù)清單烟具。(這個(gè)手勢跟iPhone自帶的搖動(dòng)設(shè)備取消輸入沖突,但我個(gè)人感覺還好奠蹬,因?yàn)閺膩聿挥眠@個(gè)手勢取消輸入)朝聋。聲音反饋仿按鈕聲音,比較悅耳
主界面下滑會(huì)出現(xiàn)今天的總?cè)蝿?wù)數(shù)囤躁。(淡化背景冀痕,focus前景)
Flipboard(中國)
Flipboard是一款雜志形式的訂閱類型新聞應(yīng)用,最大的特點(diǎn)是仿實(shí)體報(bào)刊/雜志翻頁設(shè)計(jì)的交互很impressive割以。
交互:
啟動(dòng)屏:點(diǎn)開App金度,會(huì)有一個(gè)啟動(dòng)屏顯示Logo,顯示App反應(yīng)快捷而沒有多余的干擾严沥。
翻頁交互:點(diǎn)進(jìn)內(nèi)容閱讀的時(shí)候,上下滑動(dòng)模仿實(shí)體報(bào)刊雜志的翻頁交互很贊中姜。
UI設(shè)計(jì):
Icon是醒目的紅底消玄,上面是大寫的、經(jīng)藝術(shù)化處理的白色字母F丢胚。為總體視覺設(shè)計(jì)定下主色調(diào)翩瓜,紅色。
主界面上方圖片占據(jù)了大于1/2的位置携龟,且顏色偏深兔跌,下方有兩篇精選文章(白底黑字),但占據(jù)面積偏小峡蟋,這樣兩部分達(dá)成了一個(gè)平衡坟桅。且讓用戶注意力集中在內(nèi)容上。左上角的logo醒目但不搶眼蕊蝗。
下方是用tab bar的設(shè)計(jì)來進(jìn)行不同分類的切換仅乓,包括主頁,following蓬戚,search夸楣,notifications和me。并使用了紅色(key note)加粗下劃線來區(qū)分選中和未選中的tab bar狀態(tài)子漩。(主頁中間還有個(gè)小小的tab bar來切換頭圖新聞豫喧,同樣用了白色下劃線來區(qū)分選中和未選中狀態(tài)),tab bar用的是標(biāo)準(zhǔn)的iOS圖標(biāo)設(shè)計(jì)幢泼,但在following的圖標(biāo)上有所創(chuàng)新紧显。
主頁的兩篇精選文章點(diǎn)進(jìn)去是普通閱讀模式,白底黑字旭绒,除了上方的tool bar鸟妙,沒有多余信息干擾(focus在內(nèi)容)焦人。Toolbar包括四個(gè)選項(xiàng),喜歡重父,comment花椭,分享和flip into(加入自己的選集)。分享和flip into都是開啟一個(gè)新的半屏房午,彈出方式是自下而上矿辽;comment是切換到新的全屏,彈出是自右向左郭厌。查看文章的時(shí)候右方有顯示進(jìn)度條袋倔。
Following頁面是也有三個(gè)分類,All分類是grid格式排列折柠,呈現(xiàn)方式直接宾娜。同時(shí)小的tab bar下方有search bar。點(diǎn)進(jìn)任意follow的媒體扇售,首先是媒體的首頁(仿雜志封面)前塔,點(diǎn)按出現(xiàn)內(nèi)容,這里內(nèi)容和圖片是五五開的面積比例承冰。最右下方是與貫穿整個(gè)應(yīng)用同樣的一組tool bar华弓。下滑/上滑翻頁。
Search頁面相當(dāng)于是一個(gè)「發(fā)現(xiàn)」分類困乒,內(nèi)容共分為三組寂屏,最上方是一個(gè)search bar,可以直接關(guān)鍵詞搜索信息娜搂;接著是一個(gè)「大家都在看」分類迁霎,同樣以grid排列方式呈現(xiàn);再接下來是一個(gè)「discover more」涌攻,有各種編輯提供的主題選擇欧引。每日視頻精選的視覺也比較有意思,是以視頻預(yù)覽為背景+文字的方式呈現(xiàn)不同內(nèi)容的恳谎。點(diǎn)進(jìn)媒體芝此,右上角有follow按鈕可點(diǎn)擊。
提醒分類有鈴鐺圖標(biāo)和醒目的藍(lán)色find
friends按鈕因痛,有兩個(gè)小的tab bar分別區(qū)分notification和shared with you婚苹。
最后我的個(gè)人頁面分為上方的tool bar(添加friend,分享和設(shè)置)鸵膏,個(gè)人信息區(qū)膊升,以及占最大面積的個(gè)人創(chuàng)建的收藏夾(grid樣式)。依然是focus在內(nèi)容上面
總結(jié)來說谭企,視覺設(shè)計(jì)上廓译,主色調(diào)為紅色评肆,對于文件夾、媒體排列方式的處理是用了grid格式非区,重點(diǎn)是引導(dǎo)用戶focus在內(nèi)容瓜挽,并且符合規(guī)范地使用tab bar,tab bar的狀態(tài)區(qū)分一致為下劃線形式征绸。整體仿實(shí)體雜志的設(shè)計(jì)久橙。
Assembly
Assembly是一款在手機(jī)上快速進(jìn)行貼紙?jiān)O(shè)計(jì)的應(yīng)用。最大的特點(diǎn)是不僅設(shè)計(jì)優(yōu)良管怠,microcopy也做得很好淆衷,很拉近用戶距離。
交互:
有顯示logo的啟動(dòng)屏渤弛,快速響應(yīng)用戶指令祝拯。
Data entry:提供了sticker和各種元素的選擇,不需要用戶從0到1地設(shè)計(jì)
保留了前置狀態(tài)她肯。離開App后回到app,還是離開時(shí)的界面
Help:菜單里有Help菜單鹿驼,用文字+gif形式呈現(xiàn)
視覺/UI設(shè)計(jì):
Icon是一只紅橙藍(lán)綠色組成的(啄木)鳥。又讓人感覺像是可以收起來的一把瑞士軍刀辕宏,暗示其強(qiáng)大的工具屬性。
主色調(diào)為介于暗紅色和橙色之間的橙棕色砾莱。
整個(gè)應(yīng)用分為三個(gè)部分瑞筐,stickers,my work和Inspirations腊瑟。三個(gè)部分的切換通過底部的tab bar完成聚假。Tab bar通過選中顯示棕色,不選中顯示灰色來區(qū)分闰非。
Sticker和my work頁面最上方均突出顯示了應(yīng)用名稱和icon膘格,中間是「create new sticker」button,最下方最大面積是以grid格式排列了各種已有的sticker分類集财松。
Button有底色和外框?qū)π∽诌M(jìn)行了突出瘪贱,與上方大標(biāo)題形成了平衡。
點(diǎn)進(jìn)任意貼紙集辆毡,上方出現(xiàn)本頁標(biāo)題(告知用戶所處位置)以及分類tab bar,用戶可以從不同分類直接選擇一個(gè)sticker開始創(chuàng)作(為用戶提供選項(xiàng))菜秦。「create new
sticker」button保持了風(fēng)格一致舶掖。(每一組sticker下方還有設(shè)計(jì)師的名字球昨,尊重了設(shè)計(jì)師的著作權(quán)。)
進(jìn)入創(chuàng)作主界面眨攘,最中間是畫布(主要功能)主慰,上方有tool bar嚣州,包含菜單,snap,撤銷/重做共螺。下方有也是各種元素可供選擇该肴,選中某個(gè)元素,右方會(huì)出現(xiàn)工具欄璃谨,元素外緣出現(xiàn)虛線框加一角的圓形沙庐,表示可以旋轉(zhuǎn)。
在my work中佳吞,對文件的處理依然是grid格式拱雏,并可以通過上方的tool bar進(jìn)行編輯管理。并且把pro功能巧妙安靜地植入在了tool bar底扳。點(diǎn)擊該功能圖標(biāo)铸抑,出現(xiàn)很贊的microcopy,和下方的不同方案的訂閱按鈕衷模。
Inspiration里面可以查看別人的作品鹊汛。在沒有加載出來的時(shí)候,頁面出現(xiàn)「view more
on instagram」阱冶,同樣為用戶提供了解決方案刁憋,不至于困在原地茫然。
總結(jié)來說木蹬,該應(yīng)用使用的主色調(diào)為橙棕色至耻,使用的文件排列多為grid,使用的按鈕形狀主要為長條圓形镊叁。個(gè)人認(rèn)為inspirations里面featured gallery標(biāo)題設(shè)計(jì)有點(diǎn)問題尘颓。一個(gè)橫杠上面加文字和冒號(hào),會(huì)讓人以為可以點(diǎn)擊輸入晦譬。并且字體大小和粗細(xì)也不是很像標(biāo)題疤苹。
Fortune City
這是一款游戲化的記賬類應(yīng)用,最大的特點(diǎn)在于產(chǎn)品模型的創(chuàng)新想法敛腌。即結(jié)合游戲和記賬這兩個(gè)概念卧土。
交互
啟動(dòng)屏,前置狀態(tài)迎瞧,data entry提供了選擇(分類夸溶,數(shù)字,計(jì)算器)
視覺/UI
Icon主色調(diào)為淺綠色打底凶硅,上方為應(yīng)用名稱的Fortune大寫單詞缝裁,中間的T被替換為了一支橙色筆,意為記賬。整體的配色(淺綠+橙)偏幼童化捷绑,符合整體游戲風(fēng)格和定位的人群(游戲化的方式記賬韩脑,受眾應(yīng)為年齡層次比較低的群體)。
應(yīng)用只有一個(gè)主界面粹污,就是游戲界面段多。下方有卡片式顯示部分記賬區(qū)域,最下方的tool bar上的菜單點(diǎn)開也是卡片式的分類設(shè)計(jì)壮吩。包含shop,ranking, achievements, your city, post office进苍。中間是比較醒目的「添加新記賬條目」按鈕,左邊是個(gè)人財(cái)務(wù)圖表鸭叙。
整個(gè)應(yīng)用的概念是一個(gè)位于大海一座小島上的城市觉啊,這個(gè)城市需要通過用戶每天添加收支條目來一點(diǎn)點(diǎn)創(chuàng)建。每添加一個(gè)條目沈贝,就會(huì)新蓋起一個(gè)點(diǎn)(有點(diǎn)類似大富翁)杠人,點(diǎn)擊建筑可以選擇對它進(jìn)行移動(dòng),合并或者詳情顯示宋下。
城市里面有各種居民在活動(dòng)嗡善,點(diǎn)擊居民可以對他們進(jìn)行各種操作(比如花鉆石邀請他加入你的城市)。
該應(yīng)用的商業(yè)化植入也用在了居民身上学歧,點(diǎn)擊頭上有AD字樣的居民罩引,可以玩小游戲,這些小游戲需要額外下載(也就是小游戲的廣告)枝笨。
應(yīng)用整體是扁平化的游戲設(shè)計(jì)風(fēng)格蜒程,但tool bar是擬物化的風(fēng)格∷帕保可能是想通過這個(gè)說明,游戲是虛擬的忌锯,而tool bar里的記賬功能與真實(shí)生活連接在一起伪嫁。
總體上來說,該應(yīng)用的設(shè)計(jì)比較負(fù)責(zé)偶垮,但精美度還是欠佳张咳。但創(chuàng)意不錯(cuò)芥玉。
Elk
Elk是一款極簡主義風(fēng)格的匯率應(yīng)用恬试。最大的特點(diǎn)在于交互和設(shè)計(jì)上的簡潔。
視覺:
Icon為黑底上的一直加拿大馬鹿抡草。使用這個(gè)鹿作為logo砚哗,個(gè)人猜測是因?yàn)轳R鹿具有很強(qiáng)龙助、廣泛的適應(yīng)性。暗示了該匯率轉(zhuǎn)換器在不同貨幣間的強(qiáng)大適應(yīng)性蛛芥。
總體色調(diào)為暗色(黑提鸟、灰军援、灰綠)。
應(yīng)用只有一個(gè)主界面称勋,就是匯率轉(zhuǎn)換界面(focus在主要功能)胸哥。左右分區(qū),展示換匯的兩種貨幣名稱以及從10到100的貨幣區(qū)間赡鲜。左滑數(shù)字組減為1/10空厌,右滑數(shù)字組擴(kuò)大十倍。點(diǎn)擊兩個(gè)數(shù)字間的位置银酬,則出現(xiàn)更為細(xì)分的數(shù)字區(qū)間(個(gè)位數(shù))嘲更。對應(yīng)的貨幣一目了然。
點(diǎn)擊貨幣名稱出現(xiàn)菜單彈窗捡硅。包括Pro功能(個(gè)性化匯率)哮内,交換兩種貨幣位置,以及改變貨幣壮韭。
改變貨幣出現(xiàn)新的全屏北发,上方為標(biāo)題Hint,下面是一個(gè)search bar,主界面是各種貨幣喷屋,右邊有首字母為順序排列的目錄琳拨,點(diǎn)擊可跳轉(zhuǎn)。
交互:首次開啟應(yīng)用屯曹,會(huì)有簡單的手勢引導(dǎo)教程狱庇。
交互手勢只有左右滑動(dòng),點(diǎn)按恶耽。
Data entry是全為選擇形式密任,沒有手動(dòng)輸入。超方便偷俭。
總體來說浪讳,這款應(yīng)用的設(shè)計(jì)是小而美的。風(fēng)格極簡涌萤,操作簡單淹遵,在IOS HIG基礎(chǔ)上有創(chuàng)新,讓用戶最大程度focus在核心功能负溪,無干擾透揣。