一般來說，移動(dòng)UI界面設(shè)計(jì)包括兩個(gè)方向，分別是圖形（視覺）設(shè)計(jì)和交互設(shè)計(jì)：

1、圖形設(shè)計(jì)主要管這個(gè)UI看起來是否美觀，是否有設(shè)計(jì)感等等；

2、交互設(shè)計(jì)主要管這個(gè)UI用起來順不順手，上手容不容易等等。

更重要的是移動(dòng)APP UI 設(shè)計(jì)的魅力在于，你不僅需學(xué)會(huì)使用一些合適的技巧，更要有效的理解用戶與程序的交互關(guān)系。一個(gè)有效的用戶界面關(guān)注的是用戶目標(biāo)的實(shí)現(xiàn)，包括視覺元素與功能操作在內(nèi)的所有東西都需要完整一致。

傳統(tǒng)的分隔線在桌面端的UI設(shè)計(jì)上有著悠久的歷史和不錯(cuò)的效果，但是它們在移動(dòng)端UI上有著致命的缺陷：占用空間。

許多app應(yīng)用程序并不復(fù)雜的布局，那么一看的話,覺得還可以設(shè)計(jì)的,但是當(dāng)你真正開始設(shè)計(jì)一個(gè)原型應(yīng)用程序,會(huì)發(fā)現(xiàn)它并不那么簡單。看別人已經(jīng)完成設(shè)計(jì)可能會(huì)覺得很容易,但當(dāng)自己動(dòng)手特定元素的選擇和設(shè)計(jì)是很容易落入陷阱,這時(shí)間來理解它的難度不在于多少工作量,設(shè)計(jì)師常常陷入細(xì)節(jié)建造監(jiān)獄,這是它的難度。以后中星的老師會(huì)具體分一個(gè)系列來談?wù)撨@些相關(guān)的問題。

UI交互動(dòng)效的設(shè)計(jì)原則

在互聯(lián)網(wǎng)發(fā)明之前，動(dòng)畫就已經(jīng)所處可見了，可能你需要窮盡畢生之力才能學(xué)會(huì)如何將動(dòng)畫做得絢麗輝煌。然而，在互聯(lián)網(wǎng)中實(shí)現(xiàn)動(dòng)畫效果自有其獨(dú)特的限制和挑戰(zhàn)。為了實(shí)現(xiàn)流暢的 60 幀的動(dòng)畫效果，每一幀都需要在 16 毫秒內(nèi)完成渲染!時(shí)間很短，所以我們需要找到最高效的方法去渲染每一幀內(nèi)容，從而實(shí)現(xiàn)流暢的表現(xiàn)。

1、除了透明度(Opacity)和切換(Transform)，不要改變?nèi)魏螌傩?

即便你覺得可行，那也別沖動(dòng)!動(dòng)畫中百分之八十的優(yōu)化會(huì)用到這項(xiàng)基本原則，即使是在移動(dòng)端也一樣。你或許以前聽過這個(gè)原則，這不是我提出來的，但是很少有人去遵守。這跟“管住嘴邁開腿”一樣，建議很好卻也最容易被忽略。對已經(jīng)習(xí)慣了這種思路的人來說這非常簡單，但是對那些習(xí)慣用傳統(tǒng)的 CSS 屬性去做動(dòng)畫的人來說，這會(huì)是一次質(zhì)的飛躍。

比如，你想讓某個(gè)元素小，你可以使用 transform：scale()，而不是改變寬度;如果你想移動(dòng)它，你可以使用簡單的transform：translateX 或者 transform：translateY，從而替代亂糟糟的外補(bǔ)白(margin)或者內(nèi)補(bǔ)白(padding)?—?那些需要重建每一幀的頁面布局。

2.分隔線的替代方案

系統(tǒng)的分隔線在桌面端的UI設(shè)計(jì)上有著悠久的歷史和不錯(cuò)的效果，但是它們在移動(dòng)端UI上有著致命的缺陷：占用空間。的確，一條線能有多占空間呢?但是實(shí)際上，往往一屏需要分隔的內(nèi)容會(huì)很多，分隔線一點(diǎn)也不少。如果參考傳統(tǒng)的用法，一個(gè)界面元素較多的移動(dòng)端頁面上可能會(huì)充滿了分隔線構(gòu)成的視覺噪音。值得注意的是，現(xiàn)在用戶越來越傾向于簡約的界面，這也使得如今的UI設(shè)計(jì)會(huì)盡可能多的剝離次要元素，而僅保留基本元素。這種轉(zhuǎn)變背后真正的重點(diǎn)，是設(shè)計(jì)重心向著內(nèi)容和功能轉(zhuǎn)移，這樣的設(shè)計(jì)自然而然地會(huì)讓界面看起來更加簡潔。

傳統(tǒng)的分界線在桌面的UI設(shè)計(jì)中有著長遠(yuǎn)的歷史，設(shè)計(jì)的最終所展示的效果也是不錯(cuò)的,但是它們在移動(dòng)端用戶界面有一個(gè)致命缺陷:占用空間。確實(shí),一條線可以占空間?但事實(shí)上,很多內(nèi)容往往需要一個(gè)屏幕空間,分界線往往是不能夠少的。如果參考傳統(tǒng)用法,移動(dòng)終端界面元素更多頁面可能充滿了視覺噪聲成分的分界線。

3.內(nèi)嵌分隔線

2.聯(lián)分離線和全出血位分割線是不同的,它一般是用來區(qū)分相關(guān)要展現(xiàn)的內(nèi)容,如不信聯(lián)系人列表的一部分,通常用作視覺線索,為了方便用戶瀏覽大量相關(guān)內(nèi)容,當(dāng)用戶瀏覽時(shí),他們將作為路標(biāo),方便用戶快速翻頁瀏覽。視覺上,全出血分界線是不同的,他們通常是有點(diǎn)短,并將留一些空間用來區(qū)別其他的元素,如在聯(lián)系人列表的第一個(gè)字母。