移動(dòng)端鼠繪創(chuàng)意主題界面設(shè)計(jì)研究

汪蘭川　李艾　石麗慧

摘要：近年來(lái)隨著手機(jī)，平板等智能化移動(dòng)設(shè)備的發(fā)展，移動(dòng)設(shè)備的定義發(fā)生了天翻地覆的變化。高分辨率的多點(diǎn)觸摸屏取代了原先需要手寫(xiě)筆的單點(diǎn)觸摸屏，移動(dòng)端界面設(shè)計(jì)中視覺(jué)互動(dòng)響應(yīng)所占比例增加。本文主要研究闡述移動(dòng)端的界面設(shè)計(jì)規(guī)范與主體性界面題材的結(jié)合創(chuàng)作。

關(guān)鍵詞：移動(dòng)設(shè)備 主題界面 設(shè)計(jì)研究

中圖分類(lèi)號(hào)：TB47 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2017）09-0136-02

移動(dòng)端界面設(shè)計(jì)、電腦端等桌面應(yīng)用界面設(shè)計(jì)類(lèi)都屬于ul設(shè)計(jì)的范疇，由它們本質(zhì)特點(diǎn)決定，電腦端等桌面應(yīng)用界面設(shè)計(jì)多數(shù)是獨(dú)占式的，移動(dòng)端正相反，多數(shù)是暫態(tài)的，高度情景驅(qū)動(dòng)的。移動(dòng)端的主題界面設(shè)計(jì)不僅受制于移動(dòng)設(shè)備本身界面的外形大小，布局，樣式，應(yīng)用產(chǎn)品屬性同樣制約主題界面的設(shè)計(jì)，規(guī)范統(tǒng)一的視覺(jué)傳達(dá)設(shè)計(jì)和主題內(nèi)容的完美結(jié)合是移動(dòng)端主題界面設(shè)計(jì)的準(zhǔn)則。

一、移動(dòng)端概念與界面設(shè)計(jì)的規(guī)范性

（一）移動(dòng)端概念

按照外形大小來(lái)分，有三大類(lèi)：

1.手持設(shè)備：媒體設(shè)備以及手機(jī)等，例如iPod touch等。一般是豎直方向放置為主，屏幕大小4到6英寸，高而窄。

2.平板：水平和垂直方向都可以，一般而言側(cè)重于水平使用。這類(lèi)設(shè)備的外形特點(diǎn)是屏幕大多數(shù)是9到10英寸的。

3.小平板：屏幕大多數(shù)是7到8英寸，蘋(píng)果品牌的小平板的長(zhǎng)寬比是4：3，而谷歌和微軟品牌的長(zhǎng)寬比是16：9。

（二）界面設(shè)計(jì)規(guī)范性簡(jiǎn)圖

二、移動(dòng)端創(chuàng)意主題界面設(shè)計(jì)的發(fā)展與應(yīng)用

（一）移動(dòng)端主題界面設(shè)計(jì)的發(fā)展

創(chuàng)意主題界面設(shè)計(jì)的發(fā)展基本是隨著手機(jī)技術(shù)革新發(fā)展而變化的。在非智能手機(jī)階段，受限于技術(shù)與成本，主題界面設(shè)計(jì)僅僅是手機(jī)自帶的顏色風(fēng)格的簡(jiǎn)單變化。手機(jī)開(kāi)始支持第三方軟件即APP應(yīng)用后，出現(xiàn)了一些軟件提供設(shè)計(jì)師設(shè)計(jì)的主題界面，大多數(shù)是像素風(fēng)格的小圖標(biāo)和可選擇的圖片界面，并無(wú)多大視覺(jué)藝術(shù)風(fēng)格。

智能觸摸大屏手機(jī)的出現(xiàn)是一個(gè)分水嶺，像素分辨率大大提高，界面的設(shè)計(jì)風(fēng)格初期基本是擬物化，強(qiáng)調(diào)現(xiàn)實(shí)質(zhì)感，可以實(shí)現(xiàn)感性化色彩的交互設(shè)計(jì)，能夠幫助人們依靠經(jīng)驗(yàn)快速學(xué)會(huì)操作界面。例如初期的書(shū)籍類(lèi)APP，從交互方式到圖標(biāo)都對(duì)真正的觀看書(shū)籍過(guò)程進(jìn)行了模擬，賦予了很強(qiáng)的趣味性和親和力。這一時(shí)期出現(xiàn)了很多追求細(xì)節(jié)的擬物化主題圖標(biāo)設(shè)計(jì)，主題風(fēng)格非常明確，不僅僅是極具識(shí)別性的繪制圖標(biāo)（如圖1）。

