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

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

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

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

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

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

UI交互動效的設(shè)計原則

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

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

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

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

2.分隔線的替代方案

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

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

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

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