張鵬

北京信息科技大學(xué)

?

淺談項(xiàng)目設(shè)計(jì)中的移動(dòng)UUII設(shè)計(jì)

張鵬

北京信息科技大學(xué)

摘要：要想做一個(gè)軟件的圖形界面設(shè)計(jì)之前一定要想明白一個(gè)問題，就是這個(gè)軟件做什么的，支持什么活動(dòng)，解決什么問題，能提供什么價(jià)值。而且一定要明白用戶喜歡什么樣的操作，討厭什么樣的操作。所以，一定要研究你的用戶，研究用戶的任務(wù)，觀念?？紤]功能，最后才是界面。不要讓用戶做不自然的事。

1　uuii概述

UI 即是User Interface，其中包括所有人(User)與機(jī)器(Machine)打交道用的界面接口(Interface)。因此，如果你去設(shè)計(jì)一個(gè)起重機(jī)的操作面板、汽車儀表盤、電視搖控器，都可以稱為UI Design，他是工業(yè)設(shè)計(jì)中的一個(gè)術(shù)語。GUI 是Graphical User Interface的縮寫。是指在計(jì)算機(jī)(computing)出現(xiàn)后，在屏幕上使用圖形界面來幫助(User)與機(jī)器(Machine)打交道用的界面接口(Interface)，泛指在計(jì)算機(jī)上所做的界面設(shè)計(jì)。他們之間非常形象化的理解就是“遙控器屬于UI但是不屬于GUI?！?/p>

1.1UUII特性

UI是一種結(jié)合計(jì)算機(jī)科學(xué)、美學(xué)、心理學(xué)、行為學(xué)以及各商業(yè)領(lǐng)域需求分析的人機(jī)系統(tǒng)工程。它強(qiáng)調(diào)人、機(jī)、環(huán)境三者合為一個(gè)系統(tǒng)的設(shè)計(jì)，用戶界面的設(shè)計(jì)將直接影響軟件的市場(chǎng)。

界面是用戶使用軟件的第一個(gè)窗口，所以用戶界面的設(shè)計(jì)是開發(fā)中重要的一個(gè)環(huán)節(jié)。

對(duì)于軟件來說，用戶界面是面向用戶的。用戶需要的是開發(fā)者開發(fā)的軟件滿足用戶自己的需求，并且易于操作、界面簡(jiǎn)潔。用戶界面設(shè)計(jì)走到今天經(jīng)過千錘百煉，要想做到易于操作而且脫穎而出可謂是難于登天。太多的開發(fā)人員以為自己是藝術(shù)天才，不遵循用戶界面設(shè)計(jì)的標(biāo)準(zhǔn)去做產(chǎn)品。他們錯(cuò)誤的認(rèn)為使用一套復(fù)雜的顏色的方案或繁瑣的操作能夠征服使用者。結(jié)果往往是適得其反。好的軟件是用戶不用閱讀用戶手冊(cè)或接受培訓(xùn)就能應(yīng)用的應(yīng)用軟件。這一點(diǎn)得益于軟件界面設(shè)計(jì)的人性化。

1.2Ui之與運(yùn)用關(guān)系

我們做一個(gè)軟件就好比要蓋一座房子。為了面朝大海，春暖花開；房前的小徑如何方便進(jìn)出增加人們交往與偶遇的機(jī)會(huì)，房間的格局如何讓大人小孩都能各得其樂，窗戶朝向如何布局來增加光照，這一切都是交互設(shè)計(jì)要考慮進(jìn)去的問題。朋友中有個(gè)笑話，說一個(gè)交互設(shè)計(jì)師朋友去人家里做客，幾句話之后，開始評(píng)價(jià)人家的燈和開關(guān)設(shè)計(jì)是否合理的問題。其實(shí)這中間體現(xiàn)的是一種信息架構(gòu)、交互流程的問題。

房子的外觀看起來什么樣，營(yíng)造出什么樣的視覺體驗(yàn)，地板和門應(yīng)該是什么顏色才能顯得高端大氣，這是視覺設(shè)計(jì)要考慮的問題，布局、色彩、圖標(biāo)等等。一座房子和人發(fā)生關(guān)聯(lián)的部分就是界面。即是User Interface就是用戶界面。顯然，這樣的接口需要交互和視覺的共同支持。

有人經(jīng)常會(huì)問：“交互設(shè)計(jì)和視覺設(shè)計(jì)是完全獨(dú)立的么？”答案是否定的。

蓋房子是個(gè)系統(tǒng)工程，交互和視覺都是其中一部分。交互設(shè)計(jì)師心中要有視覺映像，視覺設(shè)計(jì)師頭腦中要有流程和架構(gòu)，越是資深的設(shè)計(jì)師，這兩方面越是融合在一起，因?yàn)?，原本的目的就是要蓋房子。我們的本質(zhì)是蓋出一所結(jié)實(shí)耐用的房子，不是華而不實(shí)的棚子。所以交互和視覺越是融合的密不透風(fēng)越是精妙絕倫，所以說他是完全獨(dú)立的說法是不對(duì)的?，F(xiàn)實(shí)中開發(fā)人員來說不要舍本逐末，為了華麗而放棄使用本身。我們要在保證實(shí)用前提下在為其搭建漂亮的外衣。