近年來(lái)APP功能化大量涌入，界面成本提升，扁平化設(shè)計(jì)風(fēng)格開(kāi)始流行。扁平化設(shè)計(jì)理念摒棄了過(guò)于繁瑣的裝飾效果，注重圖案簡(jiǎn)潔明確抽象化，追求層級(jí)越化，避免用戶對(duì)界面產(chǎn)生過(guò)多的認(rèn)知障礙。凸顯的都是與核心內(nèi)容相關(guān)的交互元素，提高了用戶操作效率，體現(xiàn)對(duì)用戶的關(guān)懷。Ios系統(tǒng)的圖標(biāo)設(shè)計(jì)逐漸扁平化是一個(gè)很明確的范例，由此各大APP開(kāi)始逐步跟進(jìn)，開(kāi)啟了全面扁平化時(shí)代，引領(lǐng)了潮流。

近一年扁平化設(shè)計(jì)風(fēng)格發(fā)展到極致，將擬物與扁平兩者結(jié)合的漸變風(fēng)格開(kāi)始進(jìn)入視野。例如在淘寶2017年的新勢(shì)力周活動(dòng)中，蒸汽波為主的風(fēng)格中大量出現(xiàn)了漸變?cè)兀ㄈ鐖D2）。

（二）移動(dòng)端主題界面設(shè)計(jì)的應(yīng)用

創(chuàng)意主題界面設(shè)計(jì)主要集中在圖標(biāo)與APP頁(yè)面的設(shè)計(jì)。如安卓系統(tǒng)中的91助手就提供大量的精美主題圖標(biāo)供用戶切換。APP頁(yè)面中的主題界面設(shè)計(jì)通常伴隨季節(jié)，節(jié)日營(yíng)銷(xiāo)活動(dòng)，與H5廣告界面相輔相成，風(fēng)格主題明確，需要大量輸出模塊，方便后期運(yùn)營(yíng)推廣使用，這類(lèi)特點(diǎn)是有一定周期性，不會(huì)涉及全部頁(yè)面風(fēng)格。

夜晚模式，護(hù)眼模式，老人模式是另一種意義上的主題風(fēng)格，與默認(rèn)主界面風(fēng)格并存，涵蓋了全部頁(yè)面。

三、移動(dòng)端主題界面設(shè)計(jì)創(chuàng)作與制作流程方法

（一）確定平臺(tái)與應(yīng)用產(chǎn)品

首先確定設(shè)計(jì)主題界面的平臺(tái)是單一移動(dòng)設(shè)備的還是多設(shè)備可應(yīng)用的，這涉及到具體的規(guī)范制定。單一移動(dòng)設(shè)備界面設(shè)計(jì)遵循設(shè)備的基礎(chǔ)規(guī)范即可，例如iphone手機(jī)的通用設(shè)計(jì)頁(yè)面尺寸為750×1334，不必考慮頁(yè)面元素尺寸轉(zhuǎn)化，設(shè)計(jì)難度較小。如若主題界面也要應(yīng)用與安卓系統(tǒng)，就要考慮如何尋找尺寸各元素平衡點(diǎn)，盡量避免非必要的二次出稿。橫版的平板因?yàn)榻缑娉叽绱笮〉脑?，必須重新排版設(shè)定出稿，不在可轉(zhuǎn)化尺寸的范圍內(nèi)。

設(shè)計(jì)主題界面不僅僅要考慮到平臺(tái)問(wèn)題，具體的應(yīng)用產(chǎn)品也是有規(guī)范限制的，在APP產(chǎn)品中設(shè)計(jì)主題界面，圖標(biāo)的可辨識(shí)性要和已有的產(chǎn)品設(shè)計(jì)特性相結(jié)合，更多的主體化要體現(xiàn)在控件框，界面顏色，開(kāi)機(jī)頁(yè)面，閃屏頁(yè)面等可視化明顯的界面。

（二）主題設(shè)定與風(fēng)格確定

主題設(shè)定的來(lái)源可簡(jiǎn)單分為動(dòng)畫(huà)、影視、游戲劇本等已有形象的二次再創(chuàng)作與日常生活主題，廣告宣傳主題的視覺(jué)創(chuàng)作，如季節(jié)主題，食物主題，節(jié)日主題，促銷(xiāo)主題等，也可自己編寫(xiě)劇本創(chuàng)作可視化形象。

