亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

UI中國UTalk第八期在北京服裝學(xué)院的小劇場舉行，活動(dòng)邀請了錘子科技資深UI設(shè)計(jì)師李一奇與大家分享錘子科技圖標(biāo)的秘密。

▲ UTalk現(xiàn)場的李一奇

圖標(biāo)的定義什么是圖標(biāo)？

廣義來講，圖標(biāo)的定義分為兩種，一種用于生活中傳達(dá)意義的圖形符號,包括文字、訊號、密碼、圖騰、手語等，在日常生活中的運(yùn)用常見于于公交站牌，衛(wèi)生間導(dǎo)向或者前方急轉(zhuǎn)彎的警示標(biāo)志等；另一種是用于電子設(shè)備上表示命令或程序的符號。

我們今天所講的是后者，用于電子設(shè)備上表示命令或程序的符號。

圖標(biāo)的產(chǎn)生以及歷史由圖標(biāo)窗口和按鈕等圖形元素所組成的可視化操作區(qū)域，我們稱它為Graphcal User Interface，也就是我們今天所說的GUI，圖形用戶界面。

在最早的時(shí)候，GUI 你是沒有圖標(biāo)的，它僅僅包含窗口按鈕和信息內(nèi)容。1973年的時(shí)候施樂公司的PARC研究所研發(fā)出地球上第一臺帶有 GUI 和鼠標(biāo)的電腦Xerox Alto，他是后來所有個(gè)人電腦的原型。可惜最終這臺電腦的商業(yè)命運(yùn)是以失敗告終的，它當(dāng)時(shí)被認(rèn)為是世界最偉大的失敗產(chǎn)品。

▲ Xerox Alto

關(guān)于失敗的原因，有些說法是因?yàn)楫?dāng)時(shí)施樂的董事會(huì)并沒有看中這個(gè)商機(jī)，未能將這臺電腦商品化，也有些說法是，產(chǎn)品上市后因?yàn)樯饫涞瑢?dǎo)致了失敗。不管怎樣這不重要，重要的是它的出現(xiàn)在計(jì)算機(jī)領(lǐng)域確是一項(xiàng)偉大的創(chuàng)舉。后來這個(gè)創(chuàng)舉是被比爾蓋茨和喬布斯發(fā)揚(yáng)光大了。

在網(wǎng)上關(guān)于施樂公司的一些記載稱，1979年，喬布斯參觀了施樂的PARC研究所，當(dāng)他看到這臺電腦時(shí)，他被這種超前的交互方式震撼到了，我想這種震撼程度不亞于07年的iPhone帶給我們的驚喜，他驚嘆到“哇！這就是未來。”，于是他回去后決定自己研發(fā)一臺帶有鼠標(biāo)和GUI的個(gè)人電腦，那個(gè)時(shí)候喬布斯才24歲。

之后蘋果公司在1983年推出了Apple Lisa。

這一套就是施樂之星 Xerox Star 的圖標(biāo)設(shè)計(jì)，據(jù)我所知這也是世界上第一套裝在個(gè)人電腦里的圖標(biāo)，這是喬布斯的 Apple Lisa ， 這是 Windows 1.0 和 Amiga Workbench 。大家可以縱觀這個(gè)時(shí)期的圖標(biāo)設(shè)計(jì)，因?yàn)槭艿搅孙@示技術(shù)的限制，設(shè)計(jì)師只能在有限的空間里面進(jìn)行圖標(biāo)創(chuàng)作。幾乎都是分辨率非常低的單色圖標(biāo)，而且沒有 Alpha 通道。

▲ 80年代的圖標(biāo)

到了 90 年代，微軟和蘋果相繼推出了新的系統(tǒng)界面，隨著顯示技術(shù)在分辨率和色域上的提高，設(shè)計(jì)師或藝術(shù)家有了更大的發(fā)揮空間，隨之出現(xiàn)了更多顏色的運(yùn)用以及更多透視效果的可能性。

▲ 90年代的圖標(biāo)

那么 2000 年的時(shí)候就出現(xiàn)了我們都非常熟悉的水晶質(zhì)感和玻璃質(zhì)感的圖標(biāo)風(fēng)格。

