思維導(dǎo)圖在UI設(shè)計(jì)中的應(yīng)用

吳楊玲

摘 要隨著信息時(shí)代的飛速發(fā)展，數(shù)碼電子產(chǎn)品的更新速度快，UI界面設(shè)計(jì)的應(yīng)用范圍也越來(lái)越廣泛，如：手機(jī)界面、觸摸屏等電子產(chǎn)品。思維導(dǎo)圖作為一種非線性思維工具，可以幫助UI設(shè)計(jì)師在很大程度促進(jìn)思維的發(fā)散，拓寬思維的廣度。利用思維導(dǎo)圖制作UI圖標(biāo)設(shè)計(jì)，可以更好地設(shè)計(jì)出符合實(shí)際應(yīng)用的UI圖標(biāo)。

【關(guān)鍵詞】思維導(dǎo)圖 UI設(shè)計(jì)

思維導(dǎo)圖又叫心智圖，是表達(dá)發(fā)射性思維的有效的圖形思維工具 ，是一種將放射性思考具體化的方法。思維導(dǎo)圖將詞匯、圖形、色彩等元素，以一種獨(dú)特的方式聯(lián)系起來(lái)，充分運(yùn)用人的左、右腦，利用記憶、閱讀、思維的規(guī)律，協(xié)助人們?cè)诳茖W(xué)與藝術(shù)、邏輯與想象之間平衡發(fā)展，從而開啟人類大腦的無(wú)限潛能。

1 線性思維與非線性思維

思維方式可分為線性思維與非線性思維兩種方式。

1.1 線性思維

線性思維即線性思維方式，是一種直線的、單向的、單維的、缺乏變化的思維方式。線性思維方式有助于深入思考，探究到事物的本質(zhì)。

1.2 非線性思維

非線性思維則是相互連接的，非平面、立體化、無(wú)中心、無(wú)邊緣的網(wǎng)狀結(jié)構(gòu)，類似于人的大腦結(jié)構(gòu)和血管組織，如發(fā)散性思維、系統(tǒng)思維。

非線性思維方式有助于拓展思路，看到事物的普遍聯(lián)系。非線性思維是為了更好地進(jìn)行線性思維即深入了解事物的本質(zhì)。線性思維方式是目的，而非線性思維方式是手段。

思維導(dǎo)圖正是這樣一種非線性思維工具，幫助人們?cè)诤艽蟪潭却龠M(jìn)思維的發(fā)散，拓寬思維的廣度。利用思維導(dǎo)圖制作UI圖標(biāo)設(shè)計(jì)，可以更好地設(shè)計(jì)出符合實(shí)際應(yīng)用的UI圖標(biāo)。

2 思維導(dǎo)圖的制作

思維導(dǎo)圖是以某一特定主題為中心，向外發(fā)射性發(fā)散思維，并以關(guān)鍵詞為節(jié)點(diǎn)搭建起的類似于“知識(shí)樹”的圖，聯(lián)想豐富、層次清晰、簡(jiǎn)單明了。制作思維導(dǎo)圖的方法有：手繪制作思維導(dǎo)圖和電腦軟件制作方法。

2.1 手繪思維導(dǎo)圖

2.1.1 制作工具

白紙、不同顏色的彩色筆。

2.1.2 手繪思維導(dǎo)圖的特點(diǎn)

手繪思維導(dǎo)圖不受環(huán)境的限制，可以使用豐富的彩色筆進(jìn)行繪制，具有個(gè)性和獨(dú)特的風(fēng)格能夠提高觀看者的觀察力及想象力。

2.1.3 制作方法

首先，將主題文字寫在白紙的中央；其次，在主題的基礎(chǔ)上延伸主出多個(gè)一級(jí)子主題，每一個(gè)一級(jí)子主題為一個(gè)大分支，有多少主要的一級(jí)子主題就要有多少分支，且每條分支可以用不同顏色、粗線條表示出來(lái)。一級(jí)子主題下可以延伸出多個(gè)二級(jí)子主題，每個(gè)主題分支都需要有曲線連接起來(lái)。

2.2 電腦軟件繪制思維導(dǎo)圖

2.2.1 制作工具

常用的繪制思維導(dǎo)圖的軟件有Mirosoft onenote、Mirosoft Visio、Xmind、Mind Manager等，其Xmind是專業(yè)思維導(dǎo)圖繪圖軟件之一。

2.2.2 電腦軟件繪制思維導(dǎo)圖的特點(diǎn)

電腦軟件繪制思維導(dǎo)圖方便快捷；便于保存、復(fù)制、修改；有利于傳播。

2.2.3 制作方法

現(xiàn)以Xmind為例制作思維導(dǎo)圖。首先，添加一個(gè)中心主題；其次，選擇中心主題，點(diǎn)擊菜單欄中的插入/主題或按Enter鍵，即可添加子主題；單擊選中某一個(gè)子主題，按Tab鍵即可插入分支主題。在主題框中輸入相應(yīng)的主題文字即可完成一個(gè)簡(jiǎn)單明了的思維導(dǎo)圖。

3 思維導(dǎo)圖的規(guī)則

應(yīng)用思維導(dǎo)圖的設(shè)計(jì)UI圖標(biāo)能夠激發(fā)設(shè)計(jì)者的靈感，從而繪制出滿意的設(shè)計(jì)圖標(biāo)。制作思維導(dǎo)圖之前，設(shè)計(jì)者要清楚思維導(dǎo)圖的規(guī)則：

3.1 自由思考

即要求參與者盡可能解放思想，在現(xiàn)有的時(shí)間內(nèi)（大約5-8分鐘）不受限制地思考，并第一時(shí)間將想到的內(nèi)容寫下來(lái)。

3.2 以量求質(zhì)

即參與者在規(guī)定時(shí)間能盡可能多地提出設(shè)想，以大量的設(shè)想來(lái)保證質(zhì)量較高的設(shè)想的存在。

3.3 質(zhì)的完善

參與者要積極進(jìn)行補(bǔ)充、整理、完善。在增加自己提出設(shè)想的同時(shí)，注意思考如何把兩個(gè)或更多的設(shè)想進(jìn)行整合，完善設(shè)想。

4 思維導(dǎo)圖在UI圖標(biāo)設(shè)計(jì)中的應(yīng)用

在飛速發(fā)展的電子產(chǎn)品中，電子產(chǎn)品的界面設(shè)計(jì)被重視了起來(lái)。做界面設(shè)計(jì)的“美工”隨之被稱之為“UI設(shè)計(jì)師”。一個(gè)電子產(chǎn)品界面美觀、交互簡(jiǎn)單易懂，不僅給人帶來(lái)舒適的視覺(jué)享受，簡(jiǎn)單的交互功能還拉近了人與商品之間的距離。

UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅可以讓軟件變得有個(gè)性、有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

UI是用戶界面，是英文User和 interface的縮寫。從字面意思上看UI設(shè)計(jì)是用戶與界面兩個(gè)部分組成，但實(shí)際上還包括用戶與界面之間的交互關(guān)系。所以UI設(shè)計(jì)應(yīng)包含三部分：用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)。

在UI設(shè)計(jì)中的圖形用戶界面設(shè)計(jì)，包括：圖標(biāo)設(shè)計(jì)、界面設(shè)計(jì)、banner、動(dòng)畫等設(shè)計(jì)。其中，圖標(biāo)設(shè)計(jì)是UI界面美觀的一個(gè)重要的部分。要設(shè)計(jì)一個(gè)既符合其本身功能又美觀的圖標(biāo)，設(shè)計(jì)者必須要了解每個(gè)圖標(biāo)功能的意義。思維導(dǎo)圖的應(yīng)用，能夠很好地幫助設(shè)計(jì)者整理出大量的功能特點(diǎn)以及實(shí)物的聯(lián)想。現(xiàn)以手機(jī)圖標(biāo)中的“音樂(lè)圖標(biāo)”為例，在制作“音樂(lè)圖標(biāo)”時(shí)，盡可能地聯(lián)想出與音樂(lè)有關(guān)的事物、符合、圖形等等元素。在聯(lián)想出的主題中，篩選出需要的元素，并進(jìn)行設(shè)計(jì)。由思維導(dǎo)圖將聯(lián)想的內(nèi)容繪制如圖1所示。

設(shè)計(jì)者將根據(jù)思維導(dǎo)圖呈現(xiàn)出來(lái)與 “音樂(lè)圖標(biāo)”有關(guān)的元素，進(jìn)行再次整合，整合出初步的設(shè)計(jì)思路，最后利用其它軟件將圖標(biāo)效果制作出來(lái)。

5 小結(jié)

隨著信息時(shí)代的飛速發(fā)展，數(shù)碼電子產(chǎn)品的更新速度快，UI界面設(shè)計(jì)的應(yīng)用范圍也越來(lái)越廣泛，如：手機(jī)界面、觸摸屏等電子產(chǎn)品。UI 設(shè)計(jì)師應(yīng)該緊跟上社會(huì)時(shí)代的步伐，掌握最新信息的新動(dòng)向，結(jié)合新的輔助軟件，打開新的設(shè)計(jì)思路，在保留圖標(biāo)功能的基礎(chǔ)上，使設(shè)計(jì)作品能夠具有新思維、新理念，給人帶來(lái)視覺(jué)上的享受。思維導(dǎo)圖的繪制，能夠幫助設(shè)計(jì)者打開聯(lián)想的窗口，給設(shè)計(jì)者帶來(lái)了源源不斷的設(shè)計(jì)思維、設(shè)計(jì)想法，從而將這些想法用相關(guān)工具設(shè)計(jì)出來(lái)。這樣，設(shè)計(jì)作品才能真正地符合人們的心理需求，才能與人們的感情與思想進(jìn)行溝通。

參考文獻(xiàn)

[1]孟建華.UI 設(shè)計(jì)與應(yīng)用[J].藝術(shù)設(shè)計(jì)，2009（04）：49-50.

[2]顧文佳.UI 設(shè)計(jì)中用戶交互體驗(yàn)的視覺(jué)思維[D].中國(guó)美術(shù)學(xué)院，2012：24.

作者單位

海南軟件職業(yè)技術(shù)學(xué)院 海南省瓊海市 571400