主題界面設(shè)計(jì)中會(huì)涉及到的風(fēng)格確定主要體現(xiàn)在UI視覺(jué)層級(jí)關(guān)系的設(shè)定，UI的文本設(shè)計(jì)，UI的構(gòu)圖設(shè)計(jì)，UI的色彩元素設(shè)計(jì)，UI的交互動(dòng)畫(huà)設(shè)計(jì)。層級(jí)關(guān)系設(shè)計(jì)，文本設(shè)計(jì)主要體現(xiàn)的是邏輯思維，可視化的部分占比較少，一般以圖標(biāo)，交互動(dòng)作來(lái)體現(xiàn)，風(fēng)格融合在其余元素中。構(gòu)圖設(shè)計(jì)，色彩元素設(shè)計(jì)，交互動(dòng)畫(huà)設(shè)計(jì)基本可以將風(fēng)格確定。風(fēng)格選擇大致可分為擬物化與扁平化的選擇，擬物化設(shè)定色彩更加豐富，但增加了開(kāi)發(fā)難度與成本，各設(shè)備之間轉(zhuǎn)化程度也不高，可能會(huì)影響具體用戶的操作體驗(yàn)。純扁平的風(fēng)格已經(jīng)流行了一段時(shí)間，極簡(jiǎn)化圖形化的風(fēng)格容納度很高，完美地將用戶體驗(yàn)與視覺(jué)審美相結(jié)合，有利于后期動(dòng)畫(huà)交互的設(shè)計(jì)，制作。高度統(tǒng)一的線條，圓度，大小，細(xì)節(jié)給人以規(guī)整感，簡(jiǎn)潔感，商業(yè)上更傾向于選擇這樣的風(fēng)格。近期隨著設(shè)計(jì)流行風(fēng)向的發(fā)展，過(guò)度扁平已經(jīng)出現(xiàn)了審美疲勞，隨之出現(xiàn)了將擬物與扁平相結(jié)合的漸變風(fēng)格，復(fù)古風(fēng)格，擺脫了扁平的規(guī)則感，輕微加入了顏色的漸變，陰影感，紋理質(zhì)感深入化。這種相疊加的風(fēng)格不僅僅可以體現(xiàn)在圖標(biāo)上，在APP應(yīng)用中，H5的宣發(fā)頁(yè)面也是風(fēng)格體現(xiàn)的最佳選擇，在電商，游戲類(lèi)型的APP產(chǎn)品中已經(jīng)開(kāi)始大規(guī)模應(yīng)用。endprint

（三）交互框架的設(shè)計(jì)構(gòu)思與制作

一般商業(yè)化的主題風(fēng)格界面設(shè)計(jì)并不需要這一過(guò)程，產(chǎn)品與交互已經(jīng)提供了成熟的交互思維框架。創(chuàng)意化的主題風(fēng)格界面設(shè)計(jì)在選擇制作類(lèi)型時(shí)可將主題圖標(biāo)與界面相結(jié)合的模式，界面交互的制作考驗(yàn)的是邏輯思維的縝密性，合理性，需要與產(chǎn)品特征相結(jié)合，體現(xiàn)的是用戶邏輯與思維。制作交互框架常用的專(zhuān)業(yè)軟件是Axure，是一個(gè)專(zhuān)業(yè)的快速原型設(shè)計(jì)工具，操作難度較大，專(zhuān)業(yè)性較高，適合于專(zhuān)業(yè)交互設(shè)計(jì)人員。對(duì)于制作主題風(fēng)格的設(shè)計(jì)而言，Photoshop是簡(jiǎn)介實(shí)用的軟件，可以先行手繪出大致的交互框架，模塊，二次掃描在電腦中用Photoshop制作。

（四）圖標(biāo)的設(shè)計(jì)與制作

在主題化的功能界面中，圖標(biāo)是最能體現(xiàn)主題的部分，也是奠定風(fēng)格的基礎(chǔ)，是設(shè)計(jì)主題界面的重中之重。在創(chuàng)作初期可以先行構(gòu)思設(shè)計(jì)的方向，是單純體現(xiàn)主題還是將原先功能化圖標(biāo)與其相結(jié)合。體現(xiàn)功能化難度增加，主題性削弱，適用于商業(yè)圖標(biāo)制作。

圖標(biāo)繪制可以采用軟件Ai進(jìn)行繪制，矢量化繪制的優(yōu)點(diǎn)是可以無(wú)限放大縮小，不會(huì)有像素點(diǎn)的困擾。缺點(diǎn)是無(wú)法看到圖標(biāo)在移動(dòng)界面內(nèi)的實(shí)際效果。如果設(shè)計(jì)前期已經(jīng)確定使用平臺(tái)是單一的，單一尺寸設(shè)計(jì)即可，不必考慮像素大小伸縮問(wèn)題，切出單一的圖標(biāo)即可。平臺(tái)是兩個(gè)以上的，設(shè)計(jì)到伸縮大小問(wèn)題，在Ai中矢量繪制為最佳方案。