那其實(shí)移動(dòng)設(shè)備上的 GUI 發(fā)展同樣也經(jīng)歷了一番剛才所說的，由于技術(shù)的限制設(shè)計(jì)師的創(chuàng)作空間，剛開始只能設(shè)計(jì)單色的簡單的圖標(biāo)，到后來可以執(zhí)行各種創(chuàng)意，實(shí)現(xiàn)各種效果，一直到現(xiàn)在。

▲ 2001年-2007年圖標(biāo)的發(fā)展

2007年蘋果公司就給了世界一個(gè)驚喜，第一代iPhone面世。那么最具特色的設(shè)計(jì)之一，就是圓角矩形的運(yùn)用。毫無疑問，圓角矩形的設(shè)計(jì)是非常成功的，它有效保持了iOS系統(tǒng)的整潔和統(tǒng)一，也由于它的成功，很大程度影響了設(shè)計(jì)師們的設(shè)計(jì)趨向。隨著時(shí)間推移，圓角矩形慢慢地變成了一種極端，隨后幾年，移動(dòng)平臺的設(shè)計(jì)風(fēng)格嚴(yán)重趨同，什么都是方的。甚至在 Dribbble 上，我們可以看到很多設(shè)計(jì)師會(huì)下意識的將圖標(biāo)設(shè)計(jì)成圓角矩形，盡管這個(gè)設(shè)計(jì)可能并不用在iOS系統(tǒng)中。你們可以想象一下，在沒有任何前提的情況下，你現(xiàn)在要畫一個(gè)圖標(biāo)，例如說你現(xiàn)在要畫一個(gè)凳子，你會(huì)刻意的把它畫成三角形嗎？你當(dāng)然不會(huì)，除非你在從事藝術(shù)創(chuàng)作，正在完成一個(gè)天馬行空的想法。除此之外，你不會(huì)把一個(gè)凳子畫成三角形。

在這里我想說明的一點(diǎn)是，在一個(gè)極度成功的人或事情面前，人們常常失去應(yīng)有的思考和判斷，不假思索地去模仿他的一切特征，以便尋求自身的進(jìn)步。就像一個(gè)城市他非常的繁榮，在它周圍落后的地方，就會(huì)容易去模仿這個(gè)城市的，包括經(jīng)濟(jì)模式，建筑風(fēng)格，道路名稱等等特征，尤其很多地方的人會(huì)模仿這個(gè)城市的居民說話的口音。因?yàn)樗麄兿嘈胚@一切模仿，都是他們尋求進(jìn)步的方式?；氐皆O(shè)計(jì)上，它的質(zhì)感好，我們可以學(xué)習(xí)，它的顏色運(yùn)用協(xié)調(diào)我們可以學(xué)習(xí)，他的隱喻恰到好處我們舉一反三，但它的造型如果毫無道理，我們就應(yīng)該去避免。

2013年，當(dāng)我們在做Smartian OS的時(shí)候，在設(shè)計(jì)圖標(biāo)的過程中，我們經(jīng)過不斷的思考，堅(jiān)持認(rèn)為圖標(biāo)就應(yīng)該是它應(yīng)該有的樣子。無論在手機(jī)還是電腦端。

當(dāng)時(shí)我們試著把 OSX 里的圖標(biāo)放到手機(jī)里，出現(xiàn)的效果是雖然都很精美，但會(huì)顯得亂，這樣不適合長期使用也不方便查找，大家可以比較一下，桌面操作系統(tǒng)有足夠的空間去容納這些異形圖標(biāo)，所以看起來非常的舒服。那我們應(yīng)該如何在一個(gè)小的空間里，既能擺滿異形圖標(biāo)，又不顯得亂呢？縮小一點(diǎn)看看，這是安卓的做法，那其實(shí)這樣會(huì)削弱圖標(biāo)的精美程度，因?yàn)橹灰嫷暮每?，圖標(biāo)就越大越好看，iPhone 是做一個(gè)統(tǒng)一的形狀，讓它們看起來不那么亂，但我們覺得這并不是最好的選擇，只是妥協(xié)的結(jié)果。然而當(dāng)時(shí)我們還考慮一個(gè)問題，為什么除了Dock 以外，其余一定要16個(gè)圖標(biāo)呢？不能更多也不能更少了么？其實(shí)通常我們一天，使用最頻繁的App 一般不會(huì)超過12個(gè)。所以我們那時(shí)嘗試了這個(gè)做法，減去幾個(gè)圖標(biāo)把其余的放大些。這樣就解決了剛所說的問題，既能在一個(gè)小的空間里擺滿異形圖標(biāo)，又不顯得亂。然后我們，再加一些線，讓它看起來更整齊。

