網(wǎng)站制作中的關(guān)鍵事項(xiàng)
日期 : 2019-02-28 15:12:10
互聯(lián)網(wǎng)應(yīng)用和人們的日常工作生活密不可分, 現(xiàn)下的網(wǎng)頁設(shè)計(jì), 在設(shè)計(jì)工作中的比重越來越大, 如何設(shè)計(jì)好一個網(wǎng)頁, 從頁面尺寸設(shè)置, 色彩色調(diào)的調(diào)用, 版面文字設(shè)計(jì)和頁面按鈕設(shè)計(jì)上, 我們需要做足工作, 注意細(xì)節(jié)才能設(shè)計(jì)出一個符合現(xiàn)代審美標(biāo)準(zhǔn)的網(wǎng)頁?;ヂ?lián)網(wǎng)時代下的設(shè)計(jì)日新月異, 相對設(shè)計(jì)學(xué)這門學(xué)科, 網(wǎng)頁的設(shè)計(jì)應(yīng)用占有了一席之地。網(wǎng)站設(shè)計(jì)得好, 是要讓頁面容易被人識別, 便于使用和被搜索, 那么網(wǎng)頁設(shè)計(jì)有何講究, 有什么值得注意的設(shè)計(jì)要素呢?隨著時代發(fā)展, 這將是一個值得我們不斷深入的話題。
網(wǎng)頁的設(shè)計(jì), 首先應(yīng)從尺寸開始。所謂尺寸, 是頁面的高度與寬度, 設(shè)計(jì)者可根據(jù)實(shí)際的使用環(huán)境, 將其分為不同載體。尺寸一般使用分辨率來表示, 一像素單位為px, px值設(shè)置為72px用于電子屏幕顯示, 在印刷品上我們設(shè)置為300px, 配合計(jì)量單位。目前根據(jù)載體的不同, 尺寸也被區(qū)分為了電腦屏幕尺寸, 手機(jī)尺寸等, 列如:電腦屏幕側(cè)重于大面積的展示體驗(yàn), 手機(jī)則是小屏幕的便捷顯示, 由于在小屏幕上觀看大尺寸頁面, 頁面字體會顯得稀小, 所以通常需設(shè)計(jì)兩種尺寸。雖然目前流行的html5簡化了這些操作, 但如果想通用兩種不同尺寸, 也需要留意許多細(xì)節(jié)。
確定設(shè)計(jì)頁面的寬度是較為容易的, 但由于頁面缺少自適應(yīng)能力, 無法根據(jù)屏幕的大小來進(jìn)行縮放, 這樣無法全顯核心區(qū)域的內(nèi)容。根據(jù)市面上一般電腦的寬度, 最小在1200像素左右,文字的區(qū)域被控制在1000到1200px區(qū)間內(nèi), 延伸寬度為大屏幕做準(zhǔn)備。如果無左右延伸區(qū)域, 在大面積的顯示上將會顯示得十分緊湊。關(guān)于頁面高度的設(shè)置, 基于內(nèi)容多或少而定, 通常不應(yīng)超過3屏。頁面過一是不便于瀏覽者觀看, 二是會導(dǎo)致頁面加載緩慢, 影響使用體驗(yàn)。因此高度在3000px內(nèi)更利于瀏覽。
確定設(shè)計(jì)頁面的寬度是較為容易的, 但由于頁面缺少自適應(yīng)能力, 無法根據(jù)屏幕的大小來進(jìn)行縮放, 這樣無法全顯核心區(qū)域的內(nèi)容。根據(jù)市面上一般電腦的寬度, 最小在1200像素左右,文字的區(qū)域被控制在1000到1200px區(qū)間內(nèi), 延伸寬度為大屏幕做準(zhǔn)備。如果無左右延伸區(qū)域, 在大面積的顯示上將會顯示得十分緊湊。關(guān)于頁面高度的設(shè)置, 基于內(nèi)容多或少而定, 通常不應(yīng)超過3屏。頁面過一是不便于瀏覽者觀看, 二是會導(dǎo)致頁面加載緩慢, 影響使用體驗(yàn)。因此高度在3000px內(nèi)更利于瀏覽。
對于設(shè)計(jì)者來說, 色彩是至關(guān)重要的一個環(huán)節(jié), 每個頁面都應(yīng)具有獨(dú)特的風(fēng)格, 風(fēng)格屬于調(diào)性, 做設(shè)計(jì)首先要決定調(diào)性, 這是最關(guān)鍵的第一步。色彩應(yīng)用給人視覺第一官感, 這便是視覺傳達(dá)的“首輪效應(yīng)”, 這種視覺上的沖擊力強(qiáng)弱, 另一層面上看作為指向性體現(xiàn), 主題的體現(xiàn)。在《視覺錘》中的比喻, 語言是釘子, 視覺是錘子, 好的釘子要想打入用戶心中, 就要用視覺的錘子, 通過觀察者的眼睛, 敲進(jìn)心里, [鎖定心智。雖然聽上去尤為激烈, 但在實(shí)際應(yīng)用中卻鑿實(shí)有效。
色彩與色調(diào), 本無好壞, 搭配與協(xié)調(diào)中應(yīng)符合視覺的呈現(xiàn)形式, 符合形式美法則。形式美法則是人類在創(chuàng)造美的過程與形式中總結(jié)的經(jīng)驗(yàn)及抽象概括。包括了對稱均衡、單純齊一、調(diào)和對比及多樣統(tǒng)一。另外, 在三大構(gòu)成中, 平面構(gòu)成、色彩構(gòu)成和立體構(gòu)成, 其中平面構(gòu)成和色彩構(gòu)成也可常運(yùn)用在頁面設(shè)計(jì)中。如何選擇合適的色彩?首先要看所涉及的行業(yè)屬性, 其次看所要求表現(xiàn)的情緒基調(diào), 最后合理搭配, 謹(jǐn)慎選擇配色。設(shè)計(jì)需要符合“科學(xué)法則”及“形式美法則”, 看似雜亂無章的規(guī)劃, 假如觀者覺得上心, 覺得舒適, 那么這個頁面也就符合了“形式美法則”。
關(guān)于配色問題, 不同的行業(yè)也有著一套不同的標(biāo)準(zhǔn), 色彩還要考慮另外兩個指標(biāo), 明度和純度, 也就是明亮度與飽和度。在明度上, 色彩愈加明亮就愈加給人情緒感, 在純度上純度越高, 越刺激情緒。而色相則分為冷暖色, 冷色系和暖色系的區(qū)分,一般用在區(qū)別邊界比較明顯的環(huán)境下, 與網(wǎng)頁的作用屬性相匹配。這些色彩知識, 作為一個設(shè)計(jì)師要爛熟于心, 看似簡單的設(shè)計(jì)用色, 都需美學(xué)原理來支撐。
網(wǎng)頁版面的設(shè)計(jì)必須要有有效的傳達(dá)方法。舉個例子, 人類眼球結(jié)構(gòu)中, 視覺有效部分占有比列非常小, 這促使了人類在一定的時間限定內(nèi)所接受的信息量是非常有限的。我們在閱讀瀏覽的時候, 視覺習(xí)慣上的流動性, 容易被視覺元素影響, 因此在版面設(shè)計(jì)的過程中, 利用這種因素, 可引導(dǎo)用戶進(jìn)行瀏覽網(wǎng)頁上的信息。完善的排版設(shè)計(jì), 要有豐富有條理的特點(diǎn), 布局要有調(diào)理但不失合理性, 采用適當(dāng)?shù)姆绞絹砼帕?使網(wǎng)頁的布局具有突出的協(xié)調(diào)性。對于細(xì)節(jié)的描述和介紹, 這個部分不能過于搶鏡, 處在次要位置屬于合理。
在網(wǎng)頁中的文字主要功能是傳遞各類信息, 并非僅僅是裝飾, 為了提高視覺信息的傳遞效率, 在進(jìn)行網(wǎng)頁文字的設(shè)計(jì)時, 將文字整體的編輯效果加入, 給用戶清晰的視效體驗(yàn),避免網(wǎng)頁中出現(xiàn)雜亂失序的現(xiàn)象, 使用戶在瀏覽是能夠更迅速的接收信息, 感知信息。
說到文字設(shè)計(jì)不得不提字體, 絕大多數(shù)的網(wǎng)頁字體都是系統(tǒng)固有的, 但在一些元素中需要注意字體的“性格”。字體分為襯線體、無襯線體、書法體、以及裝飾體。在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)者使用裝飾體居多, 裝飾體在表現(xiàn)力上的呈現(xiàn)效果最突出, 字體多數(shù)為粗體字。針對這類字體的合并、切割、扭曲等操作, 可以更加容易變現(xiàn)主題信息, 當(dāng)然, 主題信息的剛烈或親和, 就需要通過頁面的策劃和文案來判定了。
色彩與色調(diào), 本無好壞, 搭配與協(xié)調(diào)中應(yīng)符合視覺的呈現(xiàn)形式, 符合形式美法則。形式美法則是人類在創(chuàng)造美的過程與形式中總結(jié)的經(jīng)驗(yàn)及抽象概括。包括了對稱均衡、單純齊一、調(diào)和對比及多樣統(tǒng)一。另外, 在三大構(gòu)成中, 平面構(gòu)成、色彩構(gòu)成和立體構(gòu)成, 其中平面構(gòu)成和色彩構(gòu)成也可常運(yùn)用在頁面設(shè)計(jì)中。如何選擇合適的色彩?首先要看所涉及的行業(yè)屬性, 其次看所要求表現(xiàn)的情緒基調(diào), 最后合理搭配, 謹(jǐn)慎選擇配色。設(shè)計(jì)需要符合“科學(xué)法則”及“形式美法則”, 看似雜亂無章的規(guī)劃, 假如觀者覺得上心, 覺得舒適, 那么這個頁面也就符合了“形式美法則”。
關(guān)于配色問題, 不同的行業(yè)也有著一套不同的標(biāo)準(zhǔn), 色彩還要考慮另外兩個指標(biāo), 明度和純度, 也就是明亮度與飽和度。在明度上, 色彩愈加明亮就愈加給人情緒感, 在純度上純度越高, 越刺激情緒。而色相則分為冷暖色, 冷色系和暖色系的區(qū)分,一般用在區(qū)別邊界比較明顯的環(huán)境下, 與網(wǎng)頁的作用屬性相匹配。這些色彩知識, 作為一個設(shè)計(jì)師要爛熟于心, 看似簡單的設(shè)計(jì)用色, 都需美學(xué)原理來支撐。
網(wǎng)頁版面的設(shè)計(jì)必須要有有效的傳達(dá)方法。舉個例子, 人類眼球結(jié)構(gòu)中, 視覺有效部分占有比列非常小, 這促使了人類在一定的時間限定內(nèi)所接受的信息量是非常有限的。我們在閱讀瀏覽的時候, 視覺習(xí)慣上的流動性, 容易被視覺元素影響, 因此在版面設(shè)計(jì)的過程中, 利用這種因素, 可引導(dǎo)用戶進(jìn)行瀏覽網(wǎng)頁上的信息。完善的排版設(shè)計(jì), 要有豐富有條理的特點(diǎn), 布局要有調(diào)理但不失合理性, 采用適當(dāng)?shù)姆绞絹砼帕?使網(wǎng)頁的布局具有突出的協(xié)調(diào)性。對于細(xì)節(jié)的描述和介紹, 這個部分不能過于搶鏡, 處在次要位置屬于合理。
在網(wǎng)頁中的文字主要功能是傳遞各類信息, 并非僅僅是裝飾, 為了提高視覺信息的傳遞效率, 在進(jìn)行網(wǎng)頁文字的設(shè)計(jì)時, 將文字整體的編輯效果加入, 給用戶清晰的視效體驗(yàn),避免網(wǎng)頁中出現(xiàn)雜亂失序的現(xiàn)象, 使用戶在瀏覽是能夠更迅速的接收信息, 感知信息。
說到文字設(shè)計(jì)不得不提字體, 絕大多數(shù)的網(wǎng)頁字體都是系統(tǒng)固有的, 但在一些元素中需要注意字體的“性格”。字體分為襯線體、無襯線體、書法體、以及裝飾體。在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)者使用裝飾體居多, 裝飾體在表現(xiàn)力上的呈現(xiàn)效果最突出, 字體多數(shù)為粗體字。針對這類字體的合并、切割、扭曲等操作, 可以更加容易變現(xiàn)主題信息, 當(dāng)然, 主題信息的剛烈或親和, 就需要通過頁面的策劃和文案來判定了。