關(guān)于APP UI設(shè)計(jì)：
從一個(gè)產(chǎn)品經(jīng)理的角度出發(fā)碳抄，迷霧說出了自己對于產(chǎn)品設(shè)計(jì)的理解：“產(chǎn)品設(shè)計(jì)未來的趨勢走向權(quán)重與虛擬世界的架構(gòu)。包含貨幣與生態(tài)圈『Ｃ”近幾年由于國內(nèi)軟件行業(yè)整體水平的提升庄萎，大家對于用戶體驗(yàn)的關(guān)注度也在不斷的上升踪少，迷霧也對此表示肯定，他認(rèn)為現(xiàn)在產(chǎn)品設(shè)計(jì)更多的是關(guān)注于用戶的體驗(yàn)度：“主流風(fēng)格是更加便于用戶理解糠涛，尋找對應(yīng)人群的合適設(shè)計(jì)方案援奢。”通過有針對性的對目標(biāo)人群進(jìn)行產(chǎn)品設(shè)計(jì)忍捡，無疑將會大幅度的提高產(chǎn)品對應(yīng)人群的體驗(yàn)度和滿意度集漾。這不僅是產(chǎn)品設(shè)計(jì)中提倡的關(guān)注用戶體驗(yàn)，也是國內(nèi)大環(huán)境下各個(gè)涉及領(lǐng)域應(yīng)當(dāng)以人為本的一個(gè)縮影砸脊。
而在產(chǎn)品的設(shè)計(jì)中具篇，如何才能做到“尋找對應(yīng)人群的合適設(shè)計(jì)方案”？迷霧指出的重點(diǎn)可以說是言簡意賅：“任何事物都要理解透凌埂，尋找共同點(diǎn)驱显。”只有在完全理解了產(chǎn)品的情況下瞳抓，才能夠通過現(xiàn)象看到用戶群里的內(nèi)在聯(lián)系秒紧，從而確定合適的設(shè)計(jì)方案。
關(guān)于APP設(shè)計(jì)工具：
產(chǎn)品經(jīng)理平時(shí)設(shè)計(jì)到的工具可能是最多的了挨下，簡單的表格解釋迷霧平時(shí)使用的工具熔恢，希望可以起到借鑒的作用：
1.Mockplus－簡單快速
2.PS －批量 細(xì)致化 設(shè)計(jì)用
3.DW －圖片層級排版設(shè)計(jì)用
4.Axure －邏輯復(fù)雜用
5.Xmind －常用思維導(dǎo)圖
6.Evernote －習(xí)慣性紀(jì)錄
設(shè)計(jì)師的分享：
對于新晉產(chǎn)品經(jīng)理的建議，迷霧給出了兩點(diǎn)：
1.活用5W3H理解事物臭笆，PDCA安排計(jì)劃事物叙淌。
備注1：5W3H分析法，又稱“八何分析法”愁铺。 運(yùn)用5W3H分析法鹰霍，進(jìn)行顧客分析、市場需求分析茵乱，解決計(jì)劃編制的結(jié)構(gòu)問題茂洒、方向問題、執(zhí)行力問題瓶竭。 5W3H是描述問題的手段督勺，其具體指的是：What渠羞，Where，When智哀，Who次询，Why，How瓷叫，How much屯吊，How feel。）
備注2：PDCA是英語單詞Plan(計(jì)劃)摹菠、Do(執(zhí)行)盒卸、Check(檢查)和Adapt(行動)的第一個(gè)字母，PDCA循環(huán)就是按照這樣的順序進(jìn)行質(zhì)量管理次氨，并且循環(huán)不止地進(jìn)行下去的科學(xué)程序蔽介。
2.東西是死的，人是活的糟需。
個(gè)人覺得屉佳，迷霧說的還是蠻實(shí)在的，不僅給出了工作方法上的建議洲押，還對設(shè)計(jì)思路上提出了見解武花。
以上就是對兩位設(shè)計(jì)師的采訪的簡單整理，目的還是希望能夠?qū)Υ蠹矣兴鶐椭菊剩梢宰尨蠹以诖笊駛兊膸ьI(lǐng)下更快進(jìn)步体箕。之后熊先生還會不定期的去偷偷采訪其他的隱藏在我們中間的大神，請大家多多關(guān)注挑童，嗯累铅，就這樣。
希望這次Mockplus團(tuán)隊(duì)的采訪的內(nèi)容站叼，對各位從事移動APP設(shè)計(jì)小伙伴們有一定的幫助娃兽。可以認(rèn)真看看當(dāng)下一些有經(jīng)驗(yàn)的設(shè)計(jì)師的心得和看法尽楔。
Mockplus作為新興的一款原型設(shè)計(jì)工具投储，憑借著更快更簡單的原型設(shè)計(jì)方式和理念，目前已經(jīng)在國內(nèi)外積累了大量的用戶阔馋。值得大家推薦使用玛荞。
“設(shè)計(jì)師就要不停地學(xué)習(xí)和進(jìn)步，免得被時(shí)代甩開”
視覺設(shè)計(jì)篇
目前我們在市場上常見的Android的分辨率有:320×480 480×800 720×1080 800×1280…視覺在根據(jù)交互原型設(shè)計(jì)的時(shí)候,可以考慮以mdpi,也就是320×480為藍(lán)本進(jìn)行設(shè)計(jì),因?yàn)锳ndroid一般采用dp為單位,而我們設(shè)計(jì)的時(shí)候一般是px為單位的,這個(gè)就涉及到一個(gè)單位轉(zhuǎn)換的問題,而在mdpi下,px和dp是1:1的關(guān)系,這樣在標(biāo)注坐標(biāo)的時(shí)候能夠很方便的進(jìn)行單位轉(zhuǎn)換,因?yàn)閐p的單位是可以程序自己去適配不用dpi屏幕的,所以就算設(shè)計(jì)三套不同的dpi的圖,一般也只用對mdpi的設(shè)計(jì)圖進(jìn)行坐標(biāo)定位,這個(gè)坐標(biāo)的標(biāo)注可以在所有的dpi資源上,假如我們在設(shè)計(jì)有三套不同dpi的圖片資源時(shí),因?yàn)橹疤岬揭詍dpi為藍(lán)本做第一個(gè)dpi的設(shè)計(jì),相應(yīng)的我們把mdpi的比例設(shè)定為1,相應(yīng)的不同dpi的圖片資源尺寸的比例關(guān)系就可以是xhdpi/hdpi/mdpi等于2/1.5/1,也就是說,第一套圖為mdpi的資源圖片,xhdpi可以大小可以調(diào)到200%,hdpi可以調(diào)整到150%.
我們公司設(shè)計(jì)時(shí)考慮的分辨率:320×480 480×800 720×1280,以320×480為藍(lán)本設(shè)計(jì),psd的所有控件圖層是基于形狀工具繪制的,每個(gè)控件的大小能夠盡量被4整除,那基本上之間放大和縮小控件大小而不用擔(dān)心虛邊的問題,當(dāng)然也不可能完全在大小被4整除的死胡同里,如果介面整體的比例不太合適,或者影響視覺設(shè)計(jì),也不必過分強(qiáng)求.
設(shè)計(jì)圖標(biāo)的時(shí)候,我們需要做512×512的矢量圖,方便變形適應(yīng)不同手機(jī)不同分辨率,圖標(biāo)可以在PhotoShop或者AI里完成,可以根據(jù)喜好
對于Android App設(shè)計(jì),切圖同樣很重要,下面簡單介紹一些方法:
在設(shè)計(jì)的時(shí)候我們是以320×480即mdpi的,切圖的時(shí)候我們通常切兩套圖,分別是hdpi,xhdpi,不同的圖片資源尺寸的比例關(guān)系可以是xhdpi,hdpi,mhdpi 比例為2:1.5:1,也就是說,第一套圖為mdpi的資源圖片,xhpi可以調(diào)整大小到200%,hdpi可以調(diào)整大小到150%.
切圖可以進(jìn)行如下進(jìn)行:
主菜單欄:tab
按鈕常態(tài):nor
按鈕選中:sel
個(gè)人資料:profile
導(dǎo)航欄:nav
編輯:edit
背景:bg
按鈕:btn
圖標(biāo):icon
搜索:search
用戶:user
彈出:pop
返回:back
刷新:refresh
刪除:delete
編輯:edit
例如: 導(dǎo)航欄的背景--nav_bg
(完)
一呕寝、什么是單頁面應(yīng)用
單頁面應(yīng)用（SPA）是旨在對Web應(yīng)用發(fā)動革命的軟件運(yùn)動中可信度很高的一種勋眯。此類應(yīng)用有望進(jìn)行更加模塊化的開發(fā)，令應(yīng)用更加容易地適配與多個(gè)設(shè)備，并擁有更好的應(yīng)用生命周期管理—這些幾乎是軟件架構(gòu)師希望的全部客蹋。單頁面應(yīng)用誕生于擁有更多動態(tài)頁面內(nèi)容的Web 2.0革命塞蹭。舊的超鏈接頁面瀏覽模型給用戶帶來了不和諧的體驗(yàn)，而Web 2.0原則允許數(shù)據(jù)驅(qū)動時(shí)間在一個(gè)頁面內(nèi)創(chuàng)建嚼酝，并讓頁面內(nèi)容在需要的時(shí)候更新浮还。
二竟坛、單頁面應(yīng)用的誕生
單頁面應(yīng)用誕生于擁有更多動態(tài)頁面內(nèi)容的Web 2.0革命闽巩。舊的超鏈接頁面瀏覽模型給用戶帶來了不和諧的體驗(yàn)，而原則允許數(shù)據(jù)驅(qū)動時(shí)間在一個(gè)頁面內(nèi)創(chuàng)建担汤，并讓頁面內(nèi)容在需要的時(shí)候更新涎跨。這意味著應(yīng)用似乎可以運(yùn)行得更加流暢，乃至于到達(dá)可仿真桌面與本地資源接口的地步崭歧。
三隅很、項(xiàng)目采用框架
1、requirejs ?-- 異步執(zhí)行腳本類庫
2率碾、rivetsjs -- 輕量級數(shù)據(jù)綁定庫
3叔营、phonegap -- 調(diào)用手機(jī)系統(tǒng)控件框架
4、jquery -- js常用類庫
四所宰、項(xiàng)目采用插件
1绒尊、iscroll -- 輕量級滾動條
2、qrCode -- 二維碼生成
3仔粥、barcodescanner -- 二維碼掃描控件
4婴谱、convImg -- ?base64轉(zhuǎn)img控件
5、sqliteplugin -- 數(shù)據(jù)庫控件
6躯泰、fastclick -- 清除click事件延遲
7谭羔、sightglass -- rivtetsjs依賴
8、loaders.css -- 加載的css樣式包
五麦向、目前項(xiàng)目優(yōu)點(diǎn)
1瘟裸、分離前后端關(guān)注點(diǎn)，前端負(fù)責(zé)界面顯示诵竭，后端負(fù)責(zé)數(shù)據(jù)存儲和計(jì)算话告，各司其職，不會把前后端的邏輯混雜在一起
2秀撇、減輕服務(wù)器壓力超棺，服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁面合成呵燕，吞吐能力會提高幾倍
六棠绘、所存在的缺點(diǎn)
1、不利于SEO
2、初次加載耗時(shí)相對增多
3氧苍、導(dǎo)航不可用夜矗，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退
4让虐、對開發(fā)人員技能水平紊撕、開發(fā)成本高，尤其是前端開發(fā)人員要求有很高的javascript開發(fā)經(jīng)驗(yàn)
七赡突、遇見bug
1对扶、調(diào)用系統(tǒng)返回鍵的時(shí)候，注意對系統(tǒng)返回鍵進(jìn)行處理惭缰，否則回退會觸發(fā)2次back操作
2浪南、導(dǎo)航式跳轉(zhuǎn)要嚴(yán)格的使用js去控制
3、數(shù)據(jù)綁定注意一個(gè)列表一個(gè)數(shù)據(jù)模型漱受，如果一個(gè)數(shù)據(jù)模型綁定多個(gè)列表络凿，在加載時(shí)會出現(xiàn)假死狀態(tài)。