那么確定的設(shè)計(jì)主張和方向了以后，我們應(yīng)該如何制定規(guī)范呢？大家覺得全部都是異型圖標(biāo)，應(yīng)該怎么規(guī)范？這是桌面上能顯示的最大的圖標(biāo)尺寸，我們先定一個(gè)最常見的形狀——圓形，大家可以看到，圓的上下左右各留了1到2個(gè)像素，你們知道是為什么嗎？我們把它稱作安全區(qū)域，是預(yù)留給描邊或者陰影的。舉個(gè)例子，因?yàn)楫?dāng)你畫完了一個(gè)圖標(biāo)，它有可能會(huì)在白色或黑色上面出現(xiàn)，如果這個(gè)圖標(biāo)是白色，他在同樣白色的界面時(shí)出現(xiàn)的時(shí)候，很有可能是這樣的，那么這個(gè)時(shí)候，為了保證圓形大小與別的圖標(biāo)一致，我們必須給它加上一些描邊或者陰影。那么定下了這個(gè)圓形的以后呢，別的形狀就好辦了。這是一個(gè)橫長方，這是一個(gè)豎長方，你們知道為什么它的形狀一定要是這樣嗎？其實(shí)答案很簡單，它們與圓的面積是相等的，這樣能使得它們看起來，視覺重量也是相等的。那么長方形其實(shí)是我們的保守方案，我們只會(huì)在不得不的時(shí)候才使用它。如果可能我們一般會(huì)選擇圖標(biāo)本身該有的樣子，規(guī)范異形的方法就是讓它面積的計(jì)算結(jié)果盡可能地與圓形相近，這樣看起來最終呈現(xiàn)的效果就會(huì)越發(fā)的平均。

這里順帶提下我們的圓角，一般我們用Photoshop 拉出來的圓角是這樣子的，這是蘋果的圓角，這是我們的圓角。大家有發(fā)現(xiàn)什么區(qū)別嗎？

你們可以比較一下，這個(gè)地方看起來會(huì)不會(huì)生硬了一點(diǎn)。因?yàn)樗慕M成形式是這樣子的。相當(dāng)于我們駕車走在公路上，到了這個(gè)點(diǎn)，一下打死了方向盤，然后轉(zhuǎn)彎，然后出彎立刻把方向盤打回來，再直走，結(jié)果就會(huì)呈現(xiàn)這個(gè)圓角的形狀。那么蘋果在圓角的設(shè)計(jì)上，是相應(yīng)做了調(diào)整的，他們在入彎的時(shí)候，慢慢的把方向盤打到一個(gè)角度上定住，然后轉(zhuǎn)彎，然后再快出彎道的時(shí)候，再慢慢把方向盤打回來。這是我們平時(shí)所說的曲率連續(xù)的那個(gè)概念。那大家再來看看我們的圓角，我們從進(jìn)入彎道的那一刻就慢慢的轉(zhuǎn)動(dòng)方向盤，每經(jīng)過的一個(gè)角度，方向盤轉(zhuǎn)動(dòng)的幅度就會(huì)更大一些，經(jīng)過45度角我們再慢慢的再把方向盤打回來，全程是一個(gè)漸強(qiáng)漸弱的曲線。所以我們的圓角看起來是最柔順的。

有了規(guī)范以后呢，就開始畫圖標(biāo)了，我要制作一套好的系統(tǒng)圖標(biāo)。那么要搞清楚什么是好的系統(tǒng)圖標(biāo)之前，先搞清楚什么是好圖標(biāo)。

好圖標(biāo)的特性包括三點(diǎn)，第一是好看，第二是識別性，第三是隱喻。

