2014年6月3日星期二

網頁設計創新式布局與交互



    設想並構建出區別於常見網站布局的創新式設計是一件很難的事情,但是一旦把這件事做好,就可以設計出那些最富有趣味又令人著迷的網站。

    你幾乎每天都可以見到這些網站,每次看到他們,你都會感慨到:“多希望我當初能夠想到這個點子。”設計師們正在完成一項了不起的工作,設計出一系列精美的網頁元素並將其組合在一起,這些網頁不但具備可用性,同時又富有新鮮感和原創味道。

    奇特的造型、顏色的組合搭配和新穎的導航工具可以設計出那些最富有趣味又令人著迷的網站。這些網站也同樣難以設想和構建。

    但是你永遠不知道什麼可能會引領一場新的趨勢,帶來大量的點擊或者以一種你無法想象的方式“工作“。對於設計師和開發人員而言,在網頁設計中最需要記住的是無論外觀多麼富有吸引力,一定要保證可用性及效率。在設計過程中結合創造性的思考,仔細分析關鍵因素,這樣每天都會產生新奇而吸引人的好點子。

    第一個問題:為什麼?

    勾畫網站草圖時,我們為什麼總是用矩形?為什麼總是用某類特定的顏色或字體?為什麼照片都是同樣完美的4*6的長寬比?

    第二個問題:怎樣與眾不同?

    越來越多的網站通過選擇富有趣味的創新的布局來回答第二個問題,使用帶有圓角的形狀、富有戲劇效果的圖像、可能並不顯眼的顏色,以這種新的方式來進行頁面的導航和滾動設計。

    當我們發展一些新的概念時,打破既有模式的關鍵點在於牢記基本概念。無論網站看起來有多麼酷炫,一定要滿足可讀性和可用性,否則用戶無法瀏覽訪問網站並與內容產生互動。

    設計過程中要時刻思考用戶的行為,想想他們是如何理解和使用網站的。如果你的用戶是超級技術達人,那麼導航或者滾動設計只要有一點點的小問題就會被凸顯出來。但是如果你的用戶是電腦小白,那麼你可能只需要關注最基本的導航工具。

    用戶訪問你的網站是有目的性的。當他們進入網站時,他們想要的一定要表現的足夠突出。確保你的設計可以表達出網站的真正用途-提供信息咨詢、娛樂、商業等等。

    不要嘗試做很多。挑選一個有趣的想法然後做下去,但是不要嘗試同時做很多事情。記住,如果你的網站上有太多的東西的話,用戶不會在上面逗留的。找到一條有趣而獨特的方式與他們溝通互動。

網頁設計新方向,網頁也要大屏



    近年,網頁早已不滿足於寬屏了,已經向著更寬屏,超大屏的方向前進了。而大多數網頁設計師都還記著頁面的內容要在1000寬度左右,不可超越。的的確確這是以前的“審美標准”,在當今的時代,大眾審美觀更新換代,有的東西隨之而變。比如說,當三星推出5.3寸大屏手機的時候,多少人為之而振,而現在滿大街都是6寸大屏手機了。所以,多響應式全屏設計會成為未來的主流,這是必然的趨勢。

    大屏設計,隨之帶來的是兼容問題。在突破局限思維之前,我們要先樹立好較好的態度,寧可多花時間,也要適應潮流。接下來我就來給大家分析一下如何做好一個“大屏”網頁了。

    一.大圖要震撼,要清晰

    大概在二零零八前的設計,背景都是花紋或者是純底色,用現在的話來說叫簡約。不過如果換上了大圖,大圖的清晰度直接地影響到了整個視覺效果,如果大圖不清晰,帶來的震撼視覺也會隨之消失,反之,則會讓人感覺秀色可餐。其次,應該是圖片與內容的協調,盡量不會互相幹擾,但也不要過大的獨立性。在有文字的圖片中,將重疊部分色彩弱化,並將文字加底色等方式突出,整個效果就會非常帶勁。

    二.以中心定位,兩側自適應

    別誤會,中心定位並不是要對稱美。將一些主要的內容放在大屏中間,如果把握不好的話建議可以在1000的尺寸左右即可,兩側追求簡單而實用,但不可太空洞,可以加一些菜單的按鈕或者是很流行的分享按鈕之類的。當然,萬萬不可將核心內容放兩邊,那會被忽視的。相信不少朋友遇到過一個很常用的東西因放在某個角落找半天沒找到的悲慘經曆吧。

    三.全屏響應式,瀑布流走起

    說到瀑布流,很多朋友就比較熟悉了。不過大多數朋友只知道是把網頁切割成非常多個方塊,不知這些方塊的大小比例的分配。至於具體的大小分配,並沒有什麼嚴格的規定,可以在某一側比例為1,而相鄰的為2,以大小不同突出核心內容。瀑布流讓大屏變得很充實,也是比較容易上手的大屏設計。

    硬件都大屏了,設計還不大屏就被淘汰了。至於顏色怎麼分配,這些都要根據具體情況而定。不要怕不好看,努力做,突破局限思維。