建站知識(shí)

網(wǎng)站資訊動(dòng)態(tài),網(wǎng)站建設(shè)知識(shí),網(wǎng)站優(yōu)化SEO,營銷型網(wǎng)站建設(shè),手機(jī)網(wǎng)站建設(shè),搜索引擎營銷,常見問題解答,外貿(mào)網(wǎng)站建設(shè)等相關(guān)知識(shí)與動(dòng)態(tài)。

您當(dāng)前所在位置:首頁 > 建站知識(shí) > 網(wǎng)站建設(shè)知識(shí) > 正文

UI設(shè)計(jì):手機(jī)網(wǎng)站導(dǎo)航頁的設(shè)計(jì)

2017-07-06

很多手機(jī)網(wǎng)站導(dǎo)航頁設(shè)計(jì)十分的精美,讓人情不自禁的繼續(xù)瀏覽下去,它們?cè)谀阄词褂卯a(chǎn)品之前提前告知你產(chǎn)品的主要功能與特點(diǎn),第一次印象的好壞會(huì)極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn)。因此各個(gè)寧夏公司都在努力將這幾個(gè)頁面設(shè)計(jì)好,從一開始就引人入勝。那接下來我跟大家一起來探討關(guān)于引導(dǎo)頁的設(shè)計(jì)。

1、文案言簡意賅,突出核心。

根據(jù)愛爾蘭哲學(xué)家漢密爾頓觀察發(fā)現(xiàn)的7±2效應(yīng),一個(gè)人的短時(shí)記憶至少能回憶出5個(gè)字,最多回憶9個(gè),即7±2個(gè)。因此展示的文案要控制在9個(gè)字以內(nèi),超過后用戶容易遺忘、出現(xiàn)記憶偏差。如果表達(dá)起來困難,可以輔助一小段文字進(jìn)行解釋或補(bǔ)充。因此在最終文案的確定上,要突出重點(diǎn),多余的文字盡可能地進(jìn)行刪減。如果文案刪減后字?jǐn)?shù)還是過多,因考慮對(duì)文字進(jìn)行分層,通過空格或逗號(hào)或換行的方式進(jìn)行視覺優(yōu)化。

精準(zhǔn)貼切的文案也十分重要,將專業(yè)的術(shù)語轉(zhuǎn)換成用戶聽得懂的語言。尤其對(duì)于通過照片來表現(xiàn)主題的引導(dǎo)頁設(shè)計(jì),文案與照片的吻合度,直接影響到情感傳達(dá)的效果。

產(chǎn)品設(shè)計(jì) 引導(dǎo)頁設(shè)計(jì) 用戶體驗(yàn)

2、富于情感化

(1)文案具象化

通過具體的元素、場景來表現(xiàn)文案,采用寫實(shí)、半寫實(shí)的方式進(jìn)行表現(xiàn),有些應(yīng)用還會(huì)配以水彩風(fēng)格。以天貓為例,天貓是一款購物應(yīng)用,在設(shè)計(jì)上通過商場、店鋪的實(shí)際場景的具體描繪,渲染輕松、歡快的購物過程。

(2)頁面動(dòng)效、頁面間交互方式的差異化

之前對(duì)于表現(xiàn)方式的歸類已經(jīng)講到了動(dòng)畫及頁面切換方式,如果增加了頁面動(dòng)效,利用動(dòng)效,包括放大、縮小、平移、滾動(dòng)、彈跳,表現(xiàn)形式更加多樣化,會(huì)讓引導(dǎo)頁更有趣,注意力更為集中。

而頁面間的切換方式除了傳統(tǒng)的卡片左右滑動(dòng)的方式外,可以結(jié)合線條、箭頭等進(jìn)行引導(dǎo),通常會(huì)配合動(dòng)效。例如網(wǎng)易新聞客戶端、印象筆記·食記,它們?cè)谝龑?dǎo)頁的設(shè)計(jì)上采用了線條作為主線貫穿整個(gè)引導(dǎo)頁面,小圓點(diǎn)顯示當(dāng)前的瀏覽進(jìn)度,滑動(dòng)的過程中有滾動(dòng)視差的效果。

3、視覺聚焦

