2020-11-13 10:00:00 來自于應(yīng)用公園
一、產(chǎn)品定點(diǎn)
這是一個(gè)網(wǎng)上點(diǎn)餐軟件,為用戶提供集點(diǎn)餐、送餐于一體的服務(wù)。在為消費(fèi)者節(jié)省大量時(shí)間的同時(shí),幫助消費(fèi)者發(fā)現(xiàn)更多更好的美食。
二、項(xiàng)目背景
隨著都市生活節(jié)奏的加快,大多數(shù)人忙到連給自己做一頓美食的時(shí)間都沒有,對(duì)于這類 很忙碌但又想品嘗到不同美食的人,網(wǎng)上點(diǎn)餐成為了他們必要的需求,我們的產(chǎn)品就在 這種情況下產(chǎn)生。點(diǎn)餐軟件很好的解決了大部分都市人群關(guān)于吃飯的問題,在幫他們節(jié) 省了大量時(shí)間的同時(shí),也幫助他們發(fā)現(xiàn)更多更好的美食。
三、目標(biāo)人群
主要目標(biāo)用戶是都市中忙于工作的白領(lǐng),學(xué)業(yè)繁忙的學(xué)生。
四、apppark.cn" target="_blank">APP軟件界面設(shè)計(jì)
1、首頁(yè)界面設(shè)計(jì)
主要頁(yè)面統(tǒng)一采用大標(biāo)題的設(shè)計(jì)風(fēng)格,此處的卡片以圖片疊加文字的方式處理,為了不影響閱讀,在卡片的上方加一層白 色漸變突出文字。用戶可以點(diǎn)擊查看按鈕, 查看更多關(guān)于該店鋪的內(nèi)容。
界面的背景顏色使用淺灰色,卡片的顏色 使用純白色,因?yàn)榛疑谝曈X上相對(duì)靠后 白色在視覺上相對(duì)靠前,這樣整個(gè)頁(yè)面看 起來有明暗對(duì)比,更富有層次感。
操作區(qū)的圖標(biāo)使用線性圖標(biāo),在配色上采 用深黑色加高飽和度高亮度的紅色,這是 一組經(jīng)典配色組合,形成對(duì)比又不單調(diào), 整體看起來清爽、和諧又富有趣味。
2、apppark.cn" target="_blank">APP軟件詳情頁(yè)界面設(shè)計(jì)
在店鋪詳情頁(yè)上,主要信息以頂部圖片加 卡片的形式表現(xiàn)。并且在圖片下方疊加一 層白色漸變,達(dá)到與背景的統(tǒng)一融合,同 時(shí)更好地與卡片自然銜接。在卡片中可以查看店鋪的詳情介紹、營(yíng)業(yè) 時(shí)間、具體地址以及評(píng)分情況。
3、食物制作詳情
在食物制作介紹頁(yè)面,可以查看食物的制作方法,同時(shí)將食材清單以十字交叉的交 互形式呈現(xiàn)出來,節(jié)省了頁(yè)面空間的同時(shí) 減少用戶操作成本,簡(jiǎn)單快捷。在頁(yè)面下 方以圖標(biāo)加文字的形式將食物的熱量、溫 度等參數(shù)展示給用戶,一目了然。
4、購(gòu)物車界面
在購(gòu)物車?yán)镲@示之前添加過的商品,將商 品的具體信息以卡片的形式呈現(xiàn),視覺上 簡(jiǎn)潔又易于理解。點(diǎn)擊結(jié)算后進(jìn)入訂單核 對(duì)頁(yè)面,核對(duì)頁(yè)顯示消費(fèi)者的個(gè)人信息以 及訂單詳情,簡(jiǎn)潔易懂。
5、送餐員騎行軌跡
當(dāng)用戶下單后,會(huì)在送餐地圖上顯示送餐 員的騎行軌跡,走過的路線以彩色的形式 標(biāo)識(shí),未走過的路線顯示灰色,同時(shí)在送 餐員頭像旁顯示送餐狀態(tài),讓用戶隨時(shí)了 解送餐情況并感到這是一個(gè)可控事件,從 而緩解用戶等餐時(shí)的焦慮情緒。
6、送餐員詳情
當(dāng)向上滑動(dòng)時(shí)會(huì)隱藏地圖,以文字的形式 顯示配送狀態(tài)。用戶可以查看卡片中送餐員的具體信息、訂單詳情及撥打電話聯(lián)系
7、店鋪推廣介紹
左邊是店鋪名稱和店鋪宣傳文案,右邊是 店鋪的整體評(píng)分,再配以圖片,在視覺上 達(dá)到圖文結(jié)合的目的。每一個(gè)店鋪為一組, 組與組之間用分隔線隔開。所有的信息梳 理有規(guī)律又富有節(jié)奏,便于用戶瀏覽理解。
8、店鋪詳情介紹
店鋪詳情頁(yè)頭部以圖片的形式呈現(xiàn),當(dāng)用 戶點(diǎn)開該頁(yè)面的時(shí)候形成一定的視覺沖擊。 中間的內(nèi)容介紹以圖文結(jié)合的形式呈現(xiàn), 整個(gè)布局張弛有序,讓用戶看起來不會(huì)平 淡無趣。
9、優(yōu)惠卡券頁(yè)面
在卡券設(shè)計(jì)上,左邊顯示具體金額,右邊 以文字的形式說明卡券的使用方式,再在 右上角上疊加一個(gè)降低透明度的圖形,這 樣既能達(dá)到平衡版面的作用,又不會(huì)造成 視覺干擾。在顏色使用上,同種類型的卡 券使用同種顏色,顏色與顏色之間的關(guān)系 是相鄰色,這樣整體看起來即統(tǒng)一又對(duì)比。
10、錢包余額設(shè)計(jì)
余額是為數(shù)不多視覺,所以在字體樣式上使用 加大加粗的紅色表示。收入支出是次要信 息,在字體樣式上用較小的黑色表示。形 成對(duì)比,凸顯重要信息。整體圖標(biāo)以圓形呈現(xiàn),圖標(biāo)背景吸取主體 圖標(biāo)的顏色并降低透明度,形成層次感。 圖標(biāo)與圖標(biāo)之間的顏色使用相鄰色,這樣 整體風(fēng)格趨向統(tǒng)一。