AV女忧色导航,亚洲成A人片在线播放器,日本免费一二三区中文,蜜臀久久久久精品久久久,好看AV中文字幕在线观看,av小说在线观看

企業(yè)網(wǎng)站建設(shè) · 首選XSLCMS

輕量級(jí)無(wú)多余代碼,執(zhí)行效率高速度快,靈活擴(kuò)展,多語(yǔ)言站點(diǎn)支持,生成靜態(tài),全站SEO優(yōu)化,響應(yīng)式自適應(yīng)各終端!

了解更多 加入我們
intro-image

初級(jí)無(wú)經(jīng)驗(yàn)設(shè)計(jì)師快速提升UI界面設(shè)計(jì)技巧

作者:新勢(shì)力內(nèi)容管理系統(tǒng)XSLCMS官方網(wǎng)站    來(lái)源:新勢(shì)力內(nèi)容管理系統(tǒng)XSLCMS官方網(wǎng)站     發(fā)布時(shí)間:2020-01-31    瀏覽量:2

對(duì)于無(wú)經(jīng)驗(yàn)初級(jí)設(shè)計(jì)師來(lái)說(shuō),在項(xiàng)目實(shí)戰(zhàn)設(shè)計(jì)中通常會(huì)糾結(jié)文字是變大還是變小,元素是做減法還是做加法,顏色對(duì)比強(qiáng)烈一點(diǎn)還是淡雅一點(diǎn)會(huì)有些糾結(jié)。本文針對(duì)這一難題分享一些設(shè)計(jì)技巧,望能快速提升設(shè)計(jì)品質(zhì)和產(chǎn)出能力。


界面設(shè)計(jì)一致性的重要性

讓我們從頭開(kāi)始捋一捋。你希望你的設(shè)計(jì)看起來(lái)很好,值得信賴,需要不惜一切代價(jià)避免混亂。為了實(shí)現(xiàn)這一點(diǎn),擁有一個(gè)完整的系統(tǒng)性思維是非常重要的。

開(kāi)發(fā)也期待設(shè)計(jì)師善用系統(tǒng)性思維,他們喜歡條理清晰的設(shè)計(jì),這樣他們的工作會(huì)更容易。


給定大小的尺寸設(shè)計(jì)系統(tǒng)

無(wú)論是調(diào)整文字大小、圖片大小,還是調(diào)整留白,都沒(méi)有關(guān)系,前提是需要確定每個(gè)元素的大小。我敢打賭你一定遇到過(guò)這種情況:你曾經(jīng)為一個(gè)元素選擇了一個(gè)大小,五分鐘后改了一次,然而沒(méi)多久又改了一次,也許最后改了無(wú)數(shù)次才確定下來(lái)。


哪種尺寸最合適?可能是你試過(guò)的某一個(gè)尺寸,但其實(shí)應(yīng)該避免這個(gè)無(wú)止境的浪費(fèi)時(shí)間陷阱!


首先選擇基本單元:8像素網(wǎng)格

為了使整個(gè)設(shè)計(jì)看起來(lái)更簡(jiǎn)潔,最好先設(shè)置基準(zhǔn)單位,然后再確定所有的尺寸。具體選擇多少本來(lái)應(yīng)該由你來(lái)定,但通常,最好的選擇是堅(jiān)持一些經(jīng)過(guò)驗(yàn)證的規(guī)則。其中一條規(guī)則是以8像素的倍數(shù)來(lái)調(diào)整和移動(dòng)元素的大小。這條規(guī)則會(huì)使決策更有效率。

px和dp:“dp”這個(gè)詞也被用在界面設(shè)計(jì)和原型設(shè)計(jì)中。“dp”是“密度無(wú)關(guān)像素”的縮寫(xiě)。“這個(gè)單位是以160 dpi的屏幕為基準(zhǔn)的,1個(gè)dp等于160 dpi屏幕上的1個(gè)像素,等于320 dpi屏幕上的2個(gè)像素,以此類(lèi)推。數(shù)學(xué)換算公式是' px = dp * (dpi/160) '。

注:如果使用的是較小的元素或?qū)ο?,也可以使?像素的增量,而不是8像素的增量——偶爾,可以根據(jù)需要進(jìn)行進(jìn)一步的調(diào)整。


但為什么是8像素呢?

這里有幾個(gè)原因可以解釋為什么8經(jīng)常像一個(gè)“神奇的數(shù)字”:

8像素是一個(gè)足夠的最小“增量”。

8是一個(gè)很好的數(shù),因?yàn)樗鼙?和2整除。

如果使用8,就可以輕松地調(diào)整任何元素的大小,而不會(huì)出現(xiàn)半像素,比如8 / 2 = 4、4 / 2 = 2和2 / 2 = 1。另一方面,如果你從10開(kāi)始,你會(huì)得到5個(gè)像素,然后是2.5個(gè)像素,然后是1.25個(gè)像素。在設(shè)計(jì)界面時(shí),盡可能避免一半像素。通過(guò)使用完整像素,設(shè)計(jì)中的元素將對(duì)齊到精確的像素邊界,最終看起來(lái)更清晰。