在單個(gè)引導(dǎo)頁中,信息不宜過多,只闡述一個(gè)目的,所有元素都圍繞這個(gè)目的進(jìn)行展開。視覺聚焦包括兩部分,一 是文案的處理,要注意層次,主標(biāo)題與副標(biāo)題要形成對(duì)比;二是引導(dǎo)頁中的界面、場景、文案具象化元素,要有一個(gè)視覺聚焦點(diǎn),多個(gè)視覺元素的排布采用中心擴(kuò)散 的方式,聚焦點(diǎn)的視覺面積最大,同時(shí)與擴(kuò)散的元素拉開對(duì)比。這樣用戶能清晰地看到核心文案信息與文案對(duì)應(yīng)的視覺表現(xiàn)元素。同時(shí)結(jié)合視線流動(dòng)的規(guī)律,從上到 下,從左到右,從大到小。因此可以根據(jù)這個(gè)視線流的規(guī)律來進(jìn)行引導(dǎo)頁的設(shè)計(jì)。

4、與產(chǎn)品、公司基調(diào)相一致

引導(dǎo)頁在視覺風(fēng)格與氛圍的營造上要與該產(chǎn)品、公司形象相一致,這樣在用戶還未使用具體產(chǎn)品前就給產(chǎn)品定下一個(gè)對(duì)應(yīng)的基調(diào)。產(chǎn)品的特性決定了引導(dǎo)頁的風(fēng)格,產(chǎn)品是消費(fèi)類、娛樂類、工具類還是其他,根據(jù)不同的產(chǎn)品特性決定了引導(dǎo)頁是走輕松娛樂、小清新,還是規(guī)整、趣味性的風(fēng)格,在最終的表現(xiàn)形式上也就會(huì)有完全不同的展現(xiàn),是插圖、界面、動(dòng)畫還是其他。如淘寶的娛樂、豆瓣的清新文藝、百度的工具、蟬游記的休閑等等,通過對(duì)比就能發(fā)現(xiàn)他們?cè)谝龑?dǎo)頁設(shè)計(jì)上的差異。

這樣一方面有利于產(chǎn)品一脈相承,與產(chǎn)品使用體驗(yàn)相一致;另一方面也會(huì)進(jìn)一步強(qiáng)化公司形象。

以來往為例,來往是一款針對(duì)個(gè)人用戶的及時(shí)通訊應(yīng)用,主打扎堆、閱后即焚、敲門等與微信不一樣有趣的功能,也是想給用戶創(chuàng)造不一樣的溝通方式。因此在引導(dǎo)頁的設(shè)計(jì)上通過趣味性、甚至有點(diǎn)搞怪的動(dòng)作與表情來表現(xiàn)來往是這樣一款有趣、歡樂多的產(chǎn)品。

總之:想做好引導(dǎo)頁的設(shè)計(jì),在理解用戶對(duì)引導(dǎo)頁需求的基礎(chǔ)上,懷揣熱愛產(chǎn)品的情懷,依靠精致的布局,巧妙的構(gòu)思,貼切的氛圍渲染,再加一點(diǎn)點(diǎn)特色。當(dāng)然光講是枯燥的,還是需要設(shè)計(jì)師在具體的設(shè)計(jì)中不斷實(shí)踐,總結(jié)出新的觀點(diǎn)與方法,探索出別具一格的引導(dǎo)頁設(shè)計(jì)。

以上部分內(nèi)容(文字、圖片)收集于互聯(lián)網(wǎng),版權(quán)歸原作者所有。感謝每一位辛勤著寫的作者,感謝每一位的分享。免責(zé)聲明:如有侵犯您的原創(chuàng)版權(quán)請(qǐng)告知,我們將盡快刪除相關(guān)內(nèi)容,感謝您的理解與支持。
上一篇:寧夏營銷型網(wǎng)站建設(shè)的重點(diǎn)之用戶體驗(yàn) 下一篇:寧夏網(wǎng)站建設(shè)中關(guān)鍵詞應(yīng)該如何合理的設(shè)置

服務(wù)項(xiàng)目查看更多

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站,并請(qǐng)您仔細(xì)閱讀本聲明的所有條款:

1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動(dòng)。

2、本站不承擔(dān)用戶因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時(shí),以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益,請(qǐng)您及時(shí)與我們聯(lián)系,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!

聯(lián)系方式:023-65309616
電子郵件:543874515@qq.com

ENABLE YOUR BRAND
TO BURST INTO EXCELLENCE
中高端定制開發(fā)服務(wù)商
掃一掃,微信咨詢
130-7236-3699 543874515