新聞觀點資訊

探知 • 創造美好

不(bù)斷超越客戶的(de)期望值,源自我們對這(zhè)個(gè)行業的(de)熱愛

設計完美好用網頁需注意問題

來(lái)源:https://www.bb620.com| 2017-05-23 01:16:30

網頁是(shì)構成網站的(de)基本元素,是(shì)承載各種網站應用的(de)平台。通俗地(dì / de)說(shuō),您的(de)網站就(jiù)是(shì)由網頁組成的(de),如果您隻有域名和(hé / huò)虛拟主機而(ér)沒有制作任何網頁的(de)話,您的(de)客戶仍舊無法訪問您的(de)網站。
網頁是(shì)一(yī / yì /yí)個(gè)包含HTML标簽的(de)純文本文件,它可以(yǐ)存放在(zài)世界某個(gè)角落的(de)某一(yī / yì /yí)台計算機中,是(shì)萬維網中的(de)一(yī / yì /yí)“頁”,是(shì)超文本标記語言格式(标準通用标記語言的(de)一(yī / yì /yí)個(gè)應用,文件擴展名爲(wéi / wèi).html或.htm)。網頁通常用圖像檔來(lái)提供圖畫。網頁要(yào / yāo)通過網頁浏覽器來(lái)閱讀。東莞網站建設

編者按:極簡主義的(de)流行讓越來(lái)越多的(de)網頁設計師開始着迷簡單、簡約的(de)網頁設計,CARRIE COUSINS 的(de)這(zhè)篇文章就(jiù)幫你搞定這(zhè)個(gè)問題~

坦率的(de)講,在(zài)網頁設計這(zhè)件事情上(shàng),簡單的(de)設計往往更好。一(yī / yì /yí)個(gè)簡單易用的(de)界面更容易爲(wéi / wèi)用戶所掌握,也(yě)更容易将一(yī / yì /yí)個(gè)新用戶轉化爲(wéi / wèi)一(yī / yì /yí)個(gè)活躍用戶。

面對龐雜的(de)需求,許多設計師總會身不(bù)由己地(dì / de)向着複雜的(de)方向來(lái)設計網頁,那麽到(dào)底要(yào / yāo)如何将一(yī / yì /yí)個(gè)已經比較複雜的(de)網站簡化下來(lái)呢?其實思路并不(bù)複雜,訣竅在(zài)于(yú)根據用戶目标,重新審視整個(gè)路徑,将妨礙用戶達成目标的(de)障礙都清除掉。

而(ér)今天我們要(yào / yāo)聊的(de) 10 個(gè)簡化技巧都是(shì)圍繞着這(zhè)個(gè)思路來(lái)推進的(de)。無論你是(shì)正在(zài)設計一(yī / yì /yí)個(gè)全新的(de)網站,還是(shì)針對現有的(de)網站進行簡化,這(zhè) 10 個(gè)簡化技巧都非常值得嘗試。

1、專注于(yú)做行爲(wéi / wèi)召喚設計

網站上(shàng)的(de)每一(yī / yì /yí)處設計都應該是(shì)有目的(de)的(de),都相應地(dì / de)迎合用戶的(de)某個(gè)行爲(wéi / wèi)或者需求,這(zhè)是(shì)顯而(ér)易見的(de)。

這(zhè)也(yě)爲(wéi / wèi)行爲(wéi / wèi)召喚的(de)設計提供了(le/liǎo)依據。引導用戶的(de)文案、按鈕和(hé / huò)鏈接都應該清晰、明顯,永遠不(bù)要(yào / yāo)讓用戶錯過。東莞網站制作

2、簡化分頁

你所設計的(de)頁面是(shì)否需要(yào / yāo)分很多不(bù)同的(de)頁面?這(zhè)些頁面有沒有分割的(de)必要(yào / yāo)呢?你可以(yǐ)重新思考這(zhè)個(gè)問題了(le/liǎo)。

将多頁面的(de)内容簡化爲(wéi / wèi)可管理的(de)區塊,不(bù)要(yào / yāo)讓用戶爲(wéi / wèi)了(le/liǎo)查看内容而(ér)多點擊,将相關的(de)内容保存到(dào)一(yī / yì /yí)起,方便用戶集中閱讀和(hé / huò)查看。