8的倍數(shù)(8、16、24、32、40、48、56、64、72、80等)與二進(jìn)制值(1、2、4、8、16、32、64、128、256、512等)交織在一起。(彩云注:對(duì)程序很友好)

最后,這些數(shù)字也很容易記住。


使用8像素網(wǎng)格的優(yōu)點(diǎn)是什么?

作為設(shè)計(jì)師,決策時(shí)間是非常寶貴的。這將使你更快、更有效率。

如果跟開(kāi)發(fā)對(duì)接,這能創(chuàng)建一個(gè)體系幫助團(tuán)隊(duì)提升效率。如果開(kāi)發(fā)需要進(jìn)行一些快速修改,他可以將值調(diào)整為8像素的增量。這能確保一致性和有規(guī)律。

當(dāng)人們?cè)L問(wèn)你設(shè)計(jì)的網(wǎng)站時(shí),他們會(huì)感到很舒服,增強(qiáng)信任感和用戶體驗(yàn)度(彩云注:秩序感能讓用戶獲得信任和舒服的感受)。


水平網(wǎng)格

我相信你在設(shè)計(jì)網(wǎng)站時(shí)已經(jīng)使用過(guò)網(wǎng)格了,使用網(wǎng)格可以幫助你準(zhǔn)確地將所有元素放置在界面上。


網(wǎng)格形成界面的骨架,并決定可以將元素放置在何處。模板化定義了清晰的邊界,這樣設(shè)計(jì)就會(huì)更加一致。用上網(wǎng)格系統(tǒng),可以更容易地決定將元素放在哪里。當(dāng)經(jīng)驗(yàn)越來(lái)越豐富時(shí),調(diào)整界面就會(huì)更加得心應(yīng)手。


但是如何創(chuàng)建這個(gè)網(wǎng)格呢?我們將在下面討論具體問(wèn)題。基本上,列的數(shù)量和大小可能是隨機(jī)的,這取決于你的需要。設(shè)計(jì)越細(xì)致,網(wǎng)格需要的列就越多。如果還是拿不準(zhǔn),就應(yīng)該向有經(jīng)驗(yàn)的同事尋求幫助。


垂直網(wǎng)格

與水平網(wǎng)格類(lèi)似,在設(shè)計(jì)中保持垂直距離的一致性也很重要,就像電子表格中的行一樣,它們可以幫助保持文本的均勻間隔。

這些行應(yīng)該要多大?再說(shuō)一次,這取決于你的需要。然而,我建議使用8像素或8的倍數(shù)(如16)重新定義元素或文本要對(duì)齊的邊界。


選擇正確的字體大小

如果你仔細(xì)觀察一些精心設(shè)計(jì)的字體,會(huì)發(fā)現(xiàn)字體大小的一致性。這是有原因的。

注:要記住,在你的設(shè)計(jì)中只需要兩個(gè),也許三個(gè)字體大小。但是,如何選擇正確的字體并使它們協(xié)同工作超出了本教程的范圍。

首先定義一些在整個(gè)項(xiàng)目中使用的關(guān)鍵字體大小。(例如,使用30,31和32像素是很愚蠢的。相反,應(yīng)該將這三種非常相似的尺寸合并成一個(gè)。)


標(biāo)準(zhǔn)字體大小有兩個(gè)好處:

設(shè)計(jì)會(huì)更一致,更優(yōu)雅。

它將加快設(shè)計(jì)過(guò)程,讓你更有效率。


字體大小

定義字體大小時(shí),請(qǐng)確保不要以相同的增量增加大小。當(dāng)放大文本時(shí),它應(yīng)該是非線性的。這意味著創(chuàng)建的文本越大,增量應(yīng)該越大。

假設(shè)有一個(gè)文本,字體大小為12像素,你想放大它,然后嘗試用14像素,你很滿意。但然后想象你有一個(gè)大標(biāo)題(40像素),你想讓它更大。你能把尺寸從40像素增加到42像素嗎?當(dāng)然不可以。在視覺(jué)上,文本需要更大的改變。設(shè)計(jì)時(shí)可能需要將其增加24個(gè)像素,從而得到一個(gè)更大的64像素的標(biāo)題。

簡(jiǎn)而言之,這意味著文本越大,需要使用的增量就越大。這個(gè)非常簡(jiǎn)單的原則不僅適用于文本,也適用于按鈕的大小、空白和其他所有元素。

它通?;谝粋€(gè)幾何級(jí)數(shù)。這是一個(gè)非常有用的圖表,顯示字體比例:

然而,對(duì)于排版來(lái)說(shuō),一種行之有效的方法是使用一套經(jīng)過(guò)經(jīng)驗(yàn)驗(yàn)證的字體尺寸。比例是12、14、16、18、20、24、30、36、48、60和72像素。


