創意十足的web布局及互動設計

2021-01-19 站長之家

富有靈感和創意的設計與一般設計的區別在於,它不那麼容易被想到和實現,一旦它被實現,一個非常有趣並且迷人的網站就誕生了。

網站幾乎每天都能見到,但是不是每一個網站你都會說「真希望我也能想到過!」

設計者們正在做的是一項偉大的工作,那就是提出且合併各種高水平設計的網站,這些網站都是最新穎的原創作品,同時還保持了很高的可用性。不規則的顏色、形狀,及其導航就可以生成最有趣、最吸引人的網站。當然,能想到這個點子是很難的,實現起來也有一定的困難。

但是說不準哪天你做的東西能引起一個新的流行趨勢,產生很大的點擊率,或者以你無法想像的一種方式來「工作」。對於設計者和開發者而言,最重要的是要記住web設計無論看起來多麼牛,必須高效可用。通過在設計過程中結合創造性的思維和對關鍵特性的仔細分析,偉大的和最新的網站概念將會不斷的湧現。

跳出固有思維模

第一個問題是「為什麼?」

為什麼我們在製作網站草圖的時候總是畫矩形框?

為什麼「一直」是那幾種特定的顏色或字體?

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

第二個問題是我們怎樣做到不同?

越來越多的網站用興趣和創造性的布局來回答上面第二個問題,從使用圓形到使用吸引人的照片和顏色,似乎沒有起到顯著的作用來創建新的導航和滾動方式。

怎樣對待基本概念?

當形成打破常規的新概念時重要的是記住基本概念。無論一個網站看起來多麼酷,它必須具有可讀性和可用性,否則人們不會前往該網站並進行內容交互。

在設計的階段,要記得不斷思考你的用戶和他們的想法及他們怎麼使用網站。如果是高級用戶的話,那麼在導航和滾動特性上只要存在一點不方便使用的地方,都會使他們印象深刻。但是如果用戶是計算機初學者,你就應該堅持普通的導航工具。

你的訪問者為了一個原因來到你的網站。當他們到達該網站時這個原因需要加強。確保你的設計能提供給用戶所需要的所有準確信息、娛樂、電子商務等等。

不要做的過多!意思是,針對一個有興趣的方向一直做下去,但是不要嘗試太多的東西。記住,如果有太多的東西出現在你的網站上,那麼用戶是不會停留住多久的。找到一個興趣和唯一的方式來和他們互動。

五個站點聚集在一起

那麼什麼使他們聚集在一起?創造性、可讀性和可用性。我們見過一些網站做的東西很新、超乎想像並且非常棒。

lowdi 在做一個偉大的工作,他們用常態之外的形狀來創造視覺上的興趣點。不僅每個盒子都有圓角(或反向圓角),被著色的框架類似於該公司正在出售的產品的形狀。即使你沒有在屏幕上看到Lowdi的盒子,你已經記住了它。隨著滾動,這個盒子(這是一個揚聲器系統)使用一系列彈出的氣泡與你「對話」。這種概念非常有趣、新鮮並超級迷人。

Steve Vorass 利用「隱藏導航」展示了他的各種項目。投資組合類型的網站使用一種在屏幕頂端的簡單的「工作、概要、聯繫」導航,同時圖像也是導航工具。每張不同類型的圖像將帶你到不同的項目。更重要的是,當你的滑鼠懸停在圖片上時,他們會提醒你點擊後將帶你到哪裡。網站的整體設計有一種簡單的外觀和意想不到的像牆一樣的動畫效果。

Caava Design 引人注目的地方在於圖像選擇和有趣的形狀,但是更具有創意的是滾動。整個網站建立在時間軸上。每個圖像「氣泡」帶你到另一個信息級別。使它特別的是你根本不需要看懂時間軸就能導航和明白這個網站。它是一個功能非常強大的組織。

Joint的網站向我們展示了標籤本身就是一個具有創造性的設計業務。每個頁面給你用來導航的可點擊的選擇。這個方案很簡單,僅用灰色和白色(除了友情連結會包括彩色照片)但懸停效果和可讀性是很奇妙的。它會讓你想一直點擊下去來看看到底這個網站是什麼樣子。

Ballantyne 使用很棒的圖片組合、有趣的形狀和非常酷的滾動效果讓你著迷。時裝零售商的網站上展示了一個很棒的產品選擇頁面,同時提供有趣的公司和產品信息。每個滾動 軸通過上下按鈕移動三個圖片面板來顯示新圖片。滾動效果在幾個屏幕間持續,你會不由自主地想看看接下來會發生什麼。另外,酷酷的斜邊使滾動的效果變的更加 無縫和有趣。

結束語:

