您現在的位置是:電腦技術吧?>? 故障問題 ??>??視覺交互設計,視覺交互設計師??>??正文詳情

視覺交互設計,視覺交互設計師

零秀雋2019-11-20 10:01:46 人圍觀
簡介ui設計和交互設計的區別有人說,有工程背景的交互設計師和有視覺背景的交互設計師的一個區別是,前者的設計東西不會有足夠的美,這是非常低的。盡管邏輯體系結構,特別是大型管

有人說,工科背景出身的交互設計師跟視覺出身的交互設計是的區別之一是,前者設計的東西會不夠有美感,也就是很Low。

雖然邏輯架構,特別是做大型管理系統的時候,可以很快把信息和功能模塊歸類,但是視覺知識和審美積淀,對我們這種工科生來說, 卻是天生的Bug。

  那么,當交互設計師在一個項目中需要承擔起視覺設計的工作的時候,該怎么辦呢?視覺設計的思維不像開發知識,或者版面設計中那些對齊理論一樣,惡補幾天就可以用得上。

這段時間在4樓一個項目支援,做一個網站首頁,交互兼視覺。

對于新肉來說,還算有點挑戰。

  然而,如何在短時間內,做出一個像樣的視覺作品呢?就拿我最近做的一個項目首頁為例子,班門弄斧一下。

  一、界面背景  頁面設計,我一般首先會先從背景開始,下面有幾個簡單粗暴又好用的套路可以參考。

  1.1 大圖  最簡單粗暴的做法是大圖配大字,比如下圖a。

這種背景一般會給人「精致」、「逼格」的印象。

一般可以直接用小景深微距的照片,也就是圖片大部分都是模糊的。

另一種可以直接在任意大圖上面加一層透明遮罩。

  然后大字方面,很多人說大圖配大字,要英文字比較好看,中文的表現就很一般。

其實不是的。

類似Helvetica和微軟雅黑這種系統字體,表現力確實比較一般,但是大家可以試試無襯線字 圓角類型的字體,比如圓體,效果還是不錯的,見圖b。

關于圖片的來源可以去www.unsplash.com(有梯子加載會快一點),里面優質的圖片都可以免費商用。

  △ 圖a

  △ 圖b 阿里云持續交付平臺  1.2 白色 品牌色  上面說的大圖 大字這個套路這么好用,而且還顯得比較雅致,那不如整個頁面幾屏都用這種模式好了?當然也會有些網站是這樣做的,但是里面有個問題是,用戶在瀏覽的過程中可能會審美疲勞,而且頁面結構略顯單調。

那么,這里就可以在大圖與大圖之間,用「白色 品牌色」這樣的背景來增加頁面的多樣性。

比如下圖c 和圖d(兩個不同的網站)。

  △ 圖c

  △ 圖d  1.3 純色背景  用純色做背景,也是目前比較多見的一種方式。

比如一個首頁有4~5屏,每一屏都用一個純色做背景,這種模式就更加簡單了。

  △ Tumblr  但是這里值得注意的一點就是,由于是一整個大色塊作為背景,人的視野都被一個顏色覆蓋,所以明暗度要調整好,太亮或太暗都不好。

具體配色,可以去 https://color.adobe.com 挑選。

  二、頁面裝飾元素  背景作為一個地基打好之后,接著就是往頁面堆元素了。

一般包括文案和其它元素。

其它元素包括icon、色塊、線條、圖片等設計元素,一是幫助用戶更好地理解文字內容,二來增強視覺表現力。

  2.1 icon  增加視覺表現力,當然是少不了icon。

所以下次當你一籌莫展的時候,可以試試用icon把信息分條、分塊展示,比如下圖e

  △ 圖e  2.2 顏色色塊  跟上面說的icon其實差不多,但是可以用地更靈活一些。

比如下圖f 用不同顏色進行分類,圖g 用來突出Title。

  △ 圖f

  △ 圖g  2.3 線條  線條最常用的場景是分離兩個信息塊。

但是除此之外,還可以這樣用哦!  1. 起到聯系信息塊的作用

  2. 然后還可以強調或者突出Title

  3. 甚至,一條簡單的線條,也可以很美啊!

  2.4 圖片  真實的圖片跟背景融合,也是一種不錯的表現力哦!

  三、點綴和動效  上面兩步,其實已經足夠完成80%的頁面,可是,  什么?像php?/PowerPoint/' target='_blank'>PPT ?!  其實用一般交互設計師的思維,最后做出的成品,信息架構分明,排版合理,色彩搭配合理,也難免會做的像簡報一樣!很大部分原因,可能是因為少了Banner!(banner最能區別視覺和交互兩類人設計出來的作品,這是我的鄙見)  不過Banner也不是每個網站都會有,要具體看項目的需求。

