技術(shù)資訊
網(wǎng)站登錄窗口的設(shè)計
2012-03-19 23:42:03
在青島網(wǎng)站制作中,經(jīng)常會涉及到會員登錄窗口的界面設(shè)計,如果做好登錄窗口的設(shè)計, 提高用戶的瀏覽體驗(yàn),下文將做以詳述。
現(xiàn)在越來越多的大型網(wǎng)站把登錄和首頁放在一起設(shè)計,由此可見登錄頁面的 重要性,一個出彩的登錄界面,將提升產(chǎn)品的品質(zhì),賦予產(chǎn)品獨(dú)特的氣質(zhì),登 錄界面也是一個發(fā)揮情感化設(shè)計,提升用戶體驗(yàn),拉近與用戶之間距離的兵家 必爭之地,本文不談趨勢,不講交互大道理,不涉及技術(shù),就侃侃用戶登錄頁 面的一些設(shè)計表現(xiàn)形式。希望這些設(shè)計表現(xiàn)手法能給大家?guī)硪恍﹩l(fā)和靈感 。
用戶活躍度是檢驗(yàn)產(chǎn)品成功與否的重要指標(biāo)之一,傳統(tǒng)行業(yè)的商家極為重視 門面的裝潢,因?yàn)橐粋€好的門面可以聚集人氣,招攬更多的顧客。古時候的大 戶人家院子門口的石獅子或其他的擺件的擺放極為講究,有一定的風(fēng)水學(xué)說道 理,更能彰顯主人家的身份地位.由此可見,“門面’就如人的臉面 之于人的形象一樣重要,而WEB的登錄頁面就相當(dāng)傳統(tǒng)的“門面”。
優(yōu)雅大方
如果說iPad是介于傳統(tǒng)電腦和手機(jī)之間的產(chǎn)品,那么tumblr則是介于blog和 twitter之間的服務(wù)。相比twitter,它的功能更復(fù)雜、內(nèi)容展示性更強(qiáng)、更加 重視多媒體的應(yīng)用。Tumblr做為輕博客的鼻祖,帶來一種全新的視覺體驗(yàn), 安 東尼·德·圣-??颂K佩里曾說過,“完美就是多一點(diǎn)則太 多,少一點(diǎn)則太少。” Tumblr的登錄頁面沒有過多的視覺干擾,優(yōu)雅大 方,一切元素的存在都是為了用戶更好的登錄,登錄過程非常流暢。
小清新的插圖
在網(wǎng)頁設(shè)計中,插圖非常具有表現(xiàn)力,它與繪畫藝術(shù)關(guān)系密切。所以大部分設(shè) 計職位,對手繪能力出眾者格外青睞,許多表現(xiàn)技法都是借鑒了繪畫藝術(shù)的表 現(xiàn)技法。插畫藝術(shù)與網(wǎng)頁設(shè)計的的結(jié)合,具有獨(dú)特的藝術(shù)魅力,從而更具表現(xiàn) 力。越來越多的設(shè)計師,將插畫運(yùn)用到網(wǎng)頁設(shè)計中來,生動有趣溫情的清新插 圖,能迅速的抓住用戶的眼球,讓登錄界面的更加具有親和力,163郵箱的登錄 頁面就采用了大幅的插圖,小郵差很快喚醒了80后等待來信的記憶,有故事的插 圖與用戶建立情感的聯(lián)系,喚起用戶的心靈共鳴,讓用戶更有歸屬感。
Vimeo是一家提供高清視頻存放服務(wù)的網(wǎng)站,在這里可以找到很多來自世界 各地非常有創(chuàng)意的設(shè)計師。相信登錄過Vimeo的朋友都對Vimeo的登陸頁面記憶 深刻。
精致的質(zhì)感表現(xiàn)
iCloud是蘋果公司所提供的云端同步服務(wù),用戶有5GB的免費(fèi)存儲空間。 負(fù)責(zé) Macintosh用戶界面設(shè)計的柯戴爾·瑞茨拉夫回憶說:“喬布斯會 一個像素一個像素地檢查屏幕上的每個細(xì)節(jié),確保相關(guān)的圖像準(zhǔn)確對齊。他非 常重視細(xì)節(jié),細(xì)致程度居然達(dá)到了像素的層面。如果發(fā)現(xiàn)問題,喬布斯就會立 即沖著某個工程師大吼起來。”iCloud登錄頁面的設(shè)計繼承了蘋果公司對 細(xì)節(jié)的苛求, 細(xì)致的紋理,微妙的陰影,精致的質(zhì)感,完美的細(xì)節(jié),金屬光澤 可以隨著鼠標(biāo)指針移動,底部的圖標(biāo)可以隨著分辨率的大小自適應(yīng),改變排列 方式,確保用戶的瀏覽體驗(yàn)。
iCloud給我們上了很好的一課,有句大家都聽過卻未必做到的話 ——細(xì)節(jié)決定成敗,豐富的細(xì)節(jié)可以提升設(shè)計的價值,也是判斷一 個設(shè)計高下的一條很重要的標(biāo)準(zhǔn)之一,精致舒適的質(zhì)感紋理,給用戶一種沉浸 式,充滿驚喜的登錄體驗(yàn),是一種很棒的表現(xiàn)方式。
人文關(guān)懷的品牌傳達(dá)
設(shè)計以人為本,以人為本的設(shè)計不僅能提高產(chǎn)品的品質(zhì),還能提高設(shè)計的藝術(shù) 水平,而登錄頁面是體現(xiàn)人文關(guān)懷,傳播品牌理念的絕佳位置。
QQ郵箱登陸頁面每一次刷新都能看到不同的內(nèi)容,或用海子的詩,或用邁克爾. 杰克遜的歌詞,喚起用戶的共鳴,設(shè)計手法簡潔,主體信息突出,引導(dǎo)清晰, 并沒有多余的元素,界面中最重要的操作“登錄”按鈕使用了交通 中通行的綠色,而沒有使用常用的藍(lán)色,細(xì)節(jié)設(shè)計非??季?,對每個細(xì)節(jié)都注 入人文的關(guān)懷。
新浪微博將登錄框設(shè)計成一條圍脖的樣式,用戶的每一次登錄都是一次品牌 傳達(dá)的過程,切合新浪力推的圍脖品牌理念,織圍脖的概念深入人心。
簡約而不簡單
WEB設(shè)計的風(fēng)格越來越趨向于簡潔,登錄頁面大量地使用留白可以讓登錄框更加 突出。最大程度的減少用戶分心,從視覺的角度來看,簡約的設(shè)計是平靜的, 砍掉了多余的元素,顏色,形狀和紋理,不能使用讓人眼前一亮的設(shè)計元素, 只能靠空白去做視覺吸引力。布局的權(quán)衡及簡化設(shè)計做的不到位的話很容易變 的單調(diào)乏味,wordpress后臺登陸頁面采用適當(dāng)?shù)耐队埃疑那擅钸\(yùn)用,以及 出錯的抖動提示,讓整個登錄頁面簡約而不簡單.堪稱典范。
越來越大的登錄框
越來越大的輸入框設(shè)計,讓用戶輸入起來感到心情舒暢,登 錄過程非常愉悅,在顯示器越來越大的今天,mailchimp大輸入框顯的霸氣十足 ,并且一反常態(tài)的可以看到自己的密碼,第一次在WEB登錄框里見到這種設(shè)計, 非常貼心.正是這種不拘一格的設(shè)計,讓mailchimp從一個內(nèi)部項(xiàng)目蛻變成一個 該公司最成功的商業(yè)產(chǎn)品。
隨著網(wǎng)頁設(shè)計的流行發(fā)展,以及網(wǎng)速的不斷提高,網(wǎng)頁登錄窗口的設(shè)計獎越來越多樣化 ,將會出現(xiàn)更多具有創(chuàng)意元素的登錄界面和網(wǎng)頁設(shè)計,為青島網(wǎng)站設(shè)計帶來更多的創(chuàng)意風(fēng)格。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2015-04-08 22:16:46] 如何定時任務(wù)備份mysql多個數(shù)據(jù)庫
- [2012-06-09 12:34:52] 網(wǎng)站設(shè)計的風(fēng)格把握
- [2012-12-08 11:05:29] 如何生成eot文件
- [2013-01-05 20:24:34] xml網(wǎng)站地圖與html地圖的區(qū)別
- [2016-09-11 13:47:00] 有趣且相當(dāng)實(shí)用的Photoshop圖層教程
- [2012-02-28 22:46:36] DEDE 首頁 列表頁 按照權(quán)重排序
- [2017-03-01 16:56:38] 織夢cms中解決DedeTag Engine Create File False的方法
- [2014-09-18 01:28:40] fckeditor去掉空格
- [2012-08-23 09:07:58] 如何做友情鏈接
- [2012-10-29 10:46:12] 網(wǎng)頁文字的閱讀體驗(yàn)
- [2013-02-24 16:37:44] dede內(nèi)容頁顯示欄目圖
- [2015-01-08 19:16:42] 百度搜索你了解多少?
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運(yùn)動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
膠南網(wǎng)站建設(shè)公司 新的元素 網(wǎng)站交互設(shè)計 營銷型網(wǎng)站建設(shè) 網(wǎng)站動畫 扁平化設(shè)計 網(wǎng)站設(shè)計 青島高端網(wǎng)站設(shè)計公司哪家好 IT資訊 H5專題頁面 青島網(wǎng)站營銷 青島網(wǎng)站制作 網(wǎng)站策劃 青島網(wǎng)站建設(shè) 高端網(wǎng)站設(shè)計 網(wǎng)站推廣 用戶界面 青島網(wǎng)絡(luò)公司 HTML5 手機(jī)網(wǎng)站建設(shè) 手機(jī)端的網(wǎng)站 網(wǎng)站設(shè)計資訊 青島抖音小程序開發(fā) 網(wǎng)站設(shè)計趨勢 圖形網(wǎng)格 空白和簡潔的設(shè)計 網(wǎng)站視覺 青島網(wǎng)站設(shè)計哪家好 網(wǎng)站建設(shè)的步驟有哪些 企業(yè)網(wǎng)站