那么什么是好的系統(tǒng)圖標(biāo)，好的系統(tǒng)圖標(biāo)是在這3點(diǎn)的基礎(chǔ)上，再加上特征和品牌兩個(gè)屬性，那么特征又包括了它自身的統(tǒng)一性和在其他方面的拓展性。那么特征的把握是非常重要的，這邊著重講一下，大家都知道我們花了很多心血在第三方圖標(biāo)的重繪工作上，友商們也是這么做的，為的是讓主界面的圖標(biāo)們看起來更加和諧，但是我們不可能吧世界上所有的 app 都重繪，在每個(gè)用戶的手機(jī)里肯定還有原廠圖標(biāo)。出于這個(gè)考慮我做了這個(gè)實(shí)驗(yàn)，我找了兩套我認(rèn)為設(shè)計(jì)得非常不錯(cuò)的友商的一些圖標(biāo)，這一屏是Smartisan OS的系統(tǒng)圖標(biāo)。那么單純從風(fēng)格上看，它們有各自的設(shè)計(jì)語言，在造型的把握也非常好看，我相信它們的特征都足以讓各位記得，甚至在一段時(shí)間以后，再次辨認(rèn)，你們也不會(huì)出錯(cuò)。那么接下來我要開始做一個(gè)實(shí)驗(yàn)，我找了一些第三方應(yīng)用的原廠圖標(biāo)，我把剛才一些系統(tǒng)圖標(biāo)混進(jìn)去，大家有沒有發(fā)現(xiàn)這些圖標(biāo)很容易被辨認(rèn)出來？然后再換成我們的系統(tǒng)圖標(biāo)看看，打成一片了。原因很簡單，在設(shè)計(jì)語言和風(fēng)格都是非常統(tǒng)一的前提下，我們使用了很多不同的表現(xiàn)手法，有寫實(shí)的，有抽象的，有畫的，有照片，有極簡的，有復(fù)雜的，使用這么多的表現(xiàn)形式，為的是看起來更加豐富，同時(shí)兼容第三方原廠圖標(biāo)的風(fēng)格，使得擺在一起時(shí)顯得更加平衡。

以上就是我想著重強(qiáng)調(diào)的第四點(diǎn)特征以及對特征的把握。

那么說到品牌，我認(rèn)為是一個(gè)產(chǎn)品的設(shè)計(jì)和體驗(yàn)達(dá)到極致了以后，產(chǎn)品背后蘊(yùn)含的一些故事。像這張郵票，這是 Smartisan OS 的郵件圖標(biāo)，這是我們當(dāng)初的一些方案，最后我們選的是鴿子，以郵票的形式出現(xiàn)。那么看到鴿子其實(shí)是比較容易聯(lián)想到送信的，開始我們把它設(shè)計(jì)成這個(gè)樣子，但后來因?yàn)楦杏X太調(diào)皮了，不夠穩(wěn)重，所以去掉了，然后很多朋友都關(guān)心這個(gè)章上面的內(nèi)容，我們放大看一下，這一圈是我們公司的地址，望京東路一號。

那么相機(jī)圖標(biāo)上的這個(gè)參數(shù)是我們后置鏡頭的焦距和光圈，是的，每一代手機(jī)都不一樣，哎呀，我們是一家注重細(xì)節(jié)的公司，非常注重細(xì)節(jié)。

這個(gè)是我們天氣的圖標(biāo)，這是給大家展示我們的一些設(shè)計(jì)過程，其實(shí)這個(gè)天氣圖標(biāo)本身和它的界面風(fēng)格是高度匹配的，這個(gè)后面我會(huì)給大家講到，這是相冊圖標(biāo)的設(shè)計(jì)過程，其實(shí)我們最后選定這個(gè)圖標(biāo)是出于一個(gè)原因，大家可以看一下這是我們之前所有的系統(tǒng)圖標(biāo)，有沒有發(fā)現(xiàn)少了一個(gè)比較重要的顏色？那么為了讓這個(gè)橙黃色看起來，不顯得那么的暮氣沉沉，我們選擇了一個(gè)小孩奔跑的照片。那么相對于前一版富士山來說，無論是顏色上還是情感上，這張照片看起來更有溫度。

那么剛才提了一下，圖標(biāo)和界面高度匹配的設(shè)計(jì)，我們家是做到了極致。甚至有些圖標(biāo)的設(shè)計(jì)是先有界面的，像便簽的圖標(biāo)就是先有見面再有圖標(biāo)，然后高度匹配的還有商店，還有時(shí)鐘，音樂，天氣和計(jì)算器等等……

大家關(guān)注我的新浪微博 @李一奇

END.