（五）界面的設(shè)計(jì)與制作

界面設(shè)計(jì)與制作分為外頁(yè)面背景圖案的制作，內(nèi)部功能頁(yè)面的制作，功能頁(yè)面主題顏色設(shè)定制作三大類(lèi)。

細(xì)化下外頁(yè)面背景圖案繪制又分為鎖屏頁(yè)，背景主界面繪制，多數(shù)手機(jī)會(huì)有默認(rèn)的設(shè)定，一般采用照片為主，風(fēng)格體現(xiàn)手機(jī)品牌的理念，一般以藍(lán)天、白云、彩色氣球、汽車(chē)等元素。積極向上，健康、運(yùn)動(dòng)為關(guān)鍵詞。用戶可自由設(shè)定，是自由度最高的可視化界面。

內(nèi)部功能頁(yè)面設(shè)計(jì)與制作，根據(jù)前期的交互頁(yè)面與規(guī)范設(shè)定進(jìn)行創(chuàng)作，具體分為功能圖標(biāo)設(shè)計(jì)制作，層級(jí)文字設(shè)計(jì)制作，功能欄分層設(shè)計(jì)制作，控件框設(shè)計(jì)制作等，根據(jù)每個(gè)頁(yè)面的具體功能交互設(shè)計(jì)進(jìn)行制作。

（六）界面交互動(dòng)效的設(shè)計(jì)與制作

1.功能性與藝術(shù)性

界面設(shè)計(jì)動(dòng)效的發(fā)展一直跟隨著手機(jī)產(chǎn)品的發(fā)展而發(fā)展，10年前，大多數(shù)手機(jī)動(dòng)效簡(jiǎn)潔實(shí)用，廣告彈窗，閃爍頁(yè)面最為多見(jiàn)。APP近年來(lái)快速發(fā)展，界面交互動(dòng)效頁(yè)發(fā)生了本質(zhì)性的變化。動(dòng)態(tài)的物體相較與靜態(tài)與文本的更為突出，容易被發(fā)覺(jué)。功能性動(dòng)效設(shè)計(jì)有著很明確合理的使用目的，幫助用戶減輕認(rèn)知負(fù)擔(dān)，在變化時(shí)加重印象，防止看漏，在框架空間的關(guān)系中建立較為合理的邏輯層級(jí)關(guān)系。藝術(shù)性是在功能性完畢的情況下利用巧妙的創(chuàng)意點(diǎn)增加趣味性觀感，吸引用戶眼球。一切的設(shè)計(jì)都是以用戶為中心來(lái)進(jìn)行創(chuàng)作的。

2.具體應(yīng)用與制作

首先強(qiáng)調(diào)及時(shí)反饋，及時(shí)反饋能夠告訴你操作的正確性，錯(cuò)誤性，提醒用戶系統(tǒng)已經(jīng)識(shí)別了你所執(zhí)行的操作，顯示出相互作用的結(jié)果。動(dòng)效添加最恰當(dāng)、合理的地方就是界面變化的瞬間，可以適當(dāng)緩和突兀感，讓用戶感受、理解當(dāng)前發(fā)生了什么。想要建立連接的橋梁，可以通過(guò)動(dòng)畫(huà)向用戶展示狀態(tài)，理解當(dāng)前兩個(gè)模塊的關(guān)系，如同中介一樣的作用。同時(shí)還可以顯示詳細(xì)信息或者縮略圖。如果一個(gè)新的對(duì)象要公開(kāi)，我們?nèi)绾卧谘诓氐男畔⒅袑ふ宜?，借助滑?dòng)是不錯(cuò)的選擇，你只有在需要時(shí)才會(huì)注意到這個(gè)變化，專(zhuān)一性地設(shè)計(jì)不會(huì)干擾其余功能，采用滑動(dòng)的設(shè)計(jì)可以有效節(jié)省界面空間。

結(jié)語(yǔ)

移動(dòng)端創(chuàng)意主題界面的設(shè)計(jì)其實(shí)質(zhì)是在藝術(shù)性與可用性之間尋找平衡點(diǎn)，在符合用戶視覺(jué)邏輯，滿足功能的前提下，優(yōu)化圖形設(shè)計(jì)視覺(jué)感知，可視化設(shè)計(jì)。以此來(lái)促進(jìn)UI設(shè)計(jì)技術(shù)的發(fā)展和不斷創(chuàng)新。endprint