運(yùn)營設(shè)計(jì)師要知道的移動(dòng)UI知識(shí)一

文章以小明的故事為例，來給大家分享關(guān)于從平面設(shè)計(jì)崗位轉(zhuǎn)到運(yùn)營設(shè)計(jì)的小伙伴們，在設(shè)計(jì)初期會(huì)在移動(dòng)端常出現(xiàn)的問題。小明的故事：小明是個(gè)平面設(shè)計(jì)師，后來換了公司去做了運(yùn)營設(shè)計(jì)師，主要負(fù)責(zé)的是用戶增長的需求設(shè)計(jì)。工作后發(fā)現(xiàn)對(duì)于圖片輸出，移動(dòng)端頁面展示把握的不是很準(zhǔn)確，作品還留有平面設(shè)計(jì)的影子。所以，我們要幫助小明，幫助類似很多從平面設(shè)計(jì)崗位轉(zhuǎn)到運(yùn)營設(shè)計(jì)的小伙伴，在他們?cè)O(shè)計(jì)初期提供一些移動(dòng)端常出現(xiàn)的問題總結(jié)。這些問題雖然很簡單，但都是實(shí)際工作中會(huì)出現(xiàn)的，希望這些問題總結(jié)對(duì)大家有益。一、字體大小與網(wǎng)頁大小的區(qū)別1. web時(shí)代14px的字在移動(dòng)互聯(lián)網(wǎng)前時(shí)代，也就是 web 時(shí)代。電腦的分辨率通常是72 ppi，所以字體在電腦上顯示的不是很大。通常14號(hào)字是網(wǎng)頁端的起始字體，大一點(diǎn)的正文會(huì)用16號(hào)字體。

2. iPhone時(shí)代的20+px在移動(dòng)互聯(lián)網(wǎng)時(shí)代，屏幕分辨率越來越高。如果設(shè)計(jì)過程中不注意字號(hào)大小，在多平臺(tái)上，移動(dòng)端會(huì)出現(xiàn)文字和內(nèi)容偏小的情況，所以畫面模塊不能簡單的縮小來適配移動(dòng)端。
二、模塊間距要有規(guī)律：48dp定律1. 穩(wěn)準(zhǔn)狠 – 元素間距不再隨意調(diào)品牌設(shè)計(jì)師或者運(yùn)營設(shè)計(jì)師也會(huì)用到縱向網(wǎng)格系統(tǒng)，而到了移動(dòng)端運(yùn)營設(shè)計(jì)的時(shí)候，按鈕大小、行間距、元素間距就更需要有恰當(dāng)?shù)囊?guī)律和規(guī)范了。

2. 穩(wěn)準(zhǔn)狠 – 按鈕大下不再隨意調(diào)按鈕在屏幕的物理尺寸下大于一定面積，防止誤觸的發(fā)生，48像素是個(gè)安全的界限。按鈕的大小也可以設(shè)定一定的規(guī)律，為以后的設(shè)計(jì)做復(fù)用準(zhǔn)備。
三、控制首屏內(nèi)容，露出完整的關(guān)鍵信息1. 拉新類專題在設(shè)計(jì)移動(dòng)端的專題頁面時(shí)，一定要注意首屏線的設(shè)置，如果交互設(shè)計(jì)沒有給到位，需要和對(duì)方進(jìn)行溝通，控制一屏內(nèi)容的露出位置。首屏線雖然不是評(píng)判交互好壞的標(biāo)準(zhǔn)，但在一定的場(chǎng)景下，都應(yīng)該具備視覺引導(dǎo)或是交互引導(dǎo)——引導(dǎo)用戶有興趣向下滑動(dòng)。

用戶增長的設(shè)計(jì)中，頁面每個(gè)模塊放什么內(nèi)容都是有數(shù)據(jù)支撐、交互原理、業(yè)務(wù)需求在里面的，不僅僅是簡單的視覺設(shè)計(jì)。理解業(yè)務(wù)上游如何思考，做全鏈路設(shè)計(jì)師，是完成業(yè)務(wù)目標(biāo)重要的一點(diǎn)。

四、格式塔原理：相似和接近1. 相似原理：避免和功能按鈕相似的設(shè)計(jì)人們?cè)诟兄獜?fù)雜對(duì)象的時(shí)候，會(huì)有意識(shí)或者無意識(shí)地將它們納入到一個(gè)有組織的系統(tǒng)當(dāng)中。這點(diǎn)在UI設(shè)計(jì)中運(yùn)用非常多，可以利用相似原則組織好界面中的信息和層級(jí)關(guān)系，也可以利用相似性原理來規(guī)避一些設(shè)計(jì)錯(cuò)誤。

下圖中按鈕和獲得獎(jiǎng)金的數(shù)字用了同樣的圓角矩形，這樣原本的功能按鈕和數(shù)字在視覺上產(chǎn)生了相似，破壞了按鈕的功能性。

2. 接近原理：運(yùn)用接近原理的反面，通過留白來代替線框排列在彼此之間的鄰近元素被認(rèn)為比那些放置得更遠(yuǎn)的元素更相關(guān)，這樣，不同的元素主要被看作是一個(gè)組，而不是單個(gè)的元素。那在設(shè)計(jì)中，我們也要不被潮流所淘汰。通過無邊化設(shè)計(jì)，留白設(shè)計(jì)，來突出信息內(nèi)容和模塊間的區(qū)別。

五、建立規(guī)范：圖片要有比例，方便維護(hù)1. 比例意味著可量化、可追查、可維護(hù)我們?cè)谧鲞\(yùn)營長頁的時(shí)候，為了保證長期項(xiàng)目中圖片的一致性和可維護(hù)性：我們選取的圖片有一定的比例。比較常用的圖片比例，如：1:1、4:3、16:9、16:10等等，也可以根據(jù)實(shí)際情況打破常規(guī)比例，結(jié)合自身產(chǎn)品的特點(diǎn)，在自己的設(shè)計(jì)中合理的加以運(yùn)用。

六、交互思維：按鈕狀態(tài)，操作反饋1. 按鈕的狀態(tài)要牢記按鈕是用于啟動(dòng)特定應(yīng)用程序的組件。按鈕作為頁面中的主要行動(dòng)點(diǎn)，引導(dǎo)用戶進(jìn)行響應(yīng)操縱，應(yīng)該有吸引用戶的沖動(dòng)。按鈕狀態(tài)：默認(rèn)、點(diǎn)擊、禁用。有狀態(tài)會(huì)更好的給用戶回饋。

結(jié)尾小明來到業(yè)務(wù)完整的大公司后，發(fā)現(xiàn)整個(gè)工作方式發(fā)生了變化，視覺知識(shí)已經(jīng)遠(yuǎn)遠(yuǎn)不能滿足其成長了，那么相對(duì)完善的大公司的設(shè)計(jì)工作流程和公司架構(gòu)，是怎么樣的呢？需要運(yùn)營設(shè)計(jì)師具備哪些知識(shí)呢？設(shè)計(jì)師如何通過公司職能設(shè)置來判斷要不要入職呢？我們下期見。

名稱欄目：運(yùn)營設(shè)計(jì)師要知道的移動(dòng)UI知識(shí)一
網(wǎng)頁URL：http://muchs.cn/news/192923.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、軟件開發(fā)、域名注冊(cè)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)