2023-11-02 分類: 網(wǎng)站建設(shè)
網(wǎng)站建設(shè)之后有風(fēng)格而沒有內(nèi)容,就好比繡花枕頭一包草,好比一個(gè)性格傲慢但目不識(shí)丁的人。因此首先確保網(wǎng)站建設(shè)后里面的內(nèi)容質(zhì)量和價(jià)值性。這是最基本的,毋庸置疑。
手機(jī)站設(shè)計(jì)與電腦版網(wǎng)站設(shè)計(jì)有很大不同,其實(shí)不是,手機(jī)站設(shè)計(jì)除了小且可以觸摸外,很多設(shè)計(jì)原則與電腦網(wǎng)頁設(shè)計(jì)是共通的。這里有 5 個(gè)基本的元素,希望對(duì)設(shè)計(jì)師有所幫助。1. 手機(jī)站設(shè)計(jì)要有意義的導(dǎo)航
在移動(dòng)設(shè)備上獲取信息實(shí)際上是有趣的體驗(yàn),因此,令用戶在使用過程中感到愉快很有必要,簡(jiǎn)單地刪除屏幕上的鏈接(或taps)并不能達(dá)到用戶友好體驗(yàn)的目的。導(dǎo)航應(yīng)該包含用戶需要的內(nèi)容,并提供明確的路徑。如果用戶知道跳轉(zhuǎn)的具體頁面,就會(huì)進(jìn)行點(diǎn)擊。
首先,確保導(dǎo)航在用戶看來是“可點(diǎn)擊”的,比如按鈕、列表、箭頭等等,這些小圖標(biāo)可以在一定程度上幫助用戶明白下一步的操作。在沒有鼠標(biāo)懸停效果和tags的幫助下,要盡可能多地對(duì)用戶進(jìn)行引導(dǎo)。
標(biāo)簽是很重要的,用好它可以更好地引導(dǎo)用戶。標(biāo)簽應(yīng)保持簡(jiǎn)單且有意義,例如有一個(gè)鏈接需要好幾個(gè)taps,你不用把返回鍵命名為前一頁的標(biāo)題,只需用“back”代替就行了。此外,避免使用作用不清的按鈕或標(biāo)簽,這些都是丟失用戶的潛在陷阱。但是簡(jiǎn)潔并不意味著簡(jiǎn)單,因此與其把“My profile”或“passwords” 隱藏在“設(shè)置”里,不如為它們?cè)黾宇~外的一兩個(gè)導(dǎo)航按鈕。
圖標(biāo)是一個(gè)簡(jiǎn)單卻強(qiáng)大的溝通途徑,不僅僅是因?yàn)槭謾C(jī)閱讀文字比較困難且耗時(shí),還因?yàn)槭褂脠D標(biāo)可以達(dá)到更好的視覺平衡。在手機(jī)網(wǎng)頁中恰當(dāng)?shù)厥褂脠D標(biāo),可以提高用戶的整體體驗(yàn)。另外,與標(biāo)簽相結(jié)合的圖標(biāo)對(duì)用戶來說意味著更明確的導(dǎo)航路徑。
2.手機(jī)站設(shè)重在內(nèi)容的排版
簡(jiǎn)單地對(duì)內(nèi)容進(jìn)行刪除操作并不會(huì)令頁面更簡(jiǎn)潔,而且這些被刪除的內(nèi)容說不定正是用戶所需要的,因此對(duì)內(nèi)容的排版設(shè)置多花點(diǎn)兒時(shí)間是很有必要的。
不要簡(jiǎn)單地刪除你認(rèn)為“不重要”的內(nèi)容,應(yīng)該重新調(diào)整這些內(nèi)容的布局。為了易于用戶閱讀,要盡量避免使用大量的文字,將這些文本重新調(diào)整為小圖標(biāo)或小條目是不錯(cuò)的做法。此外,用引語、線條或其他設(shè)計(jì)元素隔開大段的文字,使這些板塊顯得更美觀。
使用視覺元素來完善文本元素:
標(biāo)題同時(shí)使用文字和圖標(biāo)。
使用圖形元素日期代替文字日期。
使用小信息圖標(biāo)來加強(qiáng)解釋的部分。
除了字體的大小變化,使用不同的文章/標(biāo)題顏色。
使用不同的淺背景色來區(qū)別不同的內(nèi)容。
使用高亮來強(qiáng)調(diào)重要部分。
使用padding和negative space來突出文本或區(qū)分文本。
使用不同的“視圖”,將內(nèi)容分解成較小的部分。
從用戶角度來說,他們希望閱讀所有的內(nèi)容,所以我們進(jìn)行內(nèi)容呈現(xiàn),只是用隔斷、重組或其他視覺方案來讓這些內(nèi)容更容易訪問。
3.手機(jī)站設(shè)計(jì)要有信息反饋
信息反饋是設(shè)計(jì)中很關(guān)鍵的一個(gè)部分,特別是手機(jī)網(wǎng)頁,用戶反饋顯得尤為重要。
移動(dòng)設(shè)備不存在鼠標(biāo)懸停和動(dòng)畫,而且大多數(shù)設(shè)備都是在被觸摸時(shí)才有所顯示,所以及時(shí)提供清晰的操作反饋信息是非常重要的。在現(xiàn)實(shí)生活中,當(dāng)我使用ATM機(jī)時(shí),操作反饋信息包含聽覺(按鍵聲)、觸覺(按鈕的金屬冰涼感)等方面,但在移動(dòng)設(shè)備上,我們只有一個(gè)選擇——視覺反饋。
使用視覺反饋機(jī)制來與用戶交流:
用色彩來突出已選擇的區(qū)域。
當(dāng)用戶切換時(shí)使用淡入淡出動(dòng)畫。
使用邊框顏色和漸變來表示按鈕觸摸狀態(tài)。
使用不同的按鈕或文本顏色來顯示狀態(tài)的變化。
當(dāng)選擇下拉菜單時(shí),使用正在轉(zhuǎn)向/已經(jīng)轉(zhuǎn)向箭頭。
在視圖之間使用滑動(dòng)或漸變動(dòng)畫以顯示區(qū)域的改變。
4.手機(jī)站設(shè)計(jì)要清晰的品牌
每個(gè)公司或應(yīng)用都有不同風(fēng)格的品牌元素,塑造品牌的關(guān)鍵是設(shè)計(jì)元素比如logo、字體和顏色等等要能代表該品牌。對(duì)于手機(jī)網(wǎng)頁設(shè)計(jì)來說,這一點(diǎn)至關(guān)重要。Logo的位置可能與電腦版本有所不同,甚至可能只在Web應(yīng)用的主視圖呈現(xiàn),所以配色方案很重要。
另一個(gè)要注意的點(diǎn)是,手機(jī)網(wǎng)頁的頂部沒有標(biāo)題欄或地址欄,相應(yīng)地,也就沒有網(wǎng)站標(biāo)題和圖標(biāo)。所以你的設(shè)計(jì)應(yīng)該讓用戶知道,他們現(xiàn)在所瀏覽的網(wǎng)站名稱,這對(duì)塑造品牌也很重要。
5.手機(jī)站設(shè)計(jì)要留白
雖然屏幕的尺寸變小了,空白卻依然不可少,因?yàn)榱舭资撬袃?yōu)秀設(shè)計(jì)的關(guān)鍵。在手機(jī)網(wǎng)頁設(shè)計(jì)中,由于空間限制,為了讓設(shè)計(jì)更加有效、可用、可讀,所有元素(按鈕、導(dǎo)航、圖標(biāo)、文本等)需要有序正確地排列。
這并不是要你刪減內(nèi)容以達(dá)到留白的目的,也不是指用大字體以便用戶閱讀。手機(jī)網(wǎng)頁設(shè)計(jì)需要比電腦網(wǎng)頁設(shè)計(jì)更多的UI規(guī)劃,而留白的規(guī)劃更是起著重要的作用。
留白,以創(chuàng)造更好的用戶體驗(yàn):
用較小的字體,這樣文本周圍有空白部分,不會(huì)像用大字體那樣顯得臃腫。
在所有的方塊元素周圍使用大量的padding來構(gòu)建文本塊或圖標(biāo)。
元素和元素之間用大量清晰的白色網(wǎng)格進(jìn)行區(qū)分。
圍繞整個(gè)視圖使用大量的padding把所有元素包圍起來,以免元素溢出到無法操作的區(qū)域。
網(wǎng)站標(biāo)題:手機(jī)站設(shè)計(jì)原則:移動(dòng)網(wǎng)頁中的基礎(chǔ)元素
URL分享:http://m.rwnh.cn/news17/292117.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、網(wǎng)站收錄、動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站、網(wǎng)站排名、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容