亚洲综合小说另类图片

<dfn id="4z7un"><s id="4z7un"></s></dfn>
          1. <nav id="4z7un"><sup id="4z7un"></sup></nav>
            <th id="4z7un"></th>

          2. <output id="4z7un"><small id="4z7un"><input id="4z7un"></input></small></output>
            八周年活動月
            歡迎訪問長沙友點軟件科技有限公司旗下產品友點CMS官方網站!
            友點CMS

            7條實用法則讓你制作好看的UI界面(一)

            來源:友點CMS 日期:2015-08-15 11:21:06 屬于:網頁美工

            本文編譯自Medium,作者是一位UX(User Experience, 用戶體驗)設計師,他通過自己學習UI設計的過程,總結出7條實用的法則,為UI設計新手提供了寶貴的經驗。文章分為2個部分,這里是第1部分。

            UI設計師入門:7條實用法則讓你制作好看的UI界面(一)

            序言

            首先,明確一點,這篇文章并不是為所有人準備的,而是有特定的目標讀者:

            • 想要在開發產品時設計出好看UI的開發者。
            • 想要讓自己作品集更出彩的UX設計師,或者是想要做出更精美的UI和UX的設計師。

            如果你是學藝術的學生或者已經是 UI 設計師了,你可能覺得這篇文章很無聊,而且觀點都是錯的。沒關系,你的批評沒錯,把這個網頁關了,去忙別的事吧。

            那么從這篇文章中到底能學到什么呢?我曾是一名不懂 UI 的 UX 設計師。我非常熱愛 UX 設計,但是后來我發現,做出精美的界面是多么的必要:

            • 我以前的作品集看起來一團糟,顯得我的作品和思考過程很差勁。
            • 我做UX咨詢的客戶更喜歡有能力呈現作品的人,而不是只會畫一堆方塊和箭頭的人。
            • 我能為一些早期的創業公司工作嗎?還是一邊兒呆著吧。

            我當然也有借口:

            我沒有美術基礎,我主修工程專業,所以我做出難看的東西也無可厚非。

            最終,我還是學了 app 設計,不斷地分析案例,厚著臉皮臨摹成功的作品。假設我在 1 個 UI 項目上花 10 個小時的時間,其中只有 1 個小時是有效的,其它 9 個小時都是在失敗中不斷地學習,玩命的在 Google、Pinterest 或者 Dribble 上找值得借鑒的東西。

            下面這些“法則”都是我從失敗中總結出來的。所以,我需要提醒新人:我現在擅長UI,主要得益于我經常分析,并不是突然開悟,理解了什么是美,什么是平衡。

            這篇文章不講理論,只談應用。我不會講什么黃金分割、色彩理論,只有實站中總結出的經驗和教訓。就好像,柔道源于日本幾個世紀以來的尚武精神和哲學理念。上柔道課時,不僅能學到打斗,還會學到很多關于能量、氣息與和諧之類的東西。而以色列格斗術(Krav Maga)則完全不同。這種格斗術是納粹壓迫下猶太人發明的。其中根本沒有“藝術”,在以色列格斗術的課堂上,你學到就是怎樣用一根筆或者本書襲擊別人的眼睛。

            這篇文章就是產品設計領域的以色列格斗術。

            以下是我要講的法則:

            1. 光線來自天空
            2. 黑白優先
            3. 增加空白空間
            4. 學會在圖片上呈現文字(第2部分)
            5. 做好強調和淡化(第2部分)
            6. 只用合適的字體(第2部分)
            7. 善于借鑒優秀的作品(第2部分)

            我們來一起看看這些法則。

            法則1:光線來自天空

            陰影能夠告訴人腦我們到底在看什么樣的UI元素。

            這可能是學習 UI 設計時,最容易忽略卻又極為重要的一點了: 光線來自天空。光線總是從天空(上方)來的,從下面照上來的光看起來會非常詭異。

            當光線從天上照下來的時候,物品的上端會偏亮,而下方會出現陰影。上半部分顏色淺一些,而下半部分深一些。

            從下面打一束光到人臉上是不是看起來很滲人?UI 設計也是同理。我們的屏幕是平的,但是我們可以通過一些藝術手法讓它看起來是 3D 的,在每個元素的下方加一些陰影。

            p5

            就拿這個按鈕舉例,這是一個相對“扁平化”(flat) 的按鈕,但依然可以看出一些光線變化的細節:

            1. 沒有按下去的按鈕底部邊緣更暗,因為沒有光線照到那里。
            2. 沒有按下去的按鈕上半部分比下半部分稍微亮一些。這是在模仿一個略有弧度的表面(見側視圖)。
            3. 沒有按下去的按鈕下方有一些細微的陰影,在放大圖中看得更清楚。
            4. 按下去的按鈕整體顏色都更暗了,但下半部分的顏色依然比上面深。這是因為按鈕在屏幕的平面上,光線不容易照到。也有人說,在現實中,按下去的按鈕顏色更深,因為手遮擋住了光線。

            這么一個簡單的按鈕就有 4 種不同的光線變化。實際上,我們可以把這種原則運用到各處。

            iOS 6 有點過時了,但還是學習光線不錯的案例。這張圖是 iOS 6“勿擾模式”和“通知”的設置,看看上面有多少種不同的光線變化。

            • 控制面板的上邊緣有一小塊陰影。
            • “開啟”滑動槽上部也有陰影。
            • “開啟”滑動槽的下半部分,反射了一些光線。
            • 按鈕是突出的,上邊緣較亮,因為是與光源垂直的,接收了大量光線,折射到你的眼睛中。
            • 因為光線角度的問題,分割線處出現了陰影。

            通常會內嵌的元素:

            • 文字輸入框
            • 按下的按鈕
            • 滑動槽
            • 單選框(未選擇的)
            • 復選框

            通常會外凸的元素

            • 未按下的按鈕
            • 滑動按鈕
            • 下拉控件
            • 卡片
            • 選擇后的單選按鈕
            • 彈出消息

            等等,現在不是追求扁平化的設計嗎?

            iOS 7 引發了科技界對于“扁平化設計”(flat design) 的追求。也就是說圖標是平的,不再模仿實物而外凸或內凹,只有線條和單一顏色的形狀。

            我很喜歡這種干凈、簡潔的風格,但是我認為這種趨勢不會長久。通過細微的變化模擬出 3D 的效果非常自然,不會被完全取代的。

            在不久的將來,我們很可能會看到半扁平的 UI(這也是我推薦你使用的設計風格)我把它稱為“flatty design”,依然非常干凈簡潔,但是也有一些陰影,有輕點、滑動、按下操作的提示。

            現在,Google 也在各個產品上推行他們的Material Design,提供一種統一的視覺設計語言。Material Design 的設計指導為我們展示了它如何運用陰影表現不同的層次。

            這也是我所認同的類型。用現實世界的元素來傳遞信息,關鍵在于:細微。你不能說它沒有模仿現實世界,但也絕不是 2006 年的網頁風格,沒有紋理,沒有梯度,更沒有光澤。

            我認為“flatty”是未來的方向。扁平化?早晚會過時的。

            法則2:黑白優先

            在上色前用灰度模式設計可以簡化大量的工作,讓你更加關注空間和元素布局。

            UX 設計師現在都喜歡“移動優先”的概念,這就意味著你要先考慮好在手機上如何顯示頁面,然后才考慮在超清的 Retina 屏幕上的顯示效果。

            這種限制非常好,能夠幫你理清思路。先解決一些棘手的問題(在小屏幕上顯示)。然后再解決簡單的問題(在大屏幕上的可用性)。

            我希望你先用黑色和白色設計,先把復雜的問題解決了。在不借助顏色幫助的情況下把 app 做得美觀易用。最后再有目的地上色。

            這種方法能保持 app“干凈”、“簡潔”。加入過多的顏色很容易毀掉簡潔性。“黑白優先”會促使你關注空間、尺寸和布局這些更重要的問題。先來看一些經典的用灰度模式設計的頁面。



            “黑白優先”法則并不適用于所有情況,比如運動、卡通等有著鮮明特色的設計就需要好好地運用各種顏色。不過,大部分app并沒有這樣鮮明的特點,只要保持干凈和整潔就好,絢麗的顏色被公認是很難設計的,所以,還是先用黑色和白色來吧。

             

            第二步:如何上色

            上色最簡單的方法就是只加一種顏色。

            在灰色的基礎上只加一種顏色可以簡單快速的吸引眼球和注意力。

            你也可以更進一步,在灰色的基礎上加兩種顏色,或者添加統一色調的多種顏色。

            實踐中的顏色法則——什么是色調?

            網頁主要用的是十六進制 RGB 表。但 RGB 不是個好的顏色設計框架,HSB 模式會更好用,其中 H(hues) 表示色相,S(saturation) 表示飽和度,B(brightness)表示亮度。

            HSB 模式是比 RGB 模式更適合我們看待顏色的方式。如果你對這方面不太了解,以下是一些 HSB 模式簡單的入門知識。

            通過調整單一色相的飽和度和亮度,你可以生成各種不同的顏色——深色、淺色、背景色、強調的地方、吸引眼球的地方等,但是又不會很扎眼。

            使用一種或兩種基礎色調的多種顏色是強調和淡化某些元素,而又不把設計搞得一團糟的最可靠的方法。

            關于顏色的其它幾點建議

            顏色是視覺設計中最復雜的。我從復雜的理論和長期的實踐中挑出了一些好的建議送給你:

            小工具箱:

            • 不要用純黑色:在現實世界中幾乎見不到絕對的黑色。調整不同的飽和度可以增加設計的豐富程度,也更接近現實世界。
            • Adobe Color CC:尋找、調整、創造顏色組合的絕佳工具。
            • 在Dribbble通過顏色搜索:尋找某種顏色如何搭配的好方法,非常實用,如果你已經決定了要用那種顏色,可以通過顏色搜索看看世界頂級的設計師是如何配色的。
            • 可嘗試使用《免費好用的調色劑 PSD源文件格式》上顏色

            法則3:增加空白空間

            為了讓UI看起來更加有設計感,留出一些空白的空間。

            在第 2 條法則中,我說到了黑白優先的原則,讓設計師在考慮顏色之前先想想空間和布局,那么現在我們就來說說如何安排空間和布局。

            HTML 的默認版式是這樣的:

            所有東西都堆在屏幕上,字號、行距都很小,段與段之間有一些間隔,但是也不是很大。這么布局實在是太難看了。如果你想設計出精美的UI,那就需要留出更多空白的空間。

            留白空間、HTML 和 CSS

            如果你和我以前一樣,習慣用 CSS 來調整布局,那你最好改掉這個壞習慣,因為 CSS 默認是沒有留出空間的。試著把空白當作默認狀態,在空白頁面添加各種元素。從沒有修飾過的 HTML 開始,先做好內容,然后再做排版。

            下圖是 Piotr Kwiatkowski 設計的一個音樂播放器。

            請注意左側的菜單欄。字號是 12px,行間距有文字的兩倍高。再看看列表的名稱,“PLAYLISTS”和下劃線之間有 15px 的空白,播放列表名稱之間還有 25px 的間距。

            p5

            在頂部導航欄也有很大的空間,搜索圖標和“Search all music”占到了導航欄高度的 20%。

            留白的空間收到了良好的效果,不同的元素有機的組合在一起,使得這個頁面成為最好的音樂播放器 UI 之一。

            大量的空白可以把混亂的界面做得簡潔美觀,比如這個論壇:

            或者維基百科:

            很多人認為在維基百科的這個新頁面上,很多功能找不到了,但是你不能否認這是學習頁面設計的一個好案例。

            在行之間留出空間。

            在各個元素之間留出空間。

            在各組元素之間留出空間。

            分析一下哪些是可行的。

            好了,以上就是第 1 部分的內容,感謝閱讀!

            在第 2 部分中,我會講到剩下的 4 條法則:

            4. 學會在圖片上呈現文字

            5. 做好強調和淡化

            6. 只用合適的字體

            7. 善于借鑒優秀的作品

            亚洲综合小说另类图片
            <dfn id="4z7un"><s id="4z7un"></s></dfn>
                    1. <nav id="4z7un"><sup id="4z7un"></sup></nav>
                      <th id="4z7un"></th>

                    2. <output id="4z7un"><small id="4z7un"><input id="4z7un"></input></small></output>