删除過期的(de)、過時(shí)的(de)内容和(hé / huò)信息、小插件和(hé / huò)第三方的(de)信息都合并到(dào)相應的(de)區塊當中,不(bù)要(yào / yāo)零散的(de)放置。

3、統一(yī / yì /yí)配色方案

雖然很多色彩确實很有吸引力,但是(shì)它們也(yě)很容易喧賓奪主。堅持将配色方案控制在(zài)兩到(dào)三個(gè)色彩,這(zhè)樣能讓你盡可能好的(de)控制整個(gè)設計的(de)配色。

如果你想讓你的(de)配色盡可能簡單,那麽你可以(yǐ)采用單色配色,你會發現這(zhè)種簡單的(de)色調搭配是(shì)如此的(de)漂亮,較少的(de)色彩對于(yú)用戶的(de)心理負荷更小,尤其是(shì)當你的(de)整個(gè)視覺設計足夠和(hé / huò)諧的(de)時(shí)候。

4、采用标準的(de)導航設計東莞網站開發

雖然隐藏式的(de)導航看起來(lái)很酷,而(ér)非常規的(de)創意導航也(yě)非常的(de)贊,但是(shì)這(zhè)些導航模式對于(yú)用戶并不(bù)是(shì)那麽友好。偏離常規的(de)設計雖然容易讓人(rén)記住,但是(shì)在(zài)使用體驗上(shàng),常常相對更加困難。選擇标準模式的(de)導航,能夠讓你的(de)網站更加易用。

最常規的(de)導航模式,是(shì)将導航欄置于(yú)頁面頂端,通常是(shì) 3 到(dào) 8 個(gè)不(bù)同的(de)選項,當然,不(bù)要(yào / yāo)選擇 10 年前流行的(de)複雜、全面的(de)大(dà)型導航菜單,除非你是(shì)京東淘寶這(zhè)樣的(de)大(dà)型零售電商。

5、采用80/ 20 原則

請記住,你的(de)網站中20%的(de)内容将會觸發用戶80%的(de)操作,這(zhè)意味着你的(de)内容應當有輕重緩急之(zhī)分,行爲(wéi / wèi)召喚用語和(hé / huò)行爲(wéi / wèi)召喚按鈕等界面元素将是(shì)引導用戶交互的(de)重要(yào / yāo)組成部分。

考慮到(dào)這(zhè)一(yī / yì /yí)點,在(zài)你進行設計的(de)時(shí)候,應該将設計的(de)重心放在(zài)這(zhè)20%的(de)内容上(shàng),而(ér)剩下的(de)80%的(de)内容則根據需求進行調整。這(zhè)20%的(de)元素通常都是(shì)最吸引用戶點擊的(de)那部分内容:按鈕、圖片和(hé / huò)行爲(wéi / wèi)召喚文本。

如果你覺得20/ 80 原則聽起來(lái)很熟悉,那麽你可能是(shì)在(zài)别的(de)地(dì / de)方曾經聽到(dào)過它,它是(shì)經濟學家 Vilfredo Pareto 所提出(chū),幾乎在(zài)所有領域都适用,它也(yě)被稱爲(wéi / wèi)Pareto原則,或者重要(yào / yāo)少數法則。

6、有目的(de)地(dì / de)使用UI元素

圖标、圖片等每一(yī / yì /yí)個(gè)UI元素在(zài)整個(gè)設計中都有其作用,有些元素的(de)使用是(shì)有約定俗成的(de)規則,不(bù)要(yào / yāo)因爲(wéi / wèi)某些元素看起來(lái)酷,或者單純“爲(wéi / wèi)了(le/liǎo)有”而(ér)加上(shàng),最好通盤考慮,在(zài)合适的(de)地(dì / de)方,合理地(dì / de)使用UI元素。

7、仔細挑選字體

字體和(hé / huò)排版同樣遵循少即是(shì)多的(de)原則。

最容易閱讀的(de)字體,通常都有着标準的(de)外觀造型,均勻的(de)筆觸,樸實無華而(ér)無需多餘的(de)裝飾。一(yī / yì /yí)套完整的(de)字體通常有着多樣的(de)字重和(hé / huò)可選的(de)樣式,不(bù)需要(yào / yāo)你再去尋找其他(tā)的(de)字體來(lái)搭配。而(ér)在(zài)排版的(de)問題上(shàng),文本需要(yào / yāo)同背景有着充分的(de)對比,