2　移動(dòng)ui設(shè)計(jì)

移動(dòng)UI是UI的一個(gè)分支，移動(dòng)UI設(shè)計(jì)是可移動(dòng)的操作操作系統(tǒng)和其UI設(shè)計(jì)的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。置身于操作系統(tǒng)中人機(jī)交互的窗口，設(shè)計(jì)界面必須基于操作系統(tǒng)的物理特性和軟件應(yīng)用特性進(jìn)行合理的設(shè)計(jì)。好的移動(dòng)UI設(shè)計(jì)不僅能讓軟件變得有個(gè)性有品位，還能讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

2.1移動(dòng)ui設(shè)計(jì)細(xì)節(jié)

移動(dòng)UI設(shè)計(jì)的特點(diǎn)是“小巧輕便”及“通信便捷”，這兩個(gè)特點(diǎn)決定了移動(dòng)UI設(shè)計(jì)與其他UI設(shè)計(jì)的不同。以下給出的是實(shí)際移動(dòng)UI設(shè)計(jì)中不可忽略的幾個(gè)的設(shè)計(jì)細(xì)節(jié)：

2.1.1盡量減少文字的輸入

因?yàn)橐苿?dòng)端在輸入的低效性，在設(shè)計(jì)的過程中，應(yīng)盡量減少用戶的輸入，如果可能設(shè)為可選項(xiàng)，讓用戶選擇。

2.1.2結(jié)構(gòu)合理，邏輯清晰

由于手機(jī)屏幕相對(duì)較小，只能展示較少的信息量。只能有清晰的信息架構(gòu)。

2.1.3考慮移動(dòng)端操作方式

考慮單手操作問題，要方便手勢(shì)翻頁，能否單手操作完成。

2.1.4考慮APP UI的操作方式與操作系統(tǒng)兼容現(xiàn)在移動(dòng)端的操作系統(tǒng)主要有window，Android，iPhonnee OOSS

這幾款主流操作系統(tǒng)占有巨大的市場(chǎng)份額，要充分考慮到和操作系統(tǒng)的兼容性問題。

2.1.5考慮觸摸的問題現(xiàn)在的移動(dòng)端大多數(shù)都是觸摸屏，所以設(shè)計(jì)時(shí)要充分考慮

堅(jiān)持為觸摸而設(shè)計(jì)的理念。

2.1.6流暢性、響應(yīng)性考慮到應(yīng)用交互的手勢(shì)的流暢性，及反饋用戶的響應(yīng)速度

例如：一款計(jì)算軟件要3秒計(jì)算完結(jié)果并輸出，但是在這3秒內(nèi)并無任何反饋。在這3秒內(nèi)用戶不知道自己是否完成操作，而處于一種不安的狀態(tài)下。而另一款要6秒才能計(jì)算完，可是它卻在下一秒馬上反饋用戶讓用戶等待。這兩種情況用的情緒是不一樣的，第二種的做法對(duì)用戶更友好。

2.1.7考慮中斷問題考慮應(yīng)用的使用情景，確保在被中斷的情況下，能讓用戶恢復(fù)之前的操作，保留用戶勞動(dòng)的付出

2.2移動(dòng)ui設(shè)計(jì)總述

一個(gè)軟件，特別是對(duì)于應(yīng)用軟件來說，界面不需要太華麗。過于華麗的界面容易使人視覺疲勞，讓人心煩氣躁，把注意力過多的集中在花哨的圖案和顏色上，反而影響軟件的可信度和實(shí)用性。因此，界面設(shè)計(jì)的需要合理布局和友好的界面將會(huì)為軟件加分不少。要注意整合相似的功能，避免零碎UI；明確適用人群而不是所用用戶；用直接操作代替多個(gè)菜單。

要想做一個(gè)軟件的圖形界面設(shè)計(jì)之前一定要想明白一個(gè)問題，就是這個(gè)軟件做什么的，支持什么活動(dòng)，解決什么問題，能提供什么價(jià)值。而且一定要明白用戶喜歡什么樣的操作，討厭什么樣的操作。所以，一定要研究你的用戶，研究用戶的任務(wù)，觀念?？紤]功能，最后才是界面。不要讓用戶做不自然的事，比如玩紙牌的時(shí)候需要翻頁。不要影響用戶，界面要促進(jìn)學(xué)習(xí)，采用習(xí)慣的用法及模式。傳遞給用戶的是信息，而不是一推數(shù)據(jù)。要具有良好的響應(yīng)性，比起提高速度，成本低很重要。

