移動(dòng)端店鋪設(shè)計(jì)玄機(jī)

移動(dòng)端店鋪設(shè)計(jì)玄機(jī)移動(dòng)端玄機(jī)首圖展示:由于移動(dòng)端進(jìn)入寶貝詳情頁(yè)時(shí)，首圖的位置占據(jù)了全屏的二分之一，用戶(hù)需要下拉經(jīng)過(guò)標(biāo)題、評(píng)價(jià)、店鋪信息、關(guān)聯(lián)寶貝、海報(bào)等過(guò)渡展示，才能進(jìn)入寶貝的詳情頁(yè)面，所以對(duì)于許多用戶(hù)來(lái)說(shuō)，他們養(yǎng)成了直接側(cè)滑首圖看產(chǎn)品的習(xí)慣，也就是說(shuō)，如果首圖能夠吸引他們，就會(huì)往下看詳情頁(yè)面，反之則直接離開(kāi)了。這意味著，比之于PC端，首圖的重要性大大增加了.移動(dòng)端玄機(jī)3首頁(yè)這5張主圖，就不能像PC那樣設(shè)置：第一張展示全面，其余四張展示細(xì)節(jié)。而是要充分利用每一張主圖，展示產(chǎn)品個(gè)性角度，以及特色，甚至在主圖上就可以做賣(mài)點(diǎn)分析，力求一針見(jiàn)血，抓住用戶(hù)的需求。。具體來(lái)說(shuō)，我們可以通過(guò)各個(gè)頁(yè)面之間的關(guān)聯(lián)，如展示產(chǎn)品“前、后、左、右”的角度，如陳列產(chǎn)品的賣(mài)點(diǎn)“一、二、三、四”，通過(guò)關(guān)聯(lián)，讓用戶(hù)不知不覺(jué)已經(jīng)滑動(dòng)完了5屏，跳轉(zhuǎn)到了詳情頁(yè)第一屏。最重要的是，5張主圖必須圖片清晰、展示美觀(guān)，細(xì)節(jié)突出……并且占屏的比例可以比PC端更大。首圖位置其實(shí)是一個(gè)黃金位置，這個(gè)位置占屏比高，有標(biāo)題、價(jià)格等產(chǎn)品信息，用戶(hù)的眼球會(huì)集中在主圖本身。所以這個(gè)頁(yè)面用戶(hù)的停留時(shí)間一定是比較長(zhǎng)的，然后主圖可以設(shè)置5張圖片，通過(guò)左右滑動(dòng)可以切換移動(dòng)端玄機(jī)區(qū)別于PC的個(gè)性瀏覽移動(dòng)端與PC的差異性是非常大的，這種差異原因無(wú)非來(lái)自于，展示器的尺寸和比例，看似是一個(gè)放大和縮小的事情，實(shí)際上，卻是兩種完全不同的視覺(jué)體驗(yàn)。豎屏。首先移動(dòng)端和PC的屏幕比例是不同的，電腦多為寬屏，移動(dòng)端手機(jī)多為豎屏，這意味著PC端橫著占完一屏圖案和文字，放到移動(dòng)端，按比例縮小后，是占不完一屏的，所以直接從PC復(fù)制詳情頁(yè)到移動(dòng)端，圖片文字看起來(lái)更小。而要解決這個(gè)問(wèn)題，從根本上，設(shè)計(jì)要采用豎屏作圖。移動(dòng)端玄機(jī)豎屏的作圖思路有三個(gè)重要的要素：030201所有圖片的設(shè)計(jì)盡量以16:9豎屏比例設(shè)計(jì)，產(chǎn)品的展示背景畫(huà)面減少，產(chǎn)品（或模特）占屏更大更集中。圖片使用上下分欄，與PC寬屏不一樣，豎屏不能使用左文右圖的結(jié)構(gòu)，應(yīng)該利用長(zhǎng)度空間的富余，采用上下結(jié)構(gòu)，如上圖下文、上文下圖。圖片的設(shè)計(jì)一圖一主題。移動(dòng)端沒(méi)有PC的屏幕大，一張圖基本上就占完了屏幕，所以最好一張圖要表達(dá)清楚一個(gè)完整的意思?？傊?，豎屏是移動(dòng)端與PC最大的區(qū)別之一，設(shè)計(jì)者要遵循豎屏的設(shè)計(jì)規(guī)則。移動(dòng)端玄機(jī)文案編排移動(dòng)視覺(jué)的文案進(jìn)行不一樣的設(shè)計(jì)編排。ABC圖片上的標(biāo)題文字放大，起到一目了然，少文字概括總信息的作用。這樣可以增加對(duì)用戶(hù)的吸引力，即使用戶(hù)瀏覽匆匆一瞥，也知道你想表達(dá)什么。文案貴在精不在多，移動(dòng)端的文案尤其如此，文字太多，在一方小屏幕里，要么顯得過(guò)于細(xì)小，不便于閱讀，要么文字太多，影響了圖片的展示。文字展示清晰文案是視覺(jué)的重要部分，既是說(shuō)明也是補(bǔ)充，而讓文案清晰展現(xiàn)也非常重要，這里首先要注意的是圖片背景，文字落腳處背景必須簡(jiǎn)單干凈，利于文字的展現(xiàn)。其次，當(dāng)需要長(zhǎng)文字說(shuō)明時(shí)，盡量多排，增大行距，以利于文字的清晰展示。遵循以下幾個(gè)原則：減少文案內(nèi)容將放大標(biāo)題移動(dòng)端玄機(jī)形成閉環(huán)：由于移動(dòng)端的屏幕較小，展示的頁(yè)面比較狹小集中，這可以帶來(lái)產(chǎn)品展示的聚焦效果，用戶(hù)觀(guān)看一個(gè)頁(yè)面會(huì)更加專(zhuān)注，但是同時(shí)，每個(gè)頁(yè)面對(duì)關(guān)聯(lián)產(chǎn)品的展示比PC端效果差，用戶(hù)非常容易從一個(gè)頁(yè)面直接跳失離開(kāi)，所以形成移動(dòng)端的瀏覽路徑閉環(huán)，是非常必要的。移動(dòng)端玄機(jī)列表式布局特點(diǎn)：內(nèi)容從上向下排列，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)。優(yōu)點(diǎn)：1、層次展示清晰2、視覺(jué)流線(xiàn)從上向下，瀏覽體驗(yàn)快捷3、可展示內(nèi)容較長(zhǎng)的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題不足：1、導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)2、同級(jí)內(nèi)容過(guò)多時(shí)，用戶(hù)瀏覽容易產(chǎn)生疲勞3、排版靈活性不是很高4、只能通過(guò)排列順序、顏色來(lái)區(qū)分各入口重要程度場(chǎng)景：列表菜單適合用來(lái)顯示平級(jí)菜單，且較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題移動(dòng)端布局設(shè)計(jì)移動(dòng)端玄機(jī)陳列式布局特點(diǎn)：布局比較靈活，設(shè)計(jì)師可以平均分布這些網(wǎng)絡(luò)，也可根據(jù)內(nèi)容的重要性不規(guī)則分布，相對(duì)列表式，其優(yōu)點(diǎn)在于同樣的高度下可放置更多的菜單，更具有流動(dòng)性。優(yōu)點(diǎn)：1、直觀(guān)展現(xiàn)各項(xiàng)內(nèi)容2、方便瀏覽經(jīng)常更新的內(nèi)容不足：1、不適合展現(xiàn)頂層入口框架2、容易形成界面內(nèi)容過(guò)多，顯得雜亂3、設(shè)計(jì)效果容易呆板場(chǎng)景：適合以圖片為主的單一內(nèi)容瀏覽型的展示移動(dòng)端玄機(jī)九宮格式布局特點(diǎn)：相比陳列館式，布局比較穩(wěn)定為一行三列式布局。優(yōu)點(diǎn)：1、清晰展現(xiàn)各入口2、容易記住各入口位置，方便快速查找不足：1、菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)2、無(wú)法向用戶(hù)介紹大概的功能，初始狀態(tài)不如列表式明朗3、容易形成更深的路徑4、不能直接展現(xiàn)入口內(nèi)容5、不能顯示太多入口次級(jí)內(nèi)容場(chǎng)景：適合入口比較多的展示，而且導(dǎo)航之間切換不是很頻繁的情況，板塊之間相對(duì)獨(dú)立，沒(méi)有太多的關(guān)聯(lián)。移動(dòng)端玄機(jī)選項(xiàng)卡式布局特點(diǎn)：導(dǎo)航一直存在，可快速切換到另一個(gè)導(dǎo)航。優(yōu)點(diǎn)：1、減少界面跳轉(zhuǎn)的層級(jí)2、分類(lèi)位置固定3、清楚當(dāng)前所在的入口位置3、輕松在各入口間頻繁跳轉(zhuǎn)且不會(huì)迷失方向4、直接展現(xiàn)最重要入口的內(nèi)容信息不足：功能入口過(guò)多時(shí)，該模式顯得笨重不實(shí)用場(chǎng)景：大部分在底部，方便用戶(hù)操作。切換時(shí)，選中狀態(tài)高亮顯示，有少數(shù)放在頂部。適合分類(lèi)少及其內(nèi)容同時(shí)展示，導(dǎo)航菜單項(xiàng)數(shù)量為3-5個(gè)；各導(dǎo)航菜單項(xiàng)之間內(nèi)容/功能有顯著差異；用戶(hù)在各個(gè)導(dǎo)航選項(xiàng)之間需要非常頻繁的切換操作移動(dòng)端玄機(jī)輪播圖式布局特點(diǎn)：重點(diǎn)展示一個(gè)對(duì)象，通過(guò)手勢(shì)滑動(dòng)按順序查看優(yōu)點(diǎn)：1、單頁(yè)面內(nèi)容整體性強(qiáng)，聚焦度高2、線(xiàn)性的瀏覽方式有順暢感、方向感不足：1、受屏幕寬度限制，它可顯示的數(shù)量較少，需要用戶(hù)進(jìn)行主動(dòng)探索2、由于各頁(yè)面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容3、不能跳躍性地查看間隔的頁(yè)面，只能按順序查看相鄰的頁(yè)面場(chǎng)景：適合數(shù)量少聚焦度高，視覺(jué)沖擊力強(qiáng)的圖片展示。移動(dòng)端玄機(jī)伸展式布局特點(diǎn)：能在一屏內(nèi)顯示更多細(xì)節(jié)，無(wú)需頁(yè)面的跳轉(zhuǎn)優(yōu)點(diǎn)：1、減少界面跳轉(zhuǎn)的層級(jí)2、對(duì)分類(lèi)有整體性的了解3、清楚當(dāng)前所在的入口位置不足：分類(lèi)位置不固定，當(dāng)展開(kāi)的內(nèi)容比較多時(shí)，跨分類(lèi)跳轉(zhuǎn)不方便場(chǎng)景：適合分類(lèi)多及其內(nèi)容同時(shí)展示內(nèi)容展示的信息多移動(dòng)端玄機(jī)抽屜式布局特點(diǎn)：突出核心功能，隱藏其它功能。優(yōu)點(diǎn)：1、不占用寶貴的屏幕空間，讓用戶(hù)首先能聚焦于內(nèi)容2、導(dǎo)航的菜單項(xiàng)目不受數(shù)量限制，應(yīng)用入口都加入抽屜導(dǎo)航中3、擴(kuò)展性強(qiáng)，配置靈活，常用的快捷操作功能和低層級(jí)界面入口也能直接放置進(jìn)抽屜導(dǎo)航中不足：1、隱藏框架中其他入口、用戶(hù)需要一定記憶成本2、對(duì)入口交互的功能可見(jiàn)性要求高3、容易與應(yīng)用內(nèi)的其他交互模式?jīng)_突，比如側(cè)滑手勢(shì)操作場(chǎng)景：適合功能較多，信息結(jié)構(gòu)較復(fù)雜的產(chǎn)品，用戶(hù)的注意力聚焦在主信息流的瀏覽上，且擴(kuò)展性比較好。移動(dòng)端玄機(jī)多面板式布局特點(diǎn)：能同時(shí)呈現(xiàn)比較多的分類(lèi)及內(nèi)容。優(yōu)點(diǎn)：1、減少界面跳轉(zhuǎn)的層級(jí)2、對(duì)分類(lèi)有整體性的了解3、分類(lèi)位置固定4、清楚當(dāng)前所在的入口位置不足：界面比較擁擠場(chǎng)景：適合分類(lèi)多及其內(nèi)容同時(shí)展示，內(nèi)容展示的信息不多移動(dòng)端玄機(jī)區(qū)別一：視覺(jué)瀏覽比例不同在設(shè)計(jì)工作進(jìn)行時(shí)，PC端頁(yè)面在PS中實(shí)時(shí)瀏覽的視覺(jué)效果，基本上就可以對(duì)應(yīng)其完成上線(xiàn)后的實(shí)時(shí)效果，電腦上視覺(jué)瀏覽比例和上線(xiàn)比例近乎1:1;而手機(jī)端頁(yè)面在PS里實(shí)時(shí)看到的效果與真正在A(yíng)PP中展示的會(huì)有很大差距，電腦上視覺(jué)瀏覽比例和上線(xiàn)比例1:?移動(dòng)端玄機(jī)區(qū)別二：信息的傳達(dá)更難把控正常人在把玩手機(jī)的時(shí)候，眼睛與手機(jī)的舉例大概會(huì)有20公分左右的距離，再加上制作時(shí)的視覺(jué)感受與上線(xiàn)后，在視覺(jué)比例上也會(huì)有一定差距，所以這就導(dǎo)致手機(jī)端對(duì)于如何將畫(huà)面中的信息準(zhǔn)確、清晰的傳達(dá)給用戶(hù)，變得更加難把控。移動(dòng)端玄機(jī)移動(dòng)端設(shè)計(jì)注意事項(xiàng)2、內(nèi)容流暢度1、內(nèi)容識(shí)別性做頁(yè)面設(shè)計(jì)時(shí)，往往只關(guān)注局部而忽略整體，導(dǎo)致內(nèi)容流暢度缺失，無(wú)法激起用戶(hù)繼續(xù)閱讀的興趣。這也直接或間接的影響用戶(hù)在頁(yè)面上的停留時(shí)間，對(duì)于內(nèi)容傳播也起到了很大的阻礙，商業(yè)價(jià)值也會(huì)