400-855-0210
您現在所在位置:首頁 > 資訊 > 智火動態
視覺設計的思考:如何設計APP的登錄頁

2017-02-17

 

一、APP的屬性分類
 

我們先給App分個類,為什么需要登錄注冊?因為App需要你的個人信息啊。這樣才是一個留存下來的用戶,而不是來一下就走的過客。App按注冊登錄必要性分分如下三種:

 

 

第一種:無需登錄
 

直接使用App的功能,主要是工具類的App,如日歷、計算器,手電筒之類的App,不過現在這樣純粹的App幾乎不存在,因為沒有用戶留存的App就沒有價值啊。沒有經濟價值就活不下去啊。所以市場上沒有這樣的活雷鋒了,都被系統應用取代了。而工具類的APP為了不被系統應用取代,就想辦法提供一些個性功能吸引用戶注冊。

 

 

第二種:非強制登錄
 

主要是一些資訊、生活類應用,如:網易新聞、網易云音樂等;第一次啟動App的時候既可以選擇立即注冊,也可以選擇不注冊,直接進入App的主界面。用戶無須登錄可以使用部分功能,如果需要解鎖某些功能,就必須登錄啦。比如聽音樂想根據你聽歌習慣推薦歌曲這樣的個性化功能。

 

 

第三種:強制登錄
 

這類應用具有很強的個人隱私熟悉,比如支付寶,你的錢袋子不能讓人知道你有多少錢吧,比如陌陌,你最近約了誰也不能讓人知道。還有淘寶,最近買了一些不可描述的東西不能閑雜人看到。所以這些和錢和隱私有關的音樂都是強制登錄。不登錄你是不可以使用這個App的。

 

 

二、注冊登錄的四種方式
 

理清楚哪些App需要登錄后,那么我們開看看注冊有哪幾種方式?
 

第一種:手機號登錄注冊
 

一個界面就完成了登錄或者注冊的過程。通過手機號驗證碼快速注冊或登錄,這應該是目前最高效的登錄注冊方式了。如果是新用戶直接通過手機驗證碼注冊,老用戶也可以通過驗證碼登錄。登錄和注冊一氣呵成。用戶甚至不需要記得密碼,只要手機在手,就可以無憂登錄。

 

 

第二種:用戶名密碼注冊登錄
 

注冊和登錄是分開的,簡單的說就是登錄和注冊界面是兩個界面。優點就是多平臺登錄的時候有用戶名密碼方便些。缺點就是注冊流程繁瑣啊。界面表現形式如圖例B用戶名/郵箱登錄,如果需要注冊點擊跳轉新頁面。國外用戶是挺喜歡用郵箱注冊的,總覺得老外的用戶習慣很多時候和國人差異挺大的。當然如果不想注冊彈出新頁面,那么選擇圖CD方式的標簽切換也可以讓界面很簡潔。

 

 

第三種:用戶名或者手機登錄
 

這種界面表現形式如圖EF,是一個標簽欄切換登錄方式。一個界面上可以切換手機號登錄和賬戶登錄兩種方式。這種方式擺在臺面上的說法是,為了方便用戶,給你多種登錄選擇。實際上為了方便企業維護App賬號體系的,因為可能有大量用戶是從PC上轉換過來的。他們之前并沒有用手機注冊。當然也就沒有手機號登錄了。例如美團大眾點評這樣的PC用戶量的應用肯定會選擇如EF這種形式。從用戶體驗的角度來說不是方便用戶的,因為選擇越多越難用啊。

 

 

第四種:第三方社交賬號登錄
 

一般會通過微信、微博、豆瓣等第三方常用社交賬號登錄,不僅僅能夠快捷方便的登錄體驗產品,同時方便后續通過社交賬號對APP進行分享宣傳推廣。一般小應用都會選擇這種方式,因為登錄門檻比較低。但一些用戶隱私性比較高的應用還是會選擇自建賬號體系。比如支付理財類應用比較偏向自建用戶體系,因為對于此類應用,用戶賬戶數據是至關重要的信息。

 

 

前面說了這么多,就是讓各位同學知道UI是需要基于產品設計,同時對于頁面的交互邏輯也要理解。所以視覺設計師做頁面需要去理清你界面上下游,或者界面中每個元素的邏輯,從哪里來到哪里去。
 

三、視覺設計的思考過程
 

下面我開始做視覺設計了。為了演示方便,我給自己出了一個題目,以綠色為虛擬的主題做設計登錄頁。
 

首先設計稿以iPhone7為基準設計,分辨率是1334×750,為什么選擇這個分辨率,我的書說的很明白了。這里就不再贅述了。我們先做強制登錄注冊的。這里打開應用后,一般國外的應用挺喜歡出現選擇登錄注冊界面。這里我給自己出一個題目,以綠色為主題進行設計。

 

 

不選擇純的顏色
 

1、填充品牌色
 