行高

一旦定義了所有的字體大小,就要注意行高了。對(duì)于行高,再次使用4像素的增量。例如,對(duì)于16像素的文本,我們將行高設(shè)置為24像素。如果你想讓文字更有呼吸感,那么將行高增加4個(gè)像素到28。


定義項(xiàng)目中的顏色

顏色的各種組合太多了,如果你不預(yù)先定義顏色的深淺,就會(huì)浪費(fèi)太多時(shí)間。你不能把自己局限于黑色、白色,藍(lán)色這類(lèi)明確的顏色。對(duì)于每一種顏色,都需要其他的色調(diào),提前設(shè)置好它們是很重要的,這樣在整個(gè)設(shè)計(jì)項(xiàng)目中顏色是能成體系的。為每種顏色準(zhǔn)備5到10種色調(diào),我喜歡為每種顏色定義9種色調(diào)。


讓我們仔細(xì)看看顏色的深淺。

為什么每種顏色有9種色調(diào)?


第一個(gè)優(yōu)點(diǎn)是顏色命名。無(wú)論使用的是設(shè)計(jì)軟件還是CSS代碼,都將從這個(gè)技巧中獲益。每個(gè)陰影將被分配一個(gè)數(shù)字,例如100、200、300、400、500、600、700、800和900。(為什么幾百?來(lái)源于css中的對(duì)自重的定義,文章鏈接:http://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)。


其次,9是定義顏色的方便數(shù)字。準(zhǔn)備這些色調(diào)的最好方法是準(zhǔn)備一排9個(gè)方塊,用顏色填充方塊。中間的是基準(zhǔn)色,然后,定義最亮的色調(diào)(在最左邊)和最暗的色調(diào)(在最右邊)。下一步是設(shè)置色調(diào)之間的顏色。


準(zhǔn)備元素的不同大小、類(lèi)型和狀態(tài)

在設(shè)計(jì)時(shí),通常會(huì)使用無(wú)數(shù)的圖標(biāo)、按鈕和其他組件。同樣,最好提前準(zhǔn)備好幾個(gè)尺寸,并將選項(xiàng)限制在盡可能少的范圍內(nèi)。在設(shè)計(jì)過(guò)程中,不要添加其他尺寸,也不要試圖調(diào)整組件的尺寸以滿足需要。相反,只使用已經(jīng)定義的那些,整個(gè)設(shè)計(jì)就會(huì)更加一致和干凈。


讓我們以按鈕為例。開(kāi)始時(shí),需要定義它們的層次結(jié)構(gòu)。為此,創(chuàng)建一個(gè)包含主操作的按鈕,一個(gè)包含次要操作的按鈕,或者另一個(gè)包要次次要操作的按鈕。對(duì)于每個(gè)按鈕,指定其狀態(tài)(激活、未激活)和顏色變體。總之盡量將元素的數(shù)量減少到最重要的元素(彩云注:目的在于盡量要減少選擇的時(shí)間,和保證一致性,提升設(shè)計(jì)效率和質(zhì)量)。


定義其他元素的屬性

UI設(shè)計(jì)師經(jīng)常在設(shè)計(jì)中使用投影。然而,對(duì)于缺乏經(jīng)驗(yàn)的設(shè)計(jì)師來(lái)說(shuō),投影有時(shí)會(huì)是一種掙扎。做投影時(shí),必須設(shè)置投影沿x軸和y軸的距離,以及模糊半徑、顏色和透明度。投影可能要花很多時(shí)間來(lái)調(diào)整,這就是為什么要在深入設(shè)計(jì)之前準(zhǔn)備它們。提前備好投影組件(使用與顏色相同的方法),然后在整個(gè)設(shè)計(jì)過(guò)程中應(yīng)用它們。


此外,還要注意將使用的元素的所有其他屬性確定好,如角半徑、透明度和顏色梯度。


留白

適當(dāng)?shù)卣{(diào)整留白很重要。不管是從外部(空白)還是從內(nèi)部(填充)調(diào)整元素,都應(yīng)該再次依賴于魔術(shù)數(shù)字8,將偏移量增加8像素(小的元素增加4像素)。與字體大小一樣,間距越大,增量就必須越大(同樣,最好預(yù)先定義這些增量)。

相關(guān)文章推薦

马尔康县| 奉新县| 乌拉特前旗| 岑巩县| 伊宁县| 泰顺县| 甘孜| 山阴县| 广平县| 阿合奇县| 丽江市| 房产| 岳普湖县| 渝中区| 襄樊市| 会宁县| 安岳县| 宁蒗| 香河县| 平罗县| 兴和县| 永定县| 徐汇区| 全南县| 芷江| 东乌珠穆沁旗| 高州市| 溆浦县| 赤城县| 遂溪县| 泰和县| 浑源县| 都匀市| 慈溪市| 忻州市| 六安市| 台南市| 左云县| 聂拉木县| 昌宁县| 海原县|