很多年來,設計師們從來不說「沒有原創的想法。或者我認為那種想法瘋了」。每天,新的技術和新的設備都在改變著我們對web設計和設計流程的想法。我們應該讓頭腦風暴走出你的舒適區,然後再把你所獲得的想法拉回現實,確保它包含所有的特性, 再將這些特性變的更加實用。

記住,一些「瘋狂的」點子可能會失敗,但是這沒關係。分析並學習它,然後進入下一個點子。

via gbtags

來源:創意味兒十足的web布局及互動設計

相關焦點

  • web交互中,如何區分彈窗、抽屜、跳轉新頁面?
    對於B端項目輔助頁面設計, 使用哪種交互方式讓產品頁面更好用?整體交互更統一呢? 筆者將結合項目經驗和相關知識進行整理總結,希望對你有所啟發。對頁面進行歸納分類拿到原型後針對新增、編輯、詳情等頁面進行統攬,做到心中有數,若頁面很多且內容較為複雜,可對頁面布局進行定義,根據事前定義好布局進行設計。例如安防類的產品地圖使用頻次較多,因加載數據時間等問題,根據需求與前端人員討論採用何種方式進行設計既有較好的體驗又可便於開發人員設計布局。3.
  • 轉行web前端,新手需要學習什麼?前景怎麼樣?
    前端工程師在不同的公司工作內容不同,但工作性質大體相似: 1、網站設計與網頁界面開發 2、設計、開發、數據 3、做網站界面開發 4、Web界面開發,前端數據綁定,前臺邏輯
  • 互動設計 | 在互動設計領域裡,如何考研、成為大牛?一篇乾貨貼
    對於想要學習互動設計的同學來說,並非出國學習才是最好的選擇。今天就給大家盤點一下互動設計的知名院校以及想要做互動設計師的你,需要明白的「那些事」什麼是互動設計?交互(inter-action),從字面上理解,就是 A 和 B 之間的一系列動作和行為。
  • 創意十足的漏鬥捐款箱
    創意十足的漏鬥捐款箱 To view this video please enable JavaScript, and consider upgrading to a web
  • 環境互動設計:向布局中注入真實感
    文/Katana編譯今天要向大家介紹一種基於開放世界場地的關卡設計方法。理由!理由!這裡有一種基於現有建築結構生成有趣的布局和設計的方法。在電子遊戲中,我們有一些指標,它可以準確地告訴我們,為了實現環境交互,障礙物到底需要達到多高?我們有最小值和最大值,我們可以以此來理解空間。
  • 交互規範:系統布局讓頁面模塊更統一
    通過定義頁面的模塊布局,讓用戶高效了解產品頁面框架結構的劃分,以及產品在各個平臺的體驗的一致性。本文主要圍繞統一畫板、網頁框架、模塊布局、典型頁面布局四個部分進行闡述,在項目中提前定義好這4部分將有助於協作的設計師輸出頁面模塊高度統一的頁面,希望對正在了解布局知識的你有幫助!
  • 什麼是設計——交互&UI
    二、網際網路產品設計1. 設計流程一般來說網際網路產品的實現主要分為5個階段,以職能劃分為:產品、交互、UI、開發、測試。產品提出需求,交互搭建架構,UI定義風格系統,開發負責實現與落地,完成功能測試後投產上線,而設計(交互/UI)處在產品流程的中間環節。2.
  • 互動設計是什麼?深入分析互動設計專業,附全球互動設計院校推薦
    隨著網際網路時代高速發展,越來越多的交互設備開始進入人們的生活,互動設計師就開始顯得愈發重要。據統計,即使是互動設計專業的應屆畢業生,月薪平均也在1萬以上,有2年以上工作經驗的互動設計師,月薪可達2萬5以上。互動設計儼然成為了設計領域一個炙手可熱的專業。那到底互動設計是什麼?哪些大學的互動設計專業最好?未來的就業前景又如何?
  • 賽事推薦 | 東方創意之星設計大賽
    ,構築展賽盛景,以競賽為平臺,激發藝術教育領域人才培養熱情,促進藝術設計專業人才培養質量,提升從業設計師創意能力和技術水平,為繁榮我國創意設計事業,為我國由製造大國向創造強國轉型做出應有貢獻。戰略合作單位:東方之星包裝印刷業創意設計服務平臺、高地教育廣場、上海劍靈信息科技公司、武漢廣益未來教育科技公司、字魔營。
  • 響應式布局自適應布局 - CSDN
    響應式布局頁面自適應布局自適應網頁設計(Responsive Web Design)指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。很多網站的解決方法,是為不同的設備提供不同的網頁,比如專門提供一個mobile版本,或者iPhone / iPad版本。
  • Web前端是做什麼的?
    自2005年網際網路進入Web2.0時代以來,出現了大量類似桌面軟體的Web應用,網站前端發生了翻天覆地的變化,網頁不再僅僅承載單一的文字和圖片,各種豐富的媒體使網頁內容更加生動,網頁上的軟體交互為用戶提供了更好的使用體驗,這些都是基於前端技術的。web前端的開發涉及廣泛的領域,還有很多需要學習的地方。
  • 北大青鳥整理:一名web前端工程師需要必備哪些技術和工具?
    最近,有小夥伴私信留言讓我總結一下:「一個合格的web前端需要會什麼技術?」我想了半天,合格的web前端當然符合企業的用人要求啊!那麼一名web前端工程師需要必備哪些技術和工具?想要成為一個高薪高職的Web前端工程師並不容易,你不僅需要掌握專業的技能點,還要具備較多的項目經驗。
  • 創意設計學院的「大大們」
    現任東莞理工學院城市學院創意設計學院院長。教學方面:主要承擔《國際貿易》、《國際貿易實務》、《國際金融》、《中國對外貿易概論》、《貨幣銀行學》等課程的授課任務。教學效果優秀,深受學生、同行及領導好評。教育部數字媒體、動畫專業教學指導委員會廣東省專家,廣東省藝術與設計教育協會理事,東莞市工業設計協會副會長,東莞市文創工作坊負責人,東莞市文化產業發展專項資金和文藝精品專項資金評審專家,東莞市優秀非遺工作者,校級重點學科負責人,校級教學團隊負責人,校級研究中心負責人,現任創意設計學院黨總支書記、副院長。
  • 抖音播放主頁互動設計分析
    眾所周知,互動設計是產品經理的必備技能,對一款產品進行互動設計分析,也是產品經理的日常工作之一。那麼對於網際網路產品來說,我們應該如何對其進行互動設計分析?選取的維度,關注的重點又有哪些?下文我以抖音播放主頁為例,說說我的看法。1.
  • 一次帶你看完世界最TOP的互動設計專業學院!
    圖片來自網絡,侵刪作為一個新興專業,互動設計越來越受到相關領域專家以及許多對創意產業感興趣的學生的關注,成為眾多藝術留學生的重要選擇。這個專業最大特點就是創新,需要科技創新、設計創新、創意創新。所以,學習這個專業的學生需要充分發揮自己的想像力,學習多項新興技術,比如虛擬實境和增強現實技術、LED硬體技術、投影技術、全息技術、傳感器技術、觸控螢幕技術等等。
  • 趙景| 從室內設計到互動設計,且把時光,融於夢想
    趙景| 從室內設計到互動設計,且把時光,融於夢想互動設計,沒你想像的神秘趙景,目前在西門子醫療(Siemens Healthineers) 任互動設計師,坐標美國新澤西州普林斯頓。六年前的今天,她坐在鄭州鄭東新區辦公室裡,推開了案頭摞成山的文件,暗下決心:斷舍離,專注自己的設計夢想。六年後的今天,趙景感謝自己當年的這個斷舍離。
  • APP界面中的「圖形創意」!
    文/溫郭英 APP通過屏幕完成功能操作,以滿足用戶各種需求,APP的共性特點,首先是清晰的視覺傳達,具有明確的指代性和識別性;其次是高效率的搜索和瀏覽體驗,通過導航功能促成用戶好感;最後是幫助人機互動組件,組件設計優劣能夠決定應用軟體是否好用。
  • 創意十足圖標設計+實用加倍的原子組件功能,你愛了嗎?
    習慣於安卓手機作業系統的用戶可能對於其方正的布局、中規中矩的圖標樣式、繁雜的信息通知已經習以為常,這也導致各大手機廠商在系統上的創新力度不大,硬體配置在不斷升級,唯獨系統仍沒有多大改觀。#Origin OS#更具個性化的圖標設計,賦予用戶更多創作自由打開新系統OriginOS的界面,最大的改觀就是全新的圖標設計樣式。
  • 「互動設計1...
    ●美術學院信息藝術設計系  付志勇疫情期間,由筆者開設的在線實踐課程「互動設計1」順利結課。該課程主題為基於下一代交互技術的未來智能家居設計。課程從理解人的行為和文化情境出發,通過對人與人、人與產品及環境之間溝通與交流方式的設計,創造出新的生活、工作、學習與娛樂體驗。
  • 遇水溶化禮服太驚豔,卡拉揚大膽設計展現減法時尚,創意十足
    遇水溶化禮服太驚豔,卡拉揚大膽設計展現減法時尚,創意十足"時尚"這個詞的概念隨著流行文化的多樣化、網絡的普及化而不斷延伸,它從具象的服飾到抽象的欲望表現,身處其間的個人都有著自己獨特的理解,是而這份獨特正是構成"時尚"萬花筒的基礎。