web布局及交互設計的常見(jiàn)問(wèn)題


第一個(gè)問(wèn)題是“為什么?”

為什么我們在制作網(wǎng)站草圖的時(shí)候總是畫(huà)矩形框?

為什么“一直”是那幾種特定的顏色或字體?

為什么所用的照片都是完美的4×6屏幕高寬比?

第二個(gè)問(wèn)題是我們怎樣做到不同?

越來(lái)越多的網(wǎng)站用興趣和創(chuàng )造性的布局來(lái)回答上面第二個(gè)問(wèn)題，從使用圓形到使用吸引人的照片和顏色，似乎沒(méi)有起到顯著(zhù)的作用來(lái)創(chuàng )建新的導航和滾動(dòng)方式。

怎樣對待基本概念?

當形成打破常規的新概念時(shí)重要的是記住基本概念。無(wú)論一個(gè)網(wǎng)站看起來(lái)多么酷，它必須具有可讀性和可用性，否則人們不會(huì )前往該網(wǎng)站并進(jìn)行內容交互。

在設計的階段，要記得不斷思考你的用戶(hù)和他們的想法及他們怎么使用網(wǎng)站。如果是高級用戶(hù)的話(huà)，那么在導航和滾動(dòng)特性上只要存在一點(diǎn)不方便使用的地方，都會(huì )使他們印象深刻。但是如果用戶(hù)是計算機初學(xué)者，你就應該堅持普通的導航工具。

你的訪(fǎng)問(wèn)者為了一個(gè)原因來(lái)到你的網(wǎng)站。當他們到達該網(wǎng)站時(shí)這個(gè)原因需要加強。確保你的設計能提供給用戶(hù)所需要的所有準確信息、娛樂(lè )、電子商務(wù)等等。

不要做的過(guò)多!意思是，針對一個(gè)有興趣的方向一直做下去，但是不要嘗試太多的東西。記住，如果有太多的東西出現在你的網(wǎng)站上，那么用戶(hù)是不會(huì )停留住多久的。找到一個(gè)興趣和唯一的方式來(lái)和他們互動(dòng)。

五個(gè)站點(diǎn)聚集在一起

那么什么使他們聚集在一起?創(chuàng )造性、可讀性和可用性。我們見(jiàn)過(guò)一些網(wǎng)站做的東西很新、超乎想象并且非常棒。
創(chuàng )意味兒十足的web布局及交互設計
創(chuàng )意味兒十足的web布局及交互設計

lowdi 在做一個(gè)偉大的工作，他們用常態(tài)之外的形狀來(lái)創(chuàng )造視覺(jué)上的興趣點(diǎn)。不僅每個(gè)盒子都有圓角(或反向圓角)，被著(zhù)色的框架類(lèi)似于該公司正在出售的產(chǎn)品的形狀。即使你沒(méi)有在屏幕上看到Lowdi的盒子,你已經(jīng)記住了它。隨著(zhù)滾動(dòng)，這個(gè)盒子(這是一個(gè)揚聲器系統)使用一系列彈出的氣泡與你“對話(huà)”。這種概念非常有趣、新鮮并超級迷人。
創(chuàng )意味兒十足的web布局及交互設計
創(chuàng )意味兒十足的web布局及交互設計

Steve Vorass 利用“隱藏導航”展示了他的各種項目。投資組合類(lèi)型的網(wǎng)站使用一種在屏幕頂端的簡(jiǎn)單的“工作、概要、聯(lián)系”導航，同時(shí)圖像也是導航工具。每張不同類(lèi)型的圖像將帶你到不同的項目。更重要的是,當你的鼠標懸停在圖片上時(shí)，他們會(huì )提醒你點(diǎn)擊后將帶你到哪里。網(wǎng)站的整體設計有一種簡(jiǎn)單的外觀(guān)和意想不到的像墻一樣的動(dòng)畫(huà)效果。
創(chuàng )意味兒十足的web布局及交互設計
創(chuàng )意味兒十足的web布局及交互設計

Caava Design 引人注目的地方在于圖像選擇和有趣的形狀,但是更具有創(chuàng )意的是滾動(dòng)。整個(gè)網(wǎng)站建立在時(shí)間軸上。每個(gè)圖像“氣泡”帶你到另一個(gè)信息級別。使它特別的是你根本不需要看懂時(shí)間軸就能導航和明白這個(gè)網(wǎng)站。它是一個(gè)功能非常強大的組織。
創(chuàng )意味兒十足的web布局及交互設計
創(chuàng )意味兒十足的web布局及交互設計

Joint的網(wǎng)站向我們展示了標簽本身就是一個(gè)具有創(chuàng )造性的設計業(yè)務(wù)。每個(gè)頁(yè)面給你用來(lái)導航的可點(diǎn)擊的選擇。這個(gè)方案很簡(jiǎn)單，僅用灰色和白色(除了友情鏈接會(huì )包括彩色照片)但懸停效果和可讀性是很奇妙的。它會(huì )讓你想一直點(diǎn)擊下去來(lái)看看到底這個(gè)網(wǎng)站是什么樣子。
創(chuàng )意味兒十足的web布局及交互設計
創(chuàng )意味兒十足的web布局及交互設計

Ballantyne 使用很棒的圖片組合、有趣的形狀和非?？岬臐L動(dòng)效果讓你著(zhù)迷。時(shí)裝零售商的網(wǎng)站上展示了一個(gè)很棒的產(chǎn)品選擇頁(yè)面,同時(shí)提供有趣的公司和產(chǎn)品信息。每個(gè)滾動(dòng) 軸通過(guò)上下按鈕移動(dòng)三個(gè)圖片面板來(lái)顯示新圖片。滾動(dòng)效果在幾個(gè)屏幕間持續，你會(huì )不由自主地想看看接下來(lái)會(huì )發(fā)生什么。另外,酷酷的斜邊使滾動(dòng)的效果變的更加 無(wú)縫和有趣。

結束語(yǔ)：

很多年來(lái)，設計師們從來(lái)不說(shuō)“沒(méi)有原創(chuàng )的想法?；蛘呶艺J為那種想法瘋了”。每天，新的技術(shù)和新的設備都在改變著(zhù)我們對web設計和設計流程的想法。我們應該讓頭腦風(fēng)暴走出你的舒適區,然后再把你所獲得的想法拉回現實(shí)，確保它包含所有的特性, 再將這些特性變的更加實(shí)用。

記住，一些“瘋狂的”點(diǎn)子可能會(huì )失敗，但是這沒(méi)關(guān)系。分析并學(xué)習它，然后進(jìn)入下一個(gè)點(diǎn)子。


重慶網(wǎng)絡(luò )公司