互聯(lián)網技術的快速發(fā)展,讓人們對網站有著更高的要求。網站建設公司在網站建設的過程中,需要很多的創(chuàng)意,不斷帶給用戶好的網站體驗。在網站設計中,網頁視覺創(chuàng)意是非常重要的。那么,網站設計公司的網站視覺設計要抓住哪些要點呢?
一、視覺的一致性
很多大型的研究院及設計開發(fā)部門都會對產品的視覺交互整理出一套界面交互規(guī)范,以幫助團隊更好地協(xié)同工作。因為產品的一致性設計會極大地改善我們的設計流程,縮短設計周期,有章可循設計起來自然得心應手。
1、與企業(yè)形象一致
網站最終是為企業(yè)品牌服務,所以網頁必須能夠起到承載品牌信息的作用,這樣即便用戶沒有瀏覽過該品牌的網站,看了你的設計后也會聯(lián)想到網站背后的產品品牌。
網頁界面視覺設計需要與企業(yè)VI系統(tǒng)保持一致,主要是VI基礎應用部分的Logo、配色方案、視覺圖形、標準字等。尤其是對于
老牌的產品,網站必須保證線上的效果與線下傳統(tǒng)媒體(如海報、宣傳手冊等)以及店面的視覺風格的一致。日本超人氣玩偶Monchhichi于20世紀70年代就誕生了,其網站(見圖1)就考慮到突出品牌本身可愛的特點,將其產品、店面直接搬上官網內,與傳統(tǒng)紙媒的視覺保持高度一致。
圖1 Monchhichi網
2、頁面及各元素間的共識
無論是主頁還是列表頁或是詳細頁面,盡管層級不一、功能不同,但是要大體上保持不同頁面之間視覺風格的一致。一致性主要體現(xiàn)在3個方面,一是各個視覺元素布局上井然有序,主頁面、子頁面視覺表現(xiàn)上有章可循,如Logo和導航的位置相對固定;二是相同級別板塊內的文字字體、大小、色彩、樣式一致,圖標圖形大小一致、各元素間的比例、間距一致;三是配色方案上自成體系,哪些顏色占用比例大,哪些顏色用于強調等。
如New Blance網(見圖2)中,界面各功能布局相對固定,均為頂部為固定全局導航,導航下方呈單頁的信息內容展示,圖形造型上十分統(tǒng)一,Logo傾斜的矩形形態(tài)反復出現(xiàn)在界面的菜單選中狀態(tài)、搜索框等多個元素造型中,色彩搭配上每個頁面都是使用淺灰作為背景,字體默認顏色使用深灰與黑色,對于需要特別強調的位置使用Logo的紅色。
圖2 New Blance網
二、視覺的創(chuàng)意性
盡管網頁設計需要遵循很多的秩序規(guī)范,但是在某些特定的頁面視覺創(chuàng)意加以新興的計算機手段卻能讓網頁富有自己獨特的藝術風格及特征,增強網頁信息的傳遞性、趣味性。
1、秩序內的創(chuàng)新
秩序內的創(chuàng)新依然遵循網站布局規(guī)范,在某些特定的頁面,在保證功能正常運作的前提下,界面設計表現(xiàn)得靈動、幽默、大膽。
這種特定的頁面主要包括錯誤或不存在的頁面及加載等待頁面。如cloud-tutorial網的錯誤頁面(見圖3),界面中繪制了一個宇航員迷路在太空中求肋,動態(tài)圖片十分生動地反映出你現(xiàn)在處于網站的邊緣地段,此時溫馨地出現(xiàn)了一個搜索框,幫助用戶找到其他感興趣的信息。
圖3 cloud-tutorial網的錯誤頁面
等待頁面上的幽默讓等待更有樂趣。如AcFun網視頻加載頁面(見圖4),每次都會出現(xiàn)一則小笑話,緩解用戶焦急心里。
圖4 AcFun網視頻加載頁面
2、新媒體下的出其不意
隨著CSS3和HTML5技術的成熟,許多驚艷的效果都能應用在網站設計中了,比如視差滾動、故事游戲等。波蘭某動物保護組織網(見圖5)就非常有創(chuàng)意,它選取了十只動物與它的所有者或相關者,將動物的半張臉同相應人的半張臉結合在一起,作為幅頁面的核心內容,折射出滑動鼠標滾軸,實現(xiàn)各自臉部左上右下的切換,而單擊頁面兩側的“+”“一”會展示出他們詳細介紹和心理感受。
圖5 波蘭某動物保護組織網
Colony TV網(見圖6)是為一個美國科幻劇所創(chuàng)建的,當你打開網頁的時候,會被其中的地圖和劇情所吸引,它利用JavaScript技術將網站設計成了一個游戲在不斷完成任務的過程中解鎖成就,了解故事走向,直到欲罷不能。
圖6 Colony TV網
今天的網頁設計分享就到這了,如果您喜歡這篇文章,您可以分享給你的朋友!深圳網站建設-博納網絡編輯整理。