-
當(dāng)前位置:首頁 > 創(chuàng)意學(xué)院 > 品牌設(shè)計(jì) > 專題列表 > 正文
ui設(shè)計(jì)規(guī)范包括哪些內(nèi)容(ui設(shè)計(jì)規(guī)范包括哪些內(nèi)容)
大家好!今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計(jì)規(guī)范包括哪些內(nèi)容的問題,以下是小編對(duì)此問題的歸納整理,讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè),服務(wù)客戶遍布全球各地,相關(guān)業(yè)務(wù)請(qǐng)撥打電話:175-8598-2043,或添加微信:1454722008
文章目錄列表:
一、UI設(shè)計(jì)的規(guī)范標(biāo)準(zhǔn)有哪些
UI即User Interface(用戶界面)的簡(jiǎn)稱,UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì),好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位,還要讓軟件的操作變得舒適簡(jiǎn)單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。
在飛速發(fā)展的電子產(chǎn)品中,界面設(shè)計(jì)工作一點(diǎn)點(diǎn)的被重視起來,做界面設(shè)計(jì)的“美工”也隨之被稱之為“UI設(shè)計(jì)師”或“UI工程師”,其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣,是產(chǎn)品的重要賣點(diǎn),一個(gè)產(chǎn)品擁有美觀的界面會(huì)給人帶來舒適的視覺享受,拉近人與商品的距離,是建立在科學(xué)性之上的藝術(shù)設(shè)計(jì),那么,UI設(shè)計(jì)的規(guī)范標(biāo)準(zhǔn)有哪些呢?
一、軸
軸在UI設(shè)計(jì)中是最基本、最常見的概念,也是用來組織界面結(jié)構(gòu)的重要核心。
簡(jiǎn)單說來,軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線,在下面的設(shè)計(jì)圖中,軸以虛線的方式被標(biāo)注出來。
1、對(duì)齊
軸最常見于對(duì)稱元素的使用,當(dāng)元素被布置成軸對(duì)稱的布局的時(shí)候,會(huì)給人有序感。就像生活中絕大多數(shù)的事情一樣,我們更傾向于享受有序的的東西,它們令人感覺平穩(wěn)、舒適、平易近人。
最簡(jiǎn)單的一個(gè)例子就是iTunes程序中的專輯列表的設(shè)計(jì),所有的專輯列表在界面的左側(cè)保持對(duì)齊,圍繞虛線軸軸對(duì)稱。
2、強(qiáng)化
雖然軸是一條假想的線,但是如果周圍的元素的邊緣控制得足夠整齊,這跳線會(huì)在視覺中變得更加“明顯”的。
最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸,如果一邊有建筑一邊沒有,那么這種軸線的感覺不會(huì)那么強(qiáng)烈。
從產(chǎn)品設(shè)計(jì)的角度上來看,Twitter的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例,左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺。
3、運(yùn)動(dòng)
當(dāng)我們碰到某先線條的時(shí)候,視覺會(huì)很自然地沿著這些方向運(yùn)動(dòng),就如同我們站在街上,會(huì)自覺地沿著街道的兩頭走動(dòng)。兩個(gè)端點(diǎn)決定了線,界定了開始和結(jié)束的地方,線或者說軸線的存在會(huì)引導(dǎo)和提示運(yùn)動(dòng)的方向。
SoundCloud中,音軌沿著一條既定的水平軸線運(yùn)動(dòng),隨著音樂的播放,音軌自然地自左向右勻速運(yùn)動(dòng)(具體可查看馬海祥博客《如何利用動(dòng)效設(shè)計(jì)吸引訪客的注意力》的相關(guān)介紹)。
4、連續(xù)性
如果終點(diǎn)是不確定的,那么你通常會(huì)沿著軸線的方向?yàn)g覽/運(yùn)動(dòng),直到你找到感興趣的東西,或者感到厭倦并關(guān)閉應(yīng)用。
在建筑學(xué)中,未清楚界定的終點(diǎn)非常少見,因?yàn)榻ㄖ男藿ㄍǔ]法永遠(yuǎn)持續(xù)下去,但是UI設(shè)計(jì)則不一樣,無限地滾動(dòng)下去是無比受歡迎的設(shè)計(jì)手法。
Pinterest的APP中就是這樣做的,持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動(dòng)下去,只要你有興趣一直觀看下去。
二、對(duì)稱
當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí),他們構(gòu)成了對(duì)稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí),它們就形成了完美對(duì)稱。
1、平衡
對(duì)稱令整個(gè)設(shè)計(jì)更加平衡,當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí),會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。
當(dāng)我們?cè)谝?guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候,如果左右兩側(cè)都是5間大小一致的房子,當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會(huì)令人非常舒適,這是平衡給人的感受。
Rdio的APP設(shè)計(jì)就遵循著這樣的設(shè)計(jì)規(guī)則,屏幕兩側(cè)的控件是相同的規(guī)格,這類布局很適宜閱讀,用戶會(huì)自覺地自上到下,從左向右查看。
2、不對(duì)稱
如果軸線兩側(cè)的控件布置不再是一一對(duì)應(yīng)尺寸相近,那就是不對(duì)稱的設(shè)計(jì),不對(duì)稱的設(shè)計(jì)會(huì)給人明顯的失衡感,可能會(huì)令人不舒服,但是也能造就殘缺美,當(dāng)然這要看你具體怎么做。
雖然Pinteret的APP設(shè)計(jì)在整體上是沿著中軸線對(duì)稱的(寬度一致),但是兩邊的界面控件并非是對(duì)稱的,它們的高度并不一致,位置也是錯(cuò)落的,稍微一點(diǎn)的落差都會(huì)被眼睛捕捉到,而這樣的差異讓用戶無法準(zhǔn)確地左右順序閱讀,不對(duì)稱設(shè)計(jì)打破了設(shè)計(jì)的平衡性和舒適性,但是也可以緩解了規(guī)律性設(shè)計(jì)帶來的視覺疲勞。
三、層級(jí)
當(dāng)某個(gè)元素出現(xiàn)在比其他元素更重要的位置的時(shí)候,層級(jí)就出現(xiàn)了。
1、尺寸
如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大,就會(huì)區(qū)分出層級(jí)。毫無疑問,我們查看某個(gè)設(shè)計(jì)的時(shí)候,通常會(huì)被最大的元素吸引到。如果一個(gè)建筑物有5個(gè)出窗戶,其中一個(gè)是其他四個(gè)的兩倍大,我們的注意力自然而然會(huì)被吸引過去。
通過尺寸來區(qū)分文章列表層級(jí)的典型就是稍后讀應(yīng)用Pocket,頂部的輪播文章?lián)碛懈蟮膱D片,它的位置和尺寸會(huì)令我們一眼注意到(具體可查看馬海祥博客《詳解移動(dòng)端設(shè)備頁面尺寸設(shè)計(jì)原理》的相關(guān)介紹)。
2、形狀
如果一個(gè)控件在形狀和形態(tài)上同其他的不一樣,也可以讓它獨(dú)立出一個(gè)層級(jí),不規(guī)則的設(shè)計(jì)同樣會(huì)令人側(cè)目,建筑物的正面擁有五個(gè)相同的窗戶和一閃大門,你會(huì)立刻注意到門的獨(dú)特之處。
在Instagram的個(gè)人信息頁中,圓形的個(gè)人頭像在方形的圖片中別具一格,非常抓人眼球。它會(huì)讓人意識(shí)到,這個(gè)獨(dú)特的東西,更為重要。
3、位置
位置的存在同樣能彰顯層級(jí)的不一樣,在圓圈之內(nèi),中心位置的東西比邊緣部分的看起來更重要,位于軸線頂端的控件會(huì)顯得比其他部分的優(yōu)先級(jí)更高。
以設(shè)計(jì)應(yīng)用Path的設(shè)計(jì)為例,時(shí)間軸頂點(diǎn)處的用戶頭像就明顯比時(shí)間軸上的其他部分更重要,而這個(gè)地方正好展示的也是用戶頭像。
四、韻律
UI設(shè)計(jì)和建筑設(shè)計(jì)同樣有著韻律之美,重復(fù)的模式會(huì)營(yíng)造出獨(dú)特的節(jié)奏之美。
1、模式
理解韻律最直接的方式就是聽歌,音樂擁有節(jié)奏感,絕大多數(shù)的音樂遵循著相同的節(jié)拍,節(jié)拍就是音樂模式的一部分。
這方面最典型的APP是Airbnb,APP列表中每一間房子都占據(jù)一個(gè)模塊,模塊中有著大小相同的圖片,價(jià)格、位置和房東信息和圖片的相對(duì)位置一定,且排版勻稱舒服,兩個(gè)模塊之間的間距也相同,當(dāng)你瀏覽的時(shí)候,熟悉的節(jié)奏會(huì)讓你清楚地知道上哪看關(guān)鍵信息。
2、間斷
當(dāng)節(jié)奏被間隔打斷的時(shí)候,會(huì)形成不同的層級(jí),聽歌的時(shí)候,均勻的節(jié)奏被其他的音樂元素打斷的時(shí)候,你會(huì)意識(shí)到這是比較特別的部分。
在Twitter的APP中,推文和推文保持著相同的樣式,均勻的節(jié)奏,但是其中的“推薦用戶”一項(xiàng)有著不同的樣式,它插入到推文列表中,打破了整個(gè)信息流的節(jié)奏,凸顯出不同的層級(jí),會(huì)很快抓住你的注意力。
二、PC客戶端UI設(shè)計(jì)有哪些規(guī)范
1、簡(jiǎn)易性
界面的簡(jiǎn)潔是要讓用戶便于使用、便于了解產(chǎn)品,并能減少用戶發(fā)生錯(cuò)誤選擇的可能性。
2、用戶語言
界面中要使用能反映用戶本身的語言,而不是游戲設(shè)計(jì)者的語言。
3、記憶負(fù)擔(dān)最小化
人腦不是電腦,在設(shè)計(jì)界面時(shí)必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩(wěn)定,24小時(shí)內(nèi)存在約25%的遺忘率。所以對(duì)用戶來說,瀏覽信息要比記憶更容易。
4、一致性
它是每一個(gè)優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致,風(fēng)格必須與產(chǎn)品內(nèi)容相一致。軟件中往往存在多個(gè)組成部分(組件、元素)。不同組成部分之間的交互設(shè)計(jì)目標(biāo)需要一致。交互元素的外觀往往影響用戶的交互效果。同一個(gè)(類)軟件采用一致風(fēng)格的外觀,對(duì)于保持用戶焦點(diǎn),改進(jìn)交互效果有很大幫助。
5、清楚
在視覺效果上便于理解和使用。軟件要為用戶使用,用戶必須可以理解軟件各元素對(duì)應(yīng)的功能。如果不能為用戶理解,那么需要提供一種非破壞性的途徑,使得用戶可以通過對(duì)該元素的操作,理解其對(duì)應(yīng)的功能。
6、用戶的熟悉程度
用戶可通過已掌握的知識(shí)來使用界面,但不應(yīng)超出一般常識(shí)。
7、從用戶習(xí)慣考慮
想用戶所想,做用戶所做。用戶總是按照他們自己的方法理解和使用。
通過比較兩個(gè)不同世界(真實(shí)與虛擬)的事物,完成更好的設(shè)計(jì)。如:書籍對(duì)比竹簡(jiǎn)。
8、排列
一個(gè)有序的界面能讓用戶輕松的使用。軟件的交互流程,用戶可以控制。功能的執(zhí)行流程,用戶可以控制。
9、安全性
用戶能自由的作出選擇,且所有選擇都是可逆的。在用戶作出危險(xiǎn)的選擇時(shí)有信息介入系統(tǒng)的提示。
10、靈活性
簡(jiǎn)單來說就是要讓用戶方便的使用,但不同于上述。即互動(dòng)多重性,不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。
11、人性化
高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級(jí)和初級(jí)玩家系統(tǒng),即用戶可依據(jù)自己的習(xí)慣定制界面,并能保存設(shè)置。
三、UI設(shè)計(jì)需要包括什么內(nèi)容
1、圖形設(shè)計(jì),軟件產(chǎn)品的“外形”設(shè)計(jì)。
2、交互設(shè)計(jì),主要在于設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)、操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì),并且確立交互模型,交互規(guī)范。
3、用戶測(cè)試/研究,這里所謂的“測(cè)試”,其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性,主要通過以目標(biāo)用戶問卷的形式衡量UI設(shè)計(jì)的合理性。
如果沒有這方面的測(cè)試研究,UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來評(píng)判,這樣就會(huì)給企業(yè)帶來極大的風(fēng)險(xiǎn)。
有的公司UI設(shè)計(jì)工作很細(xì)分,有的就要什么都做,比如淘寶美工就專心做圖形設(shè)計(jì);游戲行業(yè)的UI細(xì)分的深,做美術(shù)的就做美術(shù),做交互的就做交互。有些公司的UI要比較全能,草圖交互原型美術(shù)一條龍甚至還要具備一定的前端編碼能力。
擴(kuò)展資料
UI設(shè)計(jì)的前身是平面、網(wǎng)頁設(shè)計(jì),在原專業(yè)的基礎(chǔ)上加入了一些人機(jī)交互的邏輯、控件的應(yīng)用、組件的狀態(tài)設(shè)計(jì)等內(nèi)容。這是由于互聯(lián)網(wǎng)發(fā)展的精細(xì)化延伸出來的新門類,因此設(shè)計(jì)的軟件應(yīng)用就是基本功了。
需要掌握Photoshop(圖像處理)、illustrator(圖形制作)、AfterEffects(視頻處理)、Axure(原型設(shè)計(jì))、Dreamweaver(網(wǎng)頁制作)、Coreldraw(矢量制作)、Flash(動(dòng)畫制作)等設(shè)計(jì)軟件及HTML5.0和DIV+CSS網(wǎng)頁代碼基礎(chǔ)。
學(xué)會(huì)了各類設(shè)計(jì)軟件的應(yīng)用還不夠,此時(shí)還不能獨(dú)立創(chuàng)作,因?yàn)槿狈?chuàng)意的表現(xiàn)技能,所以需要掌握鉛筆、水彩筆、素描本、手繪板等不同手繪工具的熟練運(yùn)用。此部分主要是設(shè)計(jì)思維的訓(xùn)練及表現(xiàn),重在設(shè)計(jì)理論的學(xué)習(xí)與構(gòu)圖技巧,學(xué)會(huì)解析各類圖標(biāo)的設(shè)計(jì)原理及表現(xiàn)技法。
參考資料來源:百度百科-UI設(shè)計(jì)
四、說一說UI設(shè)計(jì)主要包含哪些內(nèi)容呢?
UI設(shè)計(jì)主要包含的內(nèi)容有商業(yè)目標(biāo),用戶分析,人機(jī)交互,視覺設(shè)計(jì)這四個(gè)方面的內(nèi)容。
以上就是關(guān)于ui設(shè)計(jì)規(guī)范包括哪些內(nèi)容相關(guān)問題的回答。希望能幫到你,如有更多相關(guān)問題,您也可以聯(lián)系我們的客服QQ: 1454722008(同微信)進(jìn)行咨詢,客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。
推薦閱讀:
ui設(shè)計(jì)要學(xué)幾個(gè)軟件(ui設(shè)計(jì)要學(xué)幾個(gè)軟件工程)
ui設(shè)計(jì)就業(yè)前景怎么樣(ui設(shè)計(jì)師工資一般多少)
策劃案的構(gòu)成要素(策劃案的構(gòu)成要素包括)
自媒體平臺(tái)哪個(gè)收益高?全網(wǎng)收益最高的四大平臺(tái)
猜你喜歡
2019南陽雙創(chuàng)什么時(shí)候開始(南陽雙創(chuàng)什么時(shí)候結(jié)束2021)
中國(guó)風(fēng)設(shè)計(jì)元素有哪些?中國(guó)風(fēng)格設(shè)計(jì)元素
ui設(shè)計(jì)自學(xué)難嗎(ui設(shè)計(jì)自學(xué)學(xué)的出來嗎)
vi模板哪個(gè)網(wǎng)站有(vi設(shè)計(jì)模板怎么用)
vi設(shè)計(jì)零基礎(chǔ)教學(xué)(vi設(shè)計(jì)教程)
vi設(shè)計(jì)的目的和要求(vi設(shè)計(jì)的目的主要是以下那幾點(diǎn))
IP文創(chuàng)產(chǎn)品設(shè)計(jì)(ip文創(chuàng)產(chǎn)品設(shè)計(jì)概念)
問大家
如何做一名有商業(yè)頭腦的UI設(shè)計(jì)師?
UI設(shè)計(jì)師必須要有強(qiáng)大的平面基礎(chǔ)嗎?
一個(gè)技能全面的UI/UE設(shè)計(jì)師需要必備技能是什么?
網(wǎng)頁設(shè)計(jì)師怎么轉(zhuǎn)UI設(shè)計(jì)師?
美工想進(jìn)階成設(shè)計(jì)師往D方向走好還是UI?
UI設(shè)計(jì)和平面設(shè)計(jì)專業(yè),哪個(gè)更好找工作?
一個(gè)UI設(shè)計(jì)師,什么樣的作品集內(nèi)容會(huì)贏得bss以及hr的青睞?
IT行業(yè)UI設(shè)計(jì)師就業(yè)前景如何?
寧波日?qǐng)?bào)聯(lián)系方式_寧波日?qǐng)?bào)登報(bào)辦理電話_寧波日?qǐng)?bào)廣告部電話