整個界面背景填充App的主色,因為是綠色主題,暫定主為綠色。色相選擇不要選擇過于純的顏色,不要選擇下面第一排的顏色比如翠綠。而傾向于選擇第二排,例如墨綠,祖母綠這樣顏色。就好像我們畫畫用的顏料如果直接使用顏料的顏色,會顯得畫面顏色生硬。而經過多色調節出來的顏色會顯得層次豐富。如果主色飽和度較高,請調低主色的飽和度。因為過于鮮亮的顏色會降低應用的品質感。

 

 

 

 

多效果混合模式
 

2、加矢量紋理
 

純色背景適合用反白的logo,那么,你需要設計一個有特點的線性或者剪影圖標。很多時候APP并沒有單獨設計文字名稱,這時候logo的標題字我一般選用非襯線粗體搭配。界面上的按鈕只有兩個,至于是突出注冊還是突出登錄。這個還是看產品人員的需求。因為不同應用對于登錄注冊的優先級理解不一樣。如果你的BOSS覺得這種極簡風格的背景太敷衍了。那么我們可以考慮加一些矢量的紋理。當然我們需要找綠葉元素的紋理。這樣才貼合主題。為了讓顏色更加貼合主色,我會把矢量的圖片去色,圖層模式并選用明度的模式。

 

 

 

 

 

 

3、加背景圖
 

很多時候矢量紋理也許找不到合適的,或者厭倦了各種規則紋理,我們可以試著去尋找一些好看的圖片做為背景。一般選擇整體為暗調的圖片,這樣可以承托前景的按鈕,logo等元素。對于需要強調的按鈕可以用純白做底,需要弱化的可以降低白色底的透明度。如果圖片頂端顏色雜亂不利于線上電池欄,所以可以再加上一個綠色的半透明漸變。貌似按鈕下感覺有點空,那么我們可以配上一段有詩意的語句:
 

“ It seems that green leaves look more beautiful after the rain “(雨后的綠葉看起來更美了)

 

 

選圖的四種技巧
 

4、如何選圖
 

通過前面幾步發現選圖也是一個非常有技術的活,圖片好不好直接決定整體視覺格調高不高。那么如何選圖了。因為使用VPN有時候太慢了。所以我經常在花瓣上搜圖?;ò晟系膱D片已經很多了。很多國外站好看的圖片其實已經被采過來了。搜綠色,植物,葉子等一切你可以想到的關鍵詞。然后通過畫板尋找。一些優質的畫板已經整理好足夠多的圖片。那么剩下來就是挑選。
 

(1)局部特寫圖片

 

 

局部特寫圖片適合做背景圖片,因為局部的圖形不會顯得瑣碎,配合適當的疊色對于前景的文字,按鈕視覺干擾非常少。
 

(2)矢量紋理圖片

 

 

矢量紋理圖片適合做背景圖片,且一些元素可以供靈感參考,單獨提取出來做為界面中的裝飾元素。
 

(3)透明底的圖片

 

 

透明底的圖片節省了摳圖的時間。一般界面是二維平面的,當畫面中前景放置一些這種扣好的圖片的時候,有效的破除了界面的規則感。讓整個界面更加立體。
 

(4)有人的圖片

 

 

有人的圖片才有靈氣,所以可以選擇一些在自然環境中的人物,選擇人物圖片的要點就是感受整張圖片傳達給你的情緒。孤單的,安靜的,又或者溫暖的情緒。
 

四、設計案例演示
 

(1)登錄注冊分開的界面,切換時候上部背景圖片要有區別,區別中又要統一,所以共同選擇了紋理不一樣的局部特寫圖片,圖片綠色的顏色可能不一樣,所以共同疊加了同一種綠色,降低了透明度。讓界面圖片更加統一。

 

 

(2)白色的文字,半透明的按鈕顯得畫面非常有格調,所以圖片要選擇有明有暗的,這樣的背景圖,既不會太亮,前景無法清晰顯示。也不會太暗,使這個畫面氣氛壓抑。

 

 

(3)如果界面只是一張平面圖,會顯得很死板。這時候我們需要破除界面的邊界??梢栽诮缑嬖O計中,選擇透明底的圖片,把界面中的樹葉,花之類的元素,加上陰影。這樣可以增加界面的立體效果。

 

 

(4)登錄注冊切換的界面可以選擇一對近似又有不同的圖片。這時候我選擇兩個在森林中有人物的圖片做為背景。人在自然界很容易有產生神秘孤寂的情緒。所以配上兩行詩意文字更好啦!當然文字不是亂寫的,需要配合當前界面意境。

 

 

五、登錄界面設計總結
 

視覺設計前先理清楚界面的邏輯,界面中每個元素的點擊從哪里來到哪里去。App因為產品賬號體系不同的,所以有各種登錄注冊方式。登錄注冊有四種方式。每種方式可以采用不同的形式的背景圖設計。
 

找圖片有意識的按不同類型分類去尋找圖片。要善于運用一些透明底圖片調節界面的維度。讓界面細節設計更豐富。設計師也要學會運用文字的力量,點睛的文字可以讓界面設計增加品質感。

合作意向表

請留下您的以下相關信息,我們即刻為您準備方案!

您需要的服務
  • 搜索引擎營銷
  • 互動營銷
  • 技術服務
  • 營銷產品
×
小草免费观看在线_国产av国片精品_ⅵdeodesetv性欧美