在(zài)設計網頁的(de)時(shí)候,通常會用到(dào)兩套字體,一(yī / yì /yí)套應用到(dào)正文上(shàng),另外一(yī / yì /yí)套字體則用到(dào)标題上(shàng),用作展示。

8、增大(dà)文本尺寸

在(zài)進行排版設計的(de)時(shí)候,你需要(yào / yāo)在(zài)合适的(de)時(shí)候增加文本尺寸。随着我們日常看到(dào)的(de)屏幕尺寸的(de)增加,我們需要(yào / yāo)讓用戶看到(dào)我們所提供的(de)信息,并不(bù)是(shì)堆砌更多的(de)内容,而(ér)是(shì)要(yào / yāo)合理的(de)增加文本的(de)尺寸。

雖然在(zài)移動端設計上(shàng)這(zhè)種需求并不(bù)明顯,但是(shì)根據實際情況,适當的(de)提升字體尺寸能讓文本的(de)易讀性有明顯的(de)提升。當然,置于(yú)首屏的(de)關鍵詞要(yào / yāo)明顯,吸引用戶滾動,而(ér)不(bù)是(shì)将所有的(de)内容都堆在(zài)首屏。

9、創建易讀的(de)文案

排版能夠從視覺上(shàng)控制内容的(de)複雜度,而(ér)文字則能夠控制在(zài)信息傳達上(shàng)的(de)複雜度。兩者其實是(shì)同等重要(yào / yāo)。每個(gè)詞彙都應該和(hé / huò)視覺保持意義和(hé / huò)信息上(shàng)的(de)一(yī / yì /yí)緻性。

文案和(hé / huò)視覺一(yī / yì /yí)樣,都需要(yào / yāo)反複推敲。

網站是(shì)可傳達、可閱讀的(de)媒介,因此文案和(hé / huò)内容都應當幹淨、簡介,且高度可讀。你可以(yǐ)根據網站的(de)風格,使用符合相應調性的(de)文案。

構成
文字與圖片是(shì)構成一(yī / yì /yí)個(gè)網頁的(de)兩個(gè)最基本的(de)元素。你可以(yǐ)簡單地(dì / de)理解爲(wéi / wèi):文字,就(jiù)是(shì)網頁的(de)内容。圖片,就(jiù)是(shì)網頁的(de)美觀。除此之(zhī)外,網頁的(de)元素還包括動畫、音樂、程序等等。
在(zài)網頁上(shàng)點擊鼠标右鍵,選擇菜單中的(de) “查看源文件” ,就(jiù)可以(yǐ)通過記事本看到(dào)網頁的(de)實際内容。可以(yǐ)看到(dào)網頁實際上(shàng)隻是(shì)一(yī / yì /yí)個(gè)純文本文件。它通過各式各樣的(de)标記對頁面上(shàng)的(de)文字、圖片、表格、聲音等元素進行描述(例如字體、顔色、大(dà)小),而(ér)浏覽器則對這(zhè)些标記進行解釋并生成頁面,于(yú)是(shì)就(jiù)得到(dào)你現在(zài)所看到(dào)的(de)畫面。 爲(wéi / wèi)什麽在(zài)源文件看不(bù)到(dào)任何圖片? 網頁文件中存放的(de)隻是(shì)圖片的(de)鏈接位置,而(ér)圖片文件與網頁文件是(shì)互相獨立存放的(de),甚至可以(yǐ)不(bù)在(zài)同一(yī / yì /yí)台計算機上(shàng)。


設計完美好用網頁需注意問題由東莞網站設計編輯 /news/695.html如需轉載請注明出(chū)處

東莞網站改版 東莞網站開發 東莞響應式網站 東莞微信小程序商城 東莞網站優化 東莞做網站公司 東莞小程序開發 東莞小程序制作 企業網站建設 汕尾網站建設 中山網站建設 個(gè)人(rén)網站建設 佛山網站建設 河源網站建設 梅州網站建設 深圳網站建設 惠州網站建設 陽江網站建設 SEO外包 網站托管 關鍵詞優化

多一(yī / yì /yí)份參考,總有益處