界面設(shè)計(jì)方案

界面設(shè)計(jì)方案目錄一、概述 3二、用戶界面設(shè)計(jì)標(biāo)準(zhǔn) 3三、關(guān)于軟件界面設(shè)計(jì) 51．用戶導(dǎo)向（Useroriented）標(biāo)準(zhǔn) 52．KISS（KeepItSimpleAndStupid）標(biāo)準(zhǔn) 63．布局控制 64．視覺(jué)平衡 75．色彩搭配和文字可閱讀性 86．友好與一致性 97．個(gè)性化 9四、關(guān)于網(wǎng)頁(yè)界面設(shè)計(jì) 10五、交互設(shè)計(jì) 11六、圖標(biāo) 11七、界面設(shè)計(jì)需求分析 11八、界面參考 12福隆界面設(shè)計(jì) 12其余界面觀賞 151.WebQQ 152.一個(gè)虛擬展會(huì)軟件中國(guó)官網(wǎng)設(shè)計(jì) 163.香港置地集團(tuán) 204、圖標(biāo) 235.景觀園林 286.一組精美外國(guó)網(wǎng)頁(yè) 307、匈牙利M1LLAH網(wǎng)頁(yè)界面觀賞 388、Webdesign頁(yè)面設(shè)計(jì)搜集 429.色彩與質(zhì)感并重國(guó)外網(wǎng)頁(yè)設(shè)計(jì)觀賞 4710、漂亮簡(jiǎn)練布局 56一、概述界面設(shè)計(jì)是人與機(jī)器之間傳遞和交換信息媒介，包含硬件界面和軟件界面，是計(jì)算機(jī)科學(xué)與心理學(xué)、設(shè)計(jì)藝術(shù)學(xué)、認(rèn)知科學(xué)和人機(jī)工程學(xué)交叉研究領(lǐng)域。近年來(lái)，伴隨信息技術(shù)與計(jì)算機(jī)技術(shù)快速發(fā)展，網(wǎng)絡(luò)技術(shù)突飛猛進(jìn)，人機(jī)界面設(shè)計(jì)和開(kāi)發(fā)已成為國(guó)際計(jì)算機(jī)界和設(shè)計(jì)界最為活躍研究方向。UI即UserInterface(用戶界面)簡(jiǎn)稱(chēng)。UI設(shè)計(jì)則是指對(duì)軟件人機(jī)交互、操作邏輯、界面美觀整體設(shè)計(jì)。好UI設(shè)計(jì)不不過(guò)讓軟件變得有個(gè)性有品味，還要讓軟件操作變得舒適、簡(jiǎn)單、自由,充分表現(xiàn)軟件定位和特點(diǎn)。二、用戶界面設(shè)計(jì)標(biāo)準(zhǔn)1.簡(jiǎn)易性界面簡(jiǎn)練是要讓用戶便于使用、便于了解、并能降低用戶發(fā)生錯(cuò)誤選擇可能性。2.用戶語(yǔ)言界面中要使用能反應(yīng)用戶本身語(yǔ)言，而不是游戲設(shè)計(jì)者語(yǔ)言。3.記憶負(fù)擔(dān)最小化人腦不是電腦，在設(shè)計(jì)界面時(shí)必須要考慮人類(lèi)大腦處理信息程度。人類(lèi)短期記憶極不穩(wěn)定、有限，二十四小時(shí)內(nèi)存在25%遺忘率。所以對(duì)用戶來(lái)說(shuō)，瀏覽信息要比記憶更輕易。4.一致性是每一個(gè)優(yōu)異界面都具備特點(diǎn)。界面結(jié)構(gòu)必須清楚且一致，格調(diào)必須與游戲內(nèi)容相一致。5.清楚在視覺(jué)效果上便于了解和使用。6.用戶熟悉程度用戶可經(jīng)過(guò)已掌握知識(shí)來(lái)使用界面，但不應(yīng)超出通經(jīng)常識(shí)。7.從用戶觀點(diǎn)考慮想用戶所想，做用戶所做。用戶總是按照他們自己方法了解和使用。經(jīng)過(guò)比較兩個(gè)不一樣世界(真實(shí)與虛擬)事物，完成愈加好設(shè)計(jì)。如：書(shū)籍對(duì)比竹簡(jiǎn)。8.排列一個(gè)有序界面能讓用戶輕松使用。9.安全性用戶能自由作出選擇，且全部選擇都是可逆。在用戶作出危險(xiǎn)選擇時(shí)有信息介入系統(tǒng)提醒。10.靈活性簡(jiǎn)單來(lái)說(shuō)就是要讓用戶方便使用，但不一樣于上述。即互動(dòng)多重性，不局限于單一工具(包含鼠標(biāo)、鍵盤(pán)或手柄)。11.人性化高效率和用戶滿意度是人性化表現(xiàn)。應(yīng)具備教授級(jí)和初級(jí)玩家系統(tǒng)，即用戶可依據(jù)自己習(xí)慣定制界面，并能保留設(shè)置。三、關(guān)于軟件界面設(shè)計(jì)軟件用戶界面（SoftwareUserInterface）是指軟件用于和用戶交流外觀、部件和程序等等。假如你經(jīng)常上網(wǎng)話，會(huì)看到很多軟件設(shè)計(jì)很樸素，看起來(lái)給人一個(gè)很舒適感覺(jué)；有點(diǎn)軟件很有創(chuàng)意，能給人帶來(lái)意外驚喜和視覺(jué)沖擊；而相當(dāng)多軟件頁(yè)面上充滿著怪異字體，花哨色彩和圖片，給人網(wǎng)頁(yè)制作粗劣感覺(jué)。軟件界面設(shè)計(jì)，既要從外觀上進(jìn)行創(chuàng)意以抵達(dá)吸引眼球目標(biāo)，還要結(jié)合圖形和版面設(shè)計(jì)相關(guān)原理，從而使得軟件設(shè)計(jì)變成了一門(mén)獨(dú)特藝術(shù)。通常講，企業(yè)軟件用戶界面設(shè)計(jì)應(yīng)遵照以下幾個(gè)基本標(biāo)準(zhǔn)：1．用戶導(dǎo)向（Useroriented）標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè)首先要明確到底誰(shuí)是使用者，要站在用戶觀點(diǎn)和立場(chǎng)上來(lái)考慮設(shè)計(jì)軟件。要作到這一點(diǎn)，必須要和用戶來(lái)溝通，了解他們需求、目標(biāo)、期望和偏好等。網(wǎng)頁(yè)設(shè)計(jì)者要清楚，用戶之間差異很大，他們能力各有不一樣。比如有用戶可能會(huì)在視覺(jué)方面有欠缺（如色盲），對(duì)很多顏色分辨不清；有用戶聽(tīng)覺(jué)也會(huì)有障礙，對(duì)于軟件語(yǔ)音提醒反應(yīng)遲鈍；而且相當(dāng)一部分用戶計(jì)算機(jī)使用經(jīng)驗(yàn)很初級(jí)，對(duì)于復(fù)雜一點(diǎn)操作會(huì)感覺(jué)到很費(fèi)勁。另外，用戶使用計(jì)算機(jī)機(jī)器配置也是千差萬(wàn)別，包含顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會(huì)有不一樣。設(shè)計(jì)者假如無(wú)視了這些差異，設(shè)計(jì)出網(wǎng)頁(yè)在不一樣機(jī)器上顯示就會(huì)造成混亂。2．KISS（KeepItSimpleAndStupid）標(biāo)準(zhǔn)KISS標(biāo)準(zhǔn)就是"KeepItSimpleAndStupid"縮寫(xiě)，簡(jiǎn)練和易于操作是網(wǎng)頁(yè)設(shè)計(jì)最主要標(biāo)準(zhǔn)。畢竟，軟件建設(shè)出來(lái)是用于普通網(wǎng)民來(lái)查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒(méi)有必要在網(wǎng)頁(yè)上設(shè)置過(guò)多操作，堆集上很多復(fù)雜和花哨圖片。該標(biāo)準(zhǔn)通常要求，網(wǎng)頁(yè)下載不要超出10秒鐘（普通撥號(hào)用戶56Kbps網(wǎng)速）；盡可能使用文本鏈接，而降低大幅圖片和動(dòng)畫(huà)使用；操作設(shè)計(jì)盡可能簡(jiǎn)單，而且有明確操作提醒；軟件全部?jī)?nèi)容和服務(wù)都在顯眼處向用戶給予說(shuō)明等。3．布局控制關(guān)于網(wǎng)頁(yè)排版布局方面，很多網(wǎng)頁(yè)設(shè)計(jì)者重視不夠，網(wǎng)頁(yè)排版設(shè)計(jì)過(guò)于死板，甚至照抄他人。假如網(wǎng)頁(yè)布局凌亂，僅僅把大量信息堆集在頁(yè)面上，會(huì)干擾瀏覽者閱讀。通常在網(wǎng)頁(yè)設(shè)計(jì)上所要遵照原理有：（1）Miller公式。依照心理學(xué)家GeorgeA.Miller研究表明，人一次性接收信息量在7個(gè)比特左右為宜?？偨Y(jié)一個(gè)公式為：一個(gè)人一次所接收信息量為7±2比特。這一原理被廣泛應(yīng)用于軟件建設(shè)中，通常網(wǎng)頁(yè)上面欄目選擇最好在5～9個(gè)之間，假如軟件所提供給瀏覽者選擇內(nèi)容鏈接超出這個(gè)區(qū)間，人在心理上就會(huì)煩躁，壓抑，會(huì)讓人感覺(jué)到信息太密集，看不過(guò)來(lái)，很累。比如Aol點(diǎn)com欄目設(shè)置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八個(gè)分類(lèi)。Msn點(diǎn)com欄目設(shè)置：MSNHome、MyMSN、Hotmail、Search、Shopping、Money和People&Chat共七項(xiàng)。然而很多國(guó)內(nèi)軟件在欄目標(biāo)設(shè)置遠(yuǎn)遠(yuǎn)超出這個(gè)區(qū)間。（2）分組處理。上面提到，對(duì)于信息分類(lèi)，不能超出9個(gè)欄目。但假如你內(nèi)容實(shí)在是多，超出了9個(gè)，需要進(jìn)行分組處理。假如，你網(wǎng)頁(yè)上提供幾十篇文章鏈接，需要每隔7篇加一個(gè)空行或平行線做以分組。假如你軟件內(nèi)容欄目超出9個(gè)，如微軟企業(yè)軟件，共有11個(gè)欄目，超出了9個(gè)。4．視覺(jué)平衡網(wǎng)頁(yè)設(shè)計(jì)時(shí)，也要各種元素（如圖形、文字、空白）都會(huì)有視覺(jué)作用。依照視覺(jué)原理，圖形與一塊文字相比較，圖形視覺(jué)作用要大一些。所以，為了達(dá)成視覺(jué)平衡，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要以更多文字來(lái)平衡一幅圖片。另外，按照中國(guó)人閱讀習(xí)慣是從左到右，從上到下，所以視覺(jué)平衡也要遵照這個(gè)這個(gè)道理。比如，你很多文字是采取左對(duì)齊〈Align=left〉，需要在網(wǎng)頁(yè)右面加一些圖片或一些較明亮、較醒目標(biāo)顏色。通常情況下，每張網(wǎng)頁(yè)都會(huì)設(shè)置一個(gè)頁(yè)眉部分和一個(gè)頁(yè)腳部分，頁(yè)眉部分常放置一些Banner廣告或?qū)Ш綏l，而頁(yè)腳部分通常放置聯(lián)絡(luò)方式和版權(quán)信息等，頁(yè)眉和頁(yè)腳在設(shè)計(jì)上也要重視視覺(jué)平衡。同時(shí)，也決不能低估空白價(jià)值。假如你網(wǎng)頁(yè)上所顯示信息非常密集，這么不但不利于讀者閱讀，甚至?xí)l(fā)讀者反感，破壞該軟件形象。在網(wǎng)頁(yè)設(shè)計(jì)上，適當(dāng)增加一些空白，精煉你網(wǎng)頁(yè)，使得頁(yè)面變簡(jiǎn)練。5．色彩搭配和文字可閱讀性顏色是影響網(wǎng)頁(yè)主要原因，不一樣顏色對(duì)人感覺(jué)有不一樣影響，比如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽(yáng)光，是一個(gè)快活顏色；黑顏色顯得比較莊重，考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響，為網(wǎng)頁(yè)設(shè)計(jì)選擇適宜顏色（包含背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。為方便閱讀軟件上信息，能夠參考報(bào)紙編排方式將網(wǎng)頁(yè)內(nèi)容分欄設(shè)計(jì)，甚至兩欄也要比一滿頁(yè)視覺(jué)效果要好。另一個(gè)能夠提升文字可讀性原因是所選擇字體，通用字體（Arial，CourierNew，Garamond，TimesNewRoman，漢字宋體）最易閱讀，特殊字體用于標(biāo)題效果很好，不過(guò)不適合正文。假如在整個(gè)頁(yè)面使用一些特殊字體（如Cloister，Gothic，Script，Westminster，華文彩云，華文行楷），這么讀者閱讀起來(lái)感覺(jué)一定很糟糕。該類(lèi)特殊字體假如在頁(yè)面上大量使用，會(huì)使得閱讀頗為費(fèi)勁，瀏覽者眼睛很快就會(huì)疲勞，不得不轉(zhuǎn)移到其余頁(yè)面。6．友好與一致性經(jīng)過(guò)對(duì)軟件各種元素（顏色、字體、圖形、空白等）使用一定規(guī)格，使得設(shè)計(jì)良好網(wǎng)頁(yè)看起來(lái)應(yīng)該是友好。或者說(shuō)，軟件眾多單獨(dú)網(wǎng)頁(yè)應(yīng)該看起來(lái)像一個(gè)整體。軟件設(shè)計(jì)上要保持一致性，這又是很主要一點(diǎn)。一致結(jié)構(gòu)設(shè)計(jì)，能夠讓瀏覽者對(duì)軟件形象有深刻記憶；一致導(dǎo)航設(shè)計(jì)，能夠讓瀏覽者快速而又有效進(jìn)入在軟件中自己所需要部分；一致操作設(shè)計(jì)，能夠讓瀏覽者快速學(xué)會(huì)在整個(gè)軟件各種功效操作。破壞這一標(biāo)準(zhǔn)，會(huì)誤導(dǎo)瀏覽者，而且讓整個(gè)軟件顯雜亂無(wú)章，給人留下不良印象。當(dāng)然，軟件設(shè)計(jì)一致性并不意味著刻板和一成不變，有軟件在不一樣欄目使用不一樣格調(diào)，或者伴隨時(shí)間推移不停改版軟件，會(huì)給瀏覽者帶來(lái)新鮮感覺(jué)。7．個(gè)性化（1）符合網(wǎng)絡(luò)文化企業(yè)軟件不一樣于傳統(tǒng)企業(yè)商務(wù)活動(dòng)，要符合Internet網(wǎng)絡(luò)文化要求。首先，網(wǎng)絡(luò)最早是非正式性、非商業(yè)化，只是科研人員用來(lái)交流信息。其次，網(wǎng)絡(luò)信息是只在計(jì)算機(jī)屏幕上顯示而沒(méi)有打印出來(lái)閱讀，網(wǎng)絡(luò)上交流具備隱蔽性，誰(shuí)也不知道對(duì)方真實(shí)身份。另外，許多人在上網(wǎng)時(shí)候是在家中或網(wǎng)吧等一些比較休閑，比較隨意環(huán)境下。此時(shí)網(wǎng)絡(luò)用戶使用環(huán)境所蘊(yùn)涵思維模式與坐在辦公室里西裝革履時(shí)候大相徑庭。所以，整個(gè)互聯(lián)網(wǎng)文化是一個(gè)休閑、非正式性、輕松活潑文化。在軟件上使用幽默網(wǎng)絡(luò)語(yǔ)言，創(chuàng)造一個(gè)休閑、輕松愉快、非正式氣氛會(huì)使軟件訪問(wèn)量大增。（2）塑造軟件個(gè)性另外，軟件整體格調(diào)和整體氣氛表示要同企業(yè)形象相符合并應(yīng)該很好表現(xiàn)企業(yè)CI。在這方面比較經(jīng)典案例有：可口可樂(lè)個(gè)性鮮明前衛(wèi)軟件"LifeTastesGood"；工整、全方面、細(xì)致通用電氣企業(yè)軟件"Webringgoodthingstolife（GE帶來(lái)美好生活）"；崇尚科技創(chuàng)新文化3M企業(yè)軟件"Creatingsolutionsforbusiness、industryandhome"；刻意飾演一個(gè)數(shù)字電子娛樂(lè)之集大成者角色，要成為新時(shí)代夢(mèng)想實(shí)現(xiàn)者索尼軟件；平易近人、親情濃郁通用汽車(chē)企業(yè)軟件表現(xiàn)了"以人為本"企業(yè)定位和營(yíng)銷(xiāo)策略；服務(wù)全方面、細(xì)致、方便，處處表現(xiàn)"賓至如歸"服務(wù)理念希爾頓大酒店軟件。四、關(guān)于網(wǎng)頁(yè)界面設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)不一樣于通常平面設(shè)計(jì),擁有本身設(shè)計(jì)特征。網(wǎng)頁(yè)界面設(shè)計(jì)應(yīng)時(shí)刻圍繞“信息傳達(dá)”這一主題來(lái)進(jìn)行。現(xiàn)在網(wǎng)頁(yè)界面?zhèn)鬟_(dá)信息主要是視覺(jué)信息。所以從設(shè)計(jì)類(lèi)型上來(lái)看,網(wǎng)頁(yè)界面設(shè)計(jì)屬于視覺(jué)傳達(dá)領(lǐng)域,故而網(wǎng)頁(yè)界面設(shè)計(jì)主要視覺(jué)元素和設(shè)