其實你也可以輕松設計珠海微網(wǎng)站建設
珠海市天惠設計制作有限公司,成立于1996年8月,是為拓展中國Internet領域應用而專門成立的高新技術企業(yè),是企業(yè)電子商務技術服務和解決方案綜合服務提供商。
網(wǎng)站推廣計劃是網(wǎng)絡營銷計劃的組成部分。制定網(wǎng)站推廣計劃本身也是一種網(wǎng)站推廣策略, 推廣計劃不僅是推廣的行動指南,同時也是檢驗推廣效果是否達到預期目標的衡量標準,所以,合理的網(wǎng)站推廣計劃也就成為網(wǎng)站推廣策略中必不可少的內容。
珠海微網(wǎng)站建設作為我們日常使用頻率最高的App產(chǎn)品,我們每天的啟動次數(shù)與使用時長幾乎占據(jù)了使用移動終端的一半時間。學習產(chǎn)品設計的你,是否有沒有想過有一天我們自己也可以設計出可交互的珠海微網(wǎng)站建設原型界面。珠海微網(wǎng)站建設是一個超級龐大的App,由于時間原因本文只講解到珠海微網(wǎng)站建設的二級頁面,更深層次的頁面不再展開,線框圖的使用也不在此文中詳細講解,重點講解如何通過Axure實現(xiàn)相關交互效果,講述實現(xiàn)過程中的思路和方法。
我們先來了解下移動端App設計時的尺寸如何設置,要搞清楚這個問題得知道屏幕分辨率和物理像素的相關一系列問題,如要講述清楚,可能需要單開一篇文章,大家可以查看移動設備的界面設計尺寸了解相關知識。
一、準備工作
以1280*720為我們的設計尺寸,確定了尺寸后,打開Axure,設置全局輔助線,養(yǎng)成設置輔助線的習慣可以幫我們將原型做的更規(guī)范、更美觀,做出高質量的線框圖。打開手機中的珠海微網(wǎng)站建設,我們先來觀察下珠海微網(wǎng)站建設的一級主界面,主要包含:珠海微網(wǎng)站建設、通訊錄、發(fā)現(xiàn)和我共四個頻道頁面。界面中的頂部顯示時間、電量的狀態(tài)欄、以及上方的頂部導航和底部的導航欄在設計中使用的頻率較高,我們可以將這些經(jīng)常用到的內容設置為母版,簡化我們的操作。狀態(tài)欄的高度設置40,頂部導航高度設置為90,底部導航高度設置為100,寬度統(tǒng)一為720。設置下母版的拖放行為,狀態(tài)欄的拖放行為設置為固定位置(固定坐標0,0),頂部導航的拖放行為設置為脫離母版,底部導航的拖放行為設置為脫離母版。(因上下兩個導航在每個頁面中的內容略有不同,所以設置為脫離母版,即在頁面中對此內容進行修改操作不會影響到原母版內容)
尺寸和母版設定完畢后,準備各一級、二級頁面的線框圖,此處省略一萬字,不在此啰嗦說明。
珠海微網(wǎng)站建設和通信錄界面中的瀑布流列表內容,可以通過中繼器快速實現(xiàn)效果,這樣做出來的保真度會更高,交互更流暢。中繼器的使用方法請參照手把手教您使用Axure7.0的中繼器(Repeater)
二、設計交互
2.1 頻道頁交互(一級頁面)
觀察交互
通過觀察我們得知各頻道頁(一級頁面)存在以下交互行為:1)底部導航欄icon默認為鏤空樣式,文字為黑色,當前頁的icon則為綠色填充效果,文字導航也為相同綠色;2)點擊底部導航中的icon或文字均可跳轉到對應的一級界面;3)珠海微網(wǎng)站建設頻道:上下滑動手勢可以查看頁面內容,點擊搜索icon跳轉至搜索界面,點擊加號按鈕可以彈出隱藏的功能菜單項,再次點擊則菜單隱藏;4)通訊錄頻道:上下滑動手勢可以查看聯(lián)系人列表內容,點擊搜索icon跳轉至搜索界面,點擊加號按鈕可以彈出隱藏的功能菜單項,再次點擊則菜單隱藏;5)上下滑動手勢可以查看聯(lián)系人列表內容,點擊搜索icon跳轉至搜索界面,點擊加號按鈕可以彈出隱藏的功能菜單項,再次點擊則菜單隱藏,點擊朋友圈、掃一掃等各通欄項均可以跳轉至對應的二級頁面;6)上下滑動手勢可以查看聯(lián)系人列表內容,點擊搜索icon跳轉至搜索界面,點擊加號按鈕可以彈出隱藏的功能菜單項,再次點擊則菜單隱藏,點擊相冊、收藏等各通欄項均可以跳轉至對應的二級頁面,點擊我頻道中的二維碼縮略圖彈出二維碼名片。
設計交互:實現(xiàn)的思路與方法
1、底部導航交互
為每個icon及文字設置單擊事件,利用熱區(qū)覆蓋在對應的icon及文字上,為每個熱區(qū)設置單擊事件,單擊時跳轉至對應的頻道頁,導航欄的交互也可以在母版中設置好。(線框圖階段將每個頻道頁的icon及文字設置為綠色)
底部導航交互
2、珠海微網(wǎng)站建設頻道交互
將消息列表頁的內容設置為動態(tài)面板,設置拖動時事件,沿Y軸垂直移動;設置拖動結束時事件,判斷當此動態(tài)面板Y坐標大于0的時候,動態(tài)面板回到初始位置(0,0);新增一個拖動結束用例,當此動態(tài)面板的Y坐標小于-1280時(1280為動態(tài)面板的高度),動態(tài)面板回到拖動前位置,至此消息列表的上下滑動交互設定完畢。下面我們在為頂部搜索icon設置鼠標單擊交互事件,點擊后跳轉到搜索頁面。最后我們在為加號圖標按鈕設置交互,將彈出的窗口菜單設置為動態(tài)面板并隱藏,選中加號圖標設置鼠標單擊時事件,選擇切換可見性動作,顯示時設置向下滑動的效果,隱藏時設置向上收起的效果,動畫時長均為100毫秒。
消息列表拖動交互
3、通訊錄頻道交互
聯(lián)系人列表的上下滑動交互效果、搜索icon及加號icon的交互效果同上述的珠海微網(wǎng)站建設頻道中的方法一致,不在此重復描述
4、發(fā)現(xiàn)頻道交互
朋友圈、掃一掃、搖一搖、漂流瓶、購物和游戲通欄分別覆蓋一層熱區(qū),并設置鼠標單擊時事件跳轉至對應的頁面;將附近的人彈出的提示框設置為動態(tài)面板,為確定按鈕設置單擊事件跳轉至二級頁面,為取消文字按鈕設置單擊事件隱藏提示框;附近的人通欄增加一個熱區(qū),設置鼠標單擊事件顯示提示框,并設置燈箱效果,置頂顯示;頂部導航的搜索、加號交互設置同珠海微網(wǎng)站建設頻道中一致,不再重復描述。(提示框在準備工作階段畫好線框圖,默認隱藏)
附近的人通欄交互
5、我頻道交互
底部導航及頂部導航中的搜索、加號同其他幾個頻道頁一致;為頭像、相冊、收藏、錢包、卡券、表情、設置通欄分別覆蓋一層熱區(qū),并設置鼠標單擊事件跳轉至對應的頁面;為頭像右側的二維碼單獨設置鼠標單擊事件,對個人二維碼名片設置切換可見性動作,置頂顯示,并設置燈箱效果,二維碼名片默認隱藏。(二維碼名片內容在準備工作階段已畫好)
二維碼名片交互
2.2 頻道子頁面交互(二級頁面)
觀察交互
各頻道的子頁面主要包含系統(tǒng)默認搜索、朋友圈、掃一掃、搖一搖、附近的人、漂流瓶、購物、游戲、個人信息、相冊、收藏、錢包、卡券、表情和設置頁面。通過觀察我們發(fā)現(xiàn)各頻道子頁面主要有以下的交互行為:
點擊各頁面的返回按鈕均返回至上一層頁面;
點擊朋友圈右上角的圖標彈出選擇圖片的彈框;
點擊掃一掃、附近的人、購物、游戲、錢包頁面右上角的圖標彈出功能菜單,再次點擊菜單隱藏;
點擊搖一搖、漂流瓶右上角的設置按鈕、游戲頁面上方的搜索按鈕、相冊右上角的消息按鈕、收藏頁面右上角的搜索和加號按鈕、表情頁面右上角的搜索和設置按鈕則屏幕向左滑動跳轉至下一層頁面;
搖一搖設置頁面、漂流瓶設置頁面,點擊音效右側的按鈕,則按鈕左右滑動;
附近的人頁面顯示一個矩形框確定地理位置,2秒后矩形框消失;
點擊卡券消息通知頁面、相冊消息頁面右上角的清空文字按鈕,則頁面內容消失;
點擊表情頁面上方的“精選表情”與“更多表情”則切換頁面顯示的內容。
設計交互:實現(xiàn)的思路和方法
1、各頁面返回交互:設置鼠標單擊事件,選擇打開鏈接動作返回上一頁。
2、朋友圈交互:右上角的相冊圖標設置鼠標單擊事件,顯示被隱藏的相冊彈出框,并設置燈箱效果,置頂顯示。
相冊彈出框交互
3、為掃一掃、附近的人、購物、游戲、錢包頁面右上角的icon圖標設置鼠標單擊事件,增加切換可見性動作,顯示時設置向下滑動的效果,隱藏時設置向上收起的效果,動畫時長均為100毫秒;其中購物界面中右上角的圖標設置為動態(tài)面板,設置兩個狀態(tài),每個狀態(tài)上傳一個圖標,設置鼠標單擊事件的時候自動切換下一個面板狀態(tài)。
切換菜單可見性
4、為搖一搖、漂流瓶右上角的設置按鈕、游戲頁面上方的搜索按鈕、相冊右上角的消息按鈕、收藏頁面右上角的搜索和加號按鈕、表情頁面右上角的搜索和設置按鈕設置鼠標單擊事件,面板狀態(tài)設置為跳轉到對應的狀態(tài)頁面,頁面進入進出的動畫設置為向左滑動,動畫時長設置為500毫秒。同樣的思路方法將跳轉的狀態(tài)頁面中右上角的圖標設置鼠標單擊事件切換動態(tài)面板狀態(tài),返回上一層頁面,則進入進出的動畫選擇向右滑動,動畫時長為500毫秒。(提前將各動態(tài)面板下的狀態(tài)畫好對應的線框圖,將整個頁面轉換為動態(tài)面板)
切換動態(tài)面板狀態(tài)
5、搖一搖設置、漂流瓶設置頁面交互:將大的綠色矩形框設置為動態(tài)面板,并設置為開啟和關閉兩個狀態(tài)(綠色為開啟狀態(tài)、關閉狀態(tài)沒有填充色,默認為開啟狀態(tài)),針對動態(tài)面板設置鼠標單擊事件,判斷當動態(tài)面板為開啟狀態(tài)時,移動上方白色矩形按鈕,X軸經(jīng)過-(動態(tài)面板寬度/2-2),設置線性動畫300毫秒,動態(tài)面板切換為關閉狀態(tài)并設置一個逐漸進入退出的300毫秒動畫;當動態(tài)面板為關閉狀態(tài)時,則白色矩形按鈕沿X軸經(jīng)過(動態(tài)面板寬度/2-2),設置線性動畫300毫秒,動態(tài)面板為關閉狀態(tài)并設置一個逐漸進入退出的300毫秒動畫。(這里的移動設置為相對距離)
開關按鈕交互
6、附近的人頁面交互:頁面設置一個加載事件,等待2秒后,隱藏定位地理位置的動態(tài)面板;動態(tài)面板中為加載圓圈設置載入時事件,為圓圈添加旋轉動作,設置以部件中心點順時針旋轉1440度即4圈,并設置一個2秒的線性動畫。
加載刷新按鈕交互
7、卡券消息通知、相冊消息頁面交互:將頁面中間的內容區(qū)域選中設置為一個內容組合,選中右上角清空文字,設置鼠標單擊事件,新增動作隱藏掉中間的內容組合。
清空交互
8、表情頁面交互:將“精選表情”和“更多表情”這兩個Table按鈕設置為一個組,并設置部件選中狀態(tài)為文字顏色變綠,將頁面中下方的內容設置為動態(tài)面板設置兩個內容狀態(tài)。首先為“精選表情”設置鼠標單擊事件,單擊后將該部件設置為選中狀態(tài),移動下面的綠色線條到達當前位置,設定好當前的位置坐標,將下方的顯示內容切換到對應的動態(tài)面板狀態(tài),設置200毫秒逐漸顯示的過渡動畫;然后為“更多”設置鼠標單擊事件,單擊后將該部件設置為選中狀態(tài),移動下面的綠色線條到達位置X(360)Y軸(部件的Y軸坐標),將下方的顯示內容切換到對應的動態(tài)面板狀態(tài)并設置一個200毫秒逐漸顯示的過渡動畫。(這里的移動設置為絕對距離)
一個網(wǎng)站如果想要保證比較好的推廣效果以及效益,推廣前的一些準備是必不可少的,制定推廣計劃之前,以下準備是不可或缺的: