這段時(shí)間很多朋友都在關(guān)注圖形界面設(shè)計(jì)這個(gè)話題，那么這個(gè)圖形界面是什么意思？它和 UI 設(shè)計(jì)有什么區(qū)別？下面就讓faceui給大家詳細(xì)的介紹一下什么是圖形界面。

　　圖形界面是什么意思？

　　圖形界面（簡稱GUI）是指采用圖形方式顯示的計(jì)算機(jī)操作用戶界面。與早期計(jì)算機(jī)使用的命令行界面相比，圖形界面對于用戶來說在視覺上更易于接受。

　　GUI 即人機(jī)交互圖形化用戶界面設(shè)計(jì)。縱觀國際相關(guān)產(chǎn)業(yè)在圖形化用戶界面設(shè)計(jì)方面的發(fā)展現(xiàn)狀，許多國際知名公司早已意識到 GUI 在產(chǎn)品方面產(chǎn)生的強(qiáng)大增值功能，以及帶動(dòng)的巨大市場價(jià)值，因此在公司內(nèi)部設(shè)立了相關(guān)部門專門從事 GUI 的研究與設(shè)計(jì)，同業(yè)間也成立了若干機(jī)構(gòu)，以互相交流 GUI 設(shè)計(jì)理論與經(jīng)驗(yàn)為目的。隨著中國 IT 產(chǎn)業(yè)，移動(dòng)通訊產(chǎn)業(yè)，家電產(chǎn)業(yè)的迅猛發(fā)展，在產(chǎn)品的人機(jī)交互界面設(shè)計(jì)水平發(fā)展上日顯滯后，這對于提高產(chǎn)業(yè)綜合素質(zhì)，提升與國際同等業(yè)者的競爭能力等等方面無疑起了制約的作用。

　　圖形界面設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　GUI 設(shè)計(jì)和 UI 設(shè)計(jì)有什么區(qū)別？

　　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ì)。

　　狹義上討論我們正在討論的IT互聯(lián)網(wǎng)行業(yè)，UI即是GUI的簡稱，這二者沒有任何區(qū)別。我是個(gè)GUI設(shè)計(jì)師，或我是個(gè)UI設(shè)計(jì)師，是一樣的。

　　在設(shè)計(jì)GUI或UI的過程中，我們通過可用性(Usability)的手段和方法論，來提高用戶對與計(jì)算機(jī)交互過程的滿意度，這個(gè)過程我們通常俗稱用戶體驗(yàn)設(shè)計(jì)(UX)。

　　圖形用戶界面設(shè)計(jì)小技巧

　　1、弱化背景

　　我們通?？梢园秧撁娣殖?個(gè)區(qū)域。1操作區(qū)、2瀏覽區(qū)。

　　以地圖產(chǎn)品為例，可以把地圖看成瀏覽區(qū)。搜索框和搜索結(jié)果是操作區(qū)。使用地圖的目的：1.為了讓用戶快速找到周邊場所；2.找到到達(dá)目的地的交通方式。在這種場景里地圖的作用更傾向于瀏覽區(qū)，更多起到的是襯托操作區(qū)的作用。

　　所以我們可以適當(dāng)?shù)膶⒈尘叭趸_保用戶在瀏覽頁面、使用功能的過程中，能夠清晰的分辨頁面層級。

　　2、素材的重要性

　　好的素材能提升App整體的質(zhì)感，這些素材包括圖標(biāo)的設(shè)計(jì)、圖片的選取等。素材的重要性不僅局限于視覺稿階段，也包括上線后，圖片的審核機(jī)制。確定什么樣的圖片可以被推薦到首頁，這樣能夠很好的把控App的調(diào)性。

　　3、圖標(biāo)設(shè)計(jì)

　　發(fā)現(xiàn)很多初級設(shè)計(jì)師都有這樣的誤區(qū)，不同的功能想用不同的顏色來區(qū)分。不是不可以這樣做，但我們要綜合考慮圖標(biāo)的應(yīng)用場景和整體品牌調(diào)性。

　　首先要保證圖標(biāo)形式的統(tǒng)一性，線形就統(tǒng)一用線性，面形就統(tǒng)一用面形，不要幾個(gè)圖標(biāo)是線性，幾個(gè)圖形是面形，這樣會(huì)給用戶一種“很不專業(yè)”的感受。

　　4、陰影顏色的運(yùn)用

　　現(xiàn)在很流行這種暈染陰影的設(shè)計(jì)風(fēng)格，很多設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候都喜歡去嘗試。但經(jīng)常出現(xiàn)的一個(gè)問題就是，對陰影顏色的把控。

　　圖形界面設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　5、環(huán)境色及發(fā)光細(xì)節(jié)

　　時(shí)下很多設(shè)計(jì)軟件開始注重質(zhì)感。比如比較文藝的App喜歡木質(zhì)感，科技的App注重金屬質(zhì)感，金融App模擬線下票據(jù)注重紙質(zhì)感等。

　　選取的音樂軟件，左側(cè)專輯在背景上有一種模糊的反光，營造出一種高精度毛玻璃的質(zhì)感。與專輯封面相得益彰，使頁面融為一體。包括播放圖標(biāo)和時(shí)間軸的發(fā)光效果都使頁面的層次更加豐富。

　　6、營造場景感

　　對于籃球、足球、拳擊等競技類比賽而言，“熱鬧”是吸引用戶的一個(gè)重要因素。

　　如何將頁面渲染的熱鬧呢？我們可以去參考游戲App。游戲一般都會(huì)將頁面設(shè)計(jì)的很熱鬧，而且是有節(jié)奏感的熱鬧，會(huì)將頁面分為“活動(dòng)氛圍”和“活動(dòng)參與”2個(gè)區(qū)域。我們設(shè)計(jì)頁面也是一樣。

　　將活動(dòng)氛圍區(qū)大多數(shù)是背景。使用一張圖片為背景，為了突出操作區(qū)域，給背景加一個(gè)純顏色的半透明遮罩，然后將操作區(qū)域排列進(jìn)來。可以明顯感覺到，左側(cè)的界面比右側(cè)的界面更突出重點(diǎn)。

　　以上就是faceui給大家分享了關(guān)于圖形界面設(shè)計(jì)基本常識，相信各位朋友看完上面的文章之后，對于圖形界面設(shè)計(jì)知識有了初步的認(rèn)識和了解，如果你有這方面需求的話，不妨找faceui來為你服務(wù)。