|
| 您的位置: 首頁 > 網(wǎng)站資訊 > UI設(shè)計(jì)的7條“規(guī)則”一 |
UI設(shè)計(jì)的7條“規(guī)則”一發(fā)布日期:2017/6/16
介紹 事先聲明,這篇入門文章不是為所有人預(yù)備的,適用人員如下:
假如你是一個(gè)藝術(shù)黌舍卒業(yè)生或者是一個(gè)成熟界面設(shè)計(jì)師,那么你很可能會(huì)覺得這篇入門文章無聊、錯(cuò)漏百出,令人惱火。這沒關(guān)系,你所有的看法都是對的,那么就請點(diǎn)擊上方的“關(guān)閉頁面”吧。 讓我來告訴你你會(huì)在這篇文章中了解什么吧。 首先,我是一個(gè)沒有效戶界面設(shè)計(jì)技能的體驗(yàn)設(shè)計(jì)師。我熱愛我的職業(yè),但是我并沒有許多工作經(jīng)驗(yàn),因?yàn)槲乙郧安恢烂烙^界面的意義: 當(dāng)時(shí)作品沒水平,反響不好,急需改進(jìn)。 我的潛在客戶更愿意去用一些不僅僅只會(huì)畫交互原型圖的設(shè)計(jì)師的作品。 難道我想一向當(dāng)一個(gè)菜鳥嗎?當(dāng)然是想成為中流砥柱了。 我有自己的理由:我不了解垃圾美學(xué),因?yàn)槲覍9ビ诠こ虒W(xué)——難看的設(shè)計(jì)幾乎是它成功的標(biāo)志。 后來我同樣研究了一些看起來悅目的APP,我從中得到了一些創(chuàng)造性的發(fā)現(xiàn):完全的、理性的分析。然后不好意思的借鑒了一下。我曾經(jīng)在一個(gè)UI項(xiàng)目上花費(fèi)了十個(gè)小時(shí),其中九個(gè)小時(shí)在瘋狂的學(xué)習(xí),一個(gè)小時(shí)在制作——絕望的在谷歌、圖釘和追波上找到了可以借鑒的作品。 這些“規(guī)則”就是從那十個(gè)小時(shí)里學(xué)到的。 給菜鳥的良言:假如你在UI設(shè)計(jì)上不夠好,那是因?yàn)槟愀朴诜治,而不是在美和平衡上沒有先天。 這篇文章不是理論,而是實(shí)踐。這里沒有黃金分割,也沒有配色寶典,只有我的一些經(jīng)驗(yàn)教訓(xùn)和一向以來的演習(xí)。 舉例來說,柔道因?yàn)槿毡旧形涞膫鹘y(tǒng)思想一向延續(xù)到現(xiàn)在?墒菍W(xué)習(xí)柔道的時(shí)候,除了演練,你也會(huì)聽到關(guān)于力量、流派以及友善這類的東西。 上個(gè)世紀(jì)三十年代,在(前)捷克斯洛伐克,一些同納粹斗爭的猶太人發(fā)明了近身格斗術(shù)。在這種不優(yōu)雅的格斗術(shù)課上,你會(huì)學(xué)到如何用一支鋼筆或者一本書來刺瞎敵人的眼睛。 UI是顯示屏上的近身格斗術(shù)。 下面來介紹設(shè)計(jì)優(yōu)雅UI的幾條準(zhǔn)則:
條:讓光影天然 陰影是好天然的暗示,它可以凸起我們想讓用戶注重到的界面元素。 “讓光影天然”——這可能是學(xué)習(xí)UI設(shè)計(jì)好主要卻好容易忽視的準(zhǔn)則。因?yàn)楣饪偸翘焐仙湎聛,所以一旦它反著從下而上,我們就?huì)覺得特別很是別扭。 當(dāng)光從天空中射下來,會(huì)照亮好上面的事物,并且向下投射出它們的影子。所以頂部好亮,而底部好暗。 你平常不會(huì)看到下眼瞼陰影很重的人,所以假如有人在臉的下方打光,然后站在你的門前,你一定會(huì)被嚇個(gè)半死。 沒錯(cuò),這對UI來說也是一樣。在用戶界面中,所有的元素都有陰影和所有的元素都沒有陰影效果其實(shí)是一樣的。我們的屏幕是二維的,但是我們給元素加入了許多效果,讓它們看起來像是三維的。 我好喜好這個(gè)按鈕被圈出來的右下方的部分: 拿按鈕來說,就算是這種扁平化的按鈕也會(huì)有一些光影細(xì)節(jié)。 1.沒有按下去的按鈕(個(gè)),底邊有深色的投影。 2.個(gè)按鈕會(huì)有一個(gè)從上到下,從淺到深的漸變,這是因?yàn)樗谀M微凸的效果。就像你照鏡子的時(shí)候會(huì)把鏡子稍稍傾斜來采光,按鈕也是如此,外觀的微凸會(huì)增添光澤質(zhì)感。 3.個(gè)按鈕的投影特別很是細(xì)膩,放大看會(huì)更顯明。 4.按下狀況的按鈕雖然依舊有從上到下,從淺到深的漸變,但是整體明度較低。這是因?yàn)楣庖话愫茈y到達(dá)向下凹陷的面。在現(xiàn)實(shí)生活中也是如此,因?yàn)槲覀冊诎聪掳粹o時(shí)手會(huì)擋住光。 這僅僅是一個(gè)按鈕,但是仍然會(huì)有四種光的微效果。我們可以通過下面這個(gè)例子來了解一下。 雖然iOS6的風(fēng)格已經(jīng)有點(diǎn)過時(shí)了,但是它在光的質(zhì)感體現(xiàn)方面做的特別很是好。 這是一對iOS6的設(shè)置按鈕——“請勿打攪”和“通知”。你是不是覺得這沒什么特殊的?那我們現(xiàn)在來看看這兩個(gè)按鈕上有多少光影效果吧。 “請勿打攪”所在的控制面板有微弱的投影。 “ON”的滑塊軌道有微凹感。 “ON”的滑塊軌道的凹面的底部有反光。圖標(biāo)是微微向外凸起的,有看到他們上邊的高光嗎?他們的光是從上方垂直投射下來的,所以你可以看到很大塊的高光。 離邊角越遠(yuǎn),光的條理越雄厚,反之則越單一。 是一個(gè)分界線的細(xì)節(jié)圖,來自于我很早以前的“Hubster”概念。 |
| 其他相關(guān)文章 |
|
|
|
|
||||||||
| Copyright 2012-2025 上海蒙狼網(wǎng)絡(luò)科技有限公司 m.coprosud.com All Rights Reserved |