界面布局一定要注意用戶注意力問題。用戶的注意力一般集中在光標(biāo)閃爍周圍的一小塊地方，重要信息，或者提示信息不能跑太遠(yuǎn)（頂部或者底部），注意力以外的地方很難被用戶觀察到。要建立視覺層次結(jié)構(gòu)，有邏輯關(guān)聯(lián)。采用高亮顯示重要信息時(shí)候，在顯示完畢，獲取注意后，要及時(shí)取消高亮效果，以免造成視覺干擾，獲取不到其他的信息。不要顯示很多雷同信息，不然信息會(huì)被淹沒。總而言之，交互設(shè)計(jì)的初衷是讓用戶更便捷的使用產(chǎn)品。

程序響應(yīng)性要注意，冗長(zhǎng)的操作要有真實(shí)的進(jìn)度操作，而不是虛假的。要讓用戶有可以停止的權(quán)力，防止用戶陷入無限的等待。不要給用戶提前加載不完全界面，哪怕只是幾秒，不要給用戶自己的設(shè)備不能完美兼容這個(gè)產(chǎn)品的錯(cuò)覺。

2.3移動(dòng)UI設(shè)計(jì)的幾個(gè)重要原則

2.3.1不能偏離用戶的任務(wù)

不能讓用戶像程序員一樣思考，要明白程序員花幾個(gè)小時(shí)的目的是讓用戶用幾分鐘的產(chǎn)品解決自己花幾個(gè)小時(shí)，甚至更長(zhǎng)時(shí)間還有可能解決不了的事情。不要增加學(xué)習(xí)成本。用戶至上。

2.3.2減少不必要的操作

我們要不怕繁瑣的為用戶減少操作。要學(xué)會(huì)記錄用戶輸入的東西，避免再次輸入。要記住登錄只能有一次，但你可以多次授權(quán)。只讓用戶輸入必要的信息，其他信息然用戶自己高興的時(shí)候自己輸入，你可以適當(dāng)?shù)慕o一些獎(jiǎng)勵(lì)。但記住必要信息要和其他信息分開。不要讓用戶做出一些廢棄的選擇。不要讓用戶記憶東西，重要的說明，圖片，步驟要一直顯示，別指望用戶記住它。

2.3.3要讓用戶掌握控制權(quán)。要讓用戶有拒絕和選擇的權(quán)利。

2.3.4要注意權(quán)衡要權(quán)衡各個(gè)設(shè)計(jì)的統(tǒng)一性，權(quán)衡中要記住人的需求總是優(yōu)先于技術(shù)。

3　結(jié)語

整個(gè)移動(dòng)UI的設(shè)計(jì)原則都是本著一條“用戶至上的原則”，所有的運(yùn)用都是為了設(shè)計(jì)出來給用戶用的。只有那些能夠輕松的解決用戶痛點(diǎn)的設(shè)計(jì)才是完美的設(shè)計(jì)。這就是UI設(shè)計(jì)當(dāng)中最重要的用戶原則。最后的總結(jié)是UI設(shè)計(jì)不一定是要你有多高的美學(xué)天賦多么強(qiáng)大的功能設(shè)計(jì)理念，而是要你能善于分析。你要能分析清楚你的用戶的群體，用戶的需求，用戶的理念，要做到以用戶為本。如果你在UI設(shè)計(jì)上做的不好，不一定是你的美學(xué)的天賦不夠高，也可能不是你的功能模塊建設(shè)的不夠周全，更有可能是你不善于分析你的用戶。美學(xué)素養(yǎng)可以靠后期培養(yǎng)，你的分析能力也是可以靠后天培養(yǎng)的。

參考書籍

[1]《UI黃金設(shè)計(jì)法則：觸動(dòng)人心的100種用戶界面》拉杰.拉爾中國(guó)青年出版社。

[2]《影視特效在視覺設(shè)計(jì)中數(shù)字化運(yùn)用研究》余曉妮常州大學(xué)。

[3]《信息界面中UI設(shè)計(jì)的優(yōu)化研究》方一平華東師范大學(xué)。

[4]《社交化電子閱讀軟件UI設(shè)計(jì)》柏鷹廣西師范大學(xué)。

鳴謝

特別鳴謝北京信息科技大學(xué)2015年人才培養(yǎng)質(zhì)量提高經(jīng)費(fèi)（財(cái)務(wù)編號(hào)）支持

特別鳴謝朝陽區(qū)健翔橋家樂?？系禄蛷d對(duì)項(xiàng)目需求的提示完善和后期系統(tǒng)測(cè)試的幫助

特別鳴謝北京信息科技大學(xué)大學(xué)生科技創(chuàng)新組對(duì)本次創(chuàng)新項(xiàng)目的經(jīng)費(fèi)支出和工作引導(dǎo)

特別鳴謝徐莉老師對(duì)本次項(xiàng)目開發(fā)的細(xì)心指導(dǎo)以及論文修改各方面的全面負(fù)責(zé)

特別鳴謝周文猛，唐朝，劉占奇，高安諾幾位組員對(duì)本次開發(fā)項(xiàng)目的支持和共同奮斗