那么剩下的20%,可以通過交互動效和其他一些小部件來作最后的點綴。

  關于動效的表達  1. 如果是已經其他產品有的交互效果,可以直接打開網頁,展示給開發GG看。

  2. 如果是自己想出來的創新的交互動效,那么可以通過直接口頭描述,跟開發GG溝通;如果還是不行,只能自己去用軟件來實現,比如Axure、Keynote、AE.  關于點綴  1. 參照第二點,加上色塊、線條、icon等等  2. 根據項目的定位,可以適當增加多一兩種其他具有視覺沖擊的顏色,作為局部點綴。

比如:

  總結  其實交互和視覺不分家,很多時候會有交叉。

交互設計師,不能因為自己的產出物可以是黑白灰,就覺得可以不去學習顏色的搭配原理;不能因為Sketch是畫圖神器,就不去學習AI、PS這些工具  設計無邊,挑戰很多,繼續努力!

版權聲明:本文由 零秀雋 整理編輯。

原標題:交互設計和視覺設計,什么是交互設計

轉載注明出處:http://www.dn9ww09s.icu/fault/13726.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 做ppt好用的軟件,做ppt用什么軟件

    做ppt好用的軟件,做ppt用什么軟件 相關圖片能做ppt的軟件手機在日常工作會議報告中,為了更好地展現數據和觀點,PPT無疑是最佳選擇之一。然而,大多數人都接觸word和excel。至于PPT,很多人從未接觸過。PPT的軟糖是ppt應用軟件...

  • 用微信偷看對方位置,哪個網址可以免費定位手機號

    用微信偷看對方位置,哪個網址可以免費定位手機號 相關圖片微信定位,不讓他發現當我們外出時,我們有時需要找到自己或他人的位置。雖然每一張地圖都很容易使用,但都有局限性。因此,我們需要更好的移動定位軟件來幫助我們確定我們的位...

  • 制作網站模板,制作模板

    制作網站模板,制作模板 相關圖片個人網頁模板像Dreamweaver這樣的常用網頁制作工具有這個功能。使用模板可以減少很多重復性工作。一。創建模板。一。創建模板頁的最簡單方法是通過執行以下命令將網頁保存為個人簡...

  • 火山小視頻位置準確嗎,火山小視頻改位置軟件

    火山小視頻位置準確嗎,火山小視頻改位置軟件 相關圖片火山小視頻好友顯示位置準嗎火山視頻作為一款非常好的視頻拍攝軟件,很多小伙伴都喜歡用它來和別人分享生活,但也有人說為什么發送的內容會顯示地址。如何隱藏火山視頻的位置...

  • ol元素,ol元素的屬性值

    ol元素,ol元素的屬性值 相關圖片世界ol定義如何準備排序列表。將文本繪制成帶編號的列表。注意,除非設置了不同的類型值,否則type tag屬性將設置所有后續列表類型。此元素位于Internet Expul ol...

  • 摳圖方法,摳圖教程

    摳圖方法,摳圖教程 相關圖片蒙版摳圖煙火墊已經不是很聰明很長一段時間了,所以有時我不得不向Photoshop兄弟求助,以便有更好的圖片效果。不過,PS哥的體質太強了,不能和FW一起玩。不,為了充分photoshop摳圖怎...

  • 股票可以手機交易嗎,手機通達信軟件下載官網

    股票可以手機交易嗎,手機通達信軟件下載官網 相關圖片十大證券交易app股票的走勢一直在實時變化,我們不能總是呆在電腦前。當你有東西要離開電腦時,你怎么能繼續追蹤股票的走勢?在這個時候,移動股票交易軟件將幫助很大。好吧,...

  • 網頁切圖怎么切,網頁如何切圖

    網頁切圖怎么切,網頁如何切圖 相關圖片網頁切圖規范許多初學者在剛學完CSS時感到無助,需要做實際的操作來裁剪網頁。這里我想簡單總結一下網頁裁剪第一點的一些經驗和要點:我們網站的logo部分一般采用H1 a鏈接的網頁需...

  • 網易云音樂人申請網址,如何入駐網易云音樂人

    網易云音樂人申請網址,如何入駐網易云音樂人 相關圖片網易云音樂人邀請碼在哪網易云音樂之所以能受到大家的喜愛,是因為網易音樂人推出的許多原創音樂是一大原因。那么網易云音樂人如何應用呢?網易云樂師怎么會唱歌?現在,超人...

  • 努比亞z17s吧,努比亞z17s怎么樣

    努比亞z17s吧,努比亞z17s怎么樣 相關圖片努比亞z17s屏幕怎么樣z17s作為努比亞第一款全屏幕手機,吸引了眾多小伙伴的關注。那努比亞z17s呢?現在,超人軟件編輯也想回答如何插入努比亞z17s的sim卡。希望你喜歡。努比亞Z努比亞...

