雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

UI設(shè)計(jì)思路是什么? 共同來(lái)研究

Time: 2020-03-16

       大家是不是也掌握了UI設(shè)計(jì)的技能了呢?當(dāng)然,為了幫助各位朋友們順利的完成整個(gè)設(shè)計(jì),我們需要一起來(lái)研究下UI設(shè)計(jì)思路,相信大家搞清楚這個(gè)問(wèn)題之后,將會(huì)獲得更大的成功,還等什么呢?一起來(lái)看看吧。

  一、UI設(shè)計(jì)師是做什么的?

 “UI”的本義是用戶界面,是英文User和 interface的縮寫。從字面上看是用戶與界面兩個(gè)組成部分,但實(shí)際上還包括用戶與界面之間的交互關(guān)系。具體還包括:可用性分析、GUI(Graphic User Interface即圖形用戶界面設(shè)計(jì))、用戶測(cè)試等。好的UI設(shè)計(jì)需要讓軟件變得有個(gè)性有品味,讓軟件的操作變得舒適、簡(jiǎn)單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。 因此,UI設(shè)計(jì)師不單純從事美術(shù)繪畫,而需要定位軟件使用者、使用環(huán)境、使用方式并且最終為軟件用戶服務(wù),他們進(jìn)行的是集科學(xué)性與藝術(shù)性于一身的設(shè)計(jì),他們需要完成的,簡(jiǎn)單說(shuō)來(lái),正是一個(gè)不斷為用戶設(shè)計(jì)視覺(jué)效果使之滿意的過(guò)程。 UI設(shè)計(jì)從工作內(nèi)容上來(lái)說(shuō)分為3大類別,即研究工具,研究人與界面的關(guān)系,研究人。 與之相應(yīng), UI設(shè)計(jì)師的職能大體包括三方面:一是圖形設(shè)計(jì),即傳統(tǒng)意義上的“美工”。當(dāng)然,實(shí)際上他們承擔(dān)得不是單純意義上美術(shù)工人的工作,而是軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。二是交互設(shè)計(jì),主要在于設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)、操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì),并且確立交互模型,交互規(guī)范。三是用戶測(cè)試/研究,這里所謂的“測(cè)試”,其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性,主要通過(guò)以目標(biāo)用戶問(wèn)卷的形式衡量UI設(shè)計(jì)的合理性。如果沒(méi)有這方面的測(cè)試研究,UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來(lái)評(píng)判,這樣就會(huì)給企業(yè)帶來(lái)極大的風(fēng)險(xiǎn)。

BLOG_111111111111111.png

  (圖片來(lái)自網(wǎng)絡(luò))

  二、UI設(shè)計(jì)思路

  1,明確劃分與UI相關(guān)和與UI無(wú)關(guān)的部分

  根據(jù)UI的設(shè)計(jì)圖,我們首先要把界面展現(xiàn)的數(shù)據(jù)先抽出去,只看UI的表現(xiàn)。也就是說(shuō),把UI相關(guān)的部分抽出來(lái)。比如一個(gè)界面可能需要分幾部分組成,每一部分大概怎么設(shè)計(jì)等。

  2,劃分屏幕大小,明確出跳轉(zhuǎn)關(guān)系

  要考慮到你的APP所對(duì)應(yīng)的屏幕大小及DPI,不同的屏幕與DPI,你有可能會(huì)存在不同的UI布局,最典型的是在3.0以上的SDK版本,可能引入了Fragement元素,手機(jī)屏幕與平板的屏幕的UI設(shè)計(jì),完全是兩種不同的風(fēng)格。

  還有,盡可能地明確出跳轉(zhuǎn)關(guān)系,這可以用一些小卡片的形式來(lái)標(biāo)記,一個(gè)卡版表示一個(gè)畫面,把不同畫面之間的遷移關(guān)系明確出來(lái)。

  同時(shí),還要把這些畫面之前的相同點(diǎn)與不同點(diǎn)找出來(lái),因?yàn)檫@會(huì)影響到是否決定提取共通畫面。

  3,列出需要用到的UI元素(Widget)

  把界面上展現(xiàn)的UI元素列出來(lái),像常用的button, imagebutton這些很簡(jiǎn)單,一看就知道,關(guān)鍵是有些UI,可能會(huì)涉及到一些自定義的View,這里一定要多考慮。

  另外,有可能為了統(tǒng)一控制,比如也有可能擴(kuò)展一個(gè)Button,派生類里面可能只是改變一個(gè)字體大小等,這種做法通常是用于多數(shù)UI的字體大小相同,可以抽象出來(lái)個(gè)共通的Button,這樣在各個(gè)UI里面,就可以不用都來(lái)設(shè)置這個(gè)字體大小。

  還有,也可以抽出共通的style,比如textview的style,文本顏色,字體大小,是否加粗等。

  4,列出哪些UI元素可以用SDK的,哪些則是需要自定義

  據(jù)我的經(jīng)驗(yàn),通常一個(gè)項(xiàng)目里面都會(huì)有自定義的組件(View),多數(shù)是組合控件——把不同的Widget組合成一個(gè)Layout。這還要需要根據(jù)項(xiàng)目自身的需求來(lái)定。

  注意:這里一定要有一個(gè)良好的設(shè)計(jì),以應(yīng)地需求變更。比如第一版需求,可能不需要一些組合View,直接使用SDK自身的Widget就能完成,但經(jīng)過(guò)一些變動(dòng)之后,發(fā)展之前的UI設(shè)計(jì)不合時(shí)宜,可能需要提供自定義的View,那么原來(lái)用到SDK自身的Widget的地方可能需要改動(dòng)。這種改動(dòng)說(shuō)大也大,說(shuō)小也小,在設(shè)計(jì)的時(shí)候,要多考慮一下這種需求變更。

  5,完成UI界面的繪制

  這一步,其實(shí)不一定會(huì)用到,通常情況下,不會(huì)涉及到自繪制,因?yàn)樽岳L制比較麻煩,而且費(fèi)時(shí)間,但是在特殊情況下,自繪制能提高效率,因?yàn)槟阌肰iew布局,會(huì)涉及到layout, measure, touch event, dispatch draw等方面,這些會(huì)影響性能。

  6,進(jìn)行內(nèi)部邏輯和UI界面的整合

  通常一個(gè)View里面,都會(huì)有一些邏輯,特別是自定義的View,可能會(huì)封裝一些特定的屬性。

  在使用這些View的時(shí)候,UI的activity會(huì)與這些View有一個(gè)邏輯的整合。

1584329086578097.jpg

  (圖片來(lái)自網(wǎng)絡(luò))

  以上就是我們?yōu)楦魑慌笥褌冋淼膬?nèi)容,想必大家看完之后,都非常熟悉整個(gè)UI設(shè)計(jì)思路了吧,希望可以很好的幫助大家提升自己的技能。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開