熱評文章

  • 電腦定時開機在哪里設置,臺式電腦設置定時開機

    電腦定時開機在哪里設置,臺式電腦設置定時開機 相關圖片電腦怎么定時開機關機我相信,在使用電腦的過程中,所有的用戶都會遇到在不靠近電腦的時候需要打開或關閉電腦的體驗。那么如何在固定時間打開電腦呢?如何在固定時間關掉電腦...

  • 選項卡切換,切換選項卡在哪里

    選項卡切換,切換選項卡在哪里 相關圖片html選項卡切換本文以CSS文章列表切換為例介紹了tab效果的實現方法。與您分享以供參考。具體分析如下:這是一個很好的文章列表效果,類似于標簽頁的功能,有點特別,就是把鼠標點...

  • win10注冊dll文件,win10怎么打開dll文件

    win10注冊dll文件,win10怎么打開dll文件 相關圖片win7和win10哪個好用很多小伙伴都是PC端的游戲愛好者,但也有人在打開游戲的過程中報告了rld.dll的錯誤,游戲無法正常打開。怎么了?Rld.dll是一個Microsoft游戲支持dll文件修復...

  • 最炫酷頭像,最炫酷的圖片

    最炫酷頭像,最炫酷的圖片 相關圖片最炫酷的頭像圖片為了讓設計師更好的理解技術,我做了一期更容易理解的技術貼,內容高深遠遠沒有看的懂,看的有啟發重要!世界上最炫酷的壁紙...

  • ppt中音樂無法播放,ppt添加音樂從頭播到尾

    ppt中音樂無法播放,ppt添加音樂從頭播到尾 相關圖片wps音頻沒有可用的解碼器PPT是許多人在辦公過程中使用的一種軟件。我相信很多人仍然不知道如何在PPT中插入視頻和添加音樂。現在,超人軟件編輯將為您介紹PPT的相關內容。希望你喜...

  • 色彩搭配的基本方法,色彩搭配

    色彩搭配的基本方法,色彩搭配 相關圖片服裝色彩搭配教程視頻當你驚嘆于圖片設計中的美麗色彩,羨慕一個網站的恰當配色時,你是否總想把這些優秀的配色當成自己的,了解色彩的價值?也許,煙花可以幫助你解決這個難...

  • 比較好用的桌面管理軟件,桌面軟件管理

    比較好用的桌面管理軟件,桌面軟件管理 相關圖片免費桌面管理軟件我們的日常工作和生活都離不開電腦的使用,但是桌面一天比一天亂。厭倦了桌面的雜亂,想讓桌面更簡潔易用,那就用一些好的桌面管理軟件來管理你的電腦桌面快...

  • 網頁優化方法,網頁優化有哪些

    網頁優化方法,網頁優化有哪些 相關圖片網站常用的優化方法當我們合理地調用CSS來設計web頁面時,我們可以使用樣式表CSS來排列頁面元素,這可以大大減少HTML代碼,這一點我們已經很清楚了。方法:(1)選擇對象并從右網頁...

  • itunes備份密碼找回,itunes備份密碼怎么找回

    itunes備份密碼找回,itunes備份密碼怎么找回 相關圖片itunes備份默認密碼為了數據安全,iPhone設備要求用戶在啟用iPhone后設置備份密碼。備份密碼可以通過iPhone及其專用管理軟件iTunes進行設置和修改。但有些用戶使用時itunes怎么備份資料...

  • 日語輸入法,g語怎么打

    日語輸入法,g語怎么打 相關圖片日語如何輸入HTML head script language=javascript!--//定義select original value var oldvalue,ol搜狗輸入法有日語輸入嗎...

關注微信

变脸官网查询