交互設(shè)計師必讀!精細原型設(shè)計三要素

@AzTamic (百度MUX交互設(shè)計師):很多交互設(shè)計師朋友可能覺得交互作品既沒有視覺作品高大上,又沒有用研報告高科技,總是感覺不那么好看。其實不然,交互文檔也是可以有檔次的。這次我們就來解決這個問題。

作者個人博客:tamic.cc

既然聊精細原型,我們就暫時拋開最基本的柵格化等設(shè)計要素不談,我們這次只是從原型本身的精細化來聊聊。

交互設(shè)計好文:
《設(shè)計師新寵!交互神器ORIGAMI》
《交互神器!誰是最好用的原型繪制工具?》
《交互設(shè)計師修煉指南!教你從零開始成為優(yōu)秀交互設(shè)計師》

下面說說個人覺得影響原型精細化的幾個維度,不一定對,隨便看看就好:

一、淺色的主體

首先,交互設(shè)計師輸出的是流程圖,給開發(fā)以及產(chǎn)品經(jīng)理溝通之用,所以有時候為了突出界面的層次和區(qū)域,有必要通過深淺灰色來進行區(qū)分,在我制圖的過程中,基本上界面上70%都是白色為主,一個是為了看起來更加干凈,再一個是如果有必要打印溝通,當然白色是比較好的。

交互設(shè)計師必讀!精細原型設(shè)計三要素

二、性感的線條

在設(shè)計圖中有很多線條,線條的粗細、虛實程度以及構(gòu)成都有不同的意義,靈活的運用這些線條可以幫助自己的文檔提高一個檔chi。
下面說一說我的一點小經(jīng)驗供大家借鑒。

首先說線條怎么畫出來,很多設(shè)計師通常使用矩形工具來為自己的界面提供線條,這樣用起來最方便,但是如果在界面內(nèi)的區(qū)域劃分、條目列舉等等情況下,眾多矩形看起來會非常的沒有重點,同時在兩個矩形重疊處也非常不好處理,所以再界面內(nèi)的區(qū)域劃分這種情況使用適當?shù)倪B接線工具還是非常好的,既避免的重疊的問題,又更好調(diào)節(jié)哪些是重點,哪些不是重點。

交互設(shè)計師必讀!精細原型設(shè)計三要素

然后是線條的虛實,線條的虛實是配合上一條來使用,在頁面內(nèi)劃分時候虛線配連接線會讓界面更有層次。同時我喜歡用線條的粗細來做背景內(nèi)容和界面內(nèi)容的區(qū)別。

上面說的只是線條的幾個維度,運用好可以做出非常性感的線條,同時也不會增加工作量。

交互設(shè)計師必讀!精細原型設(shè)計三要素

三、敏感的顏色

適當?shù)念伾梢詭椭换ジ玫陌l(fā)揮功效。

首先,適當?shù)念伾梢愿玫倪_到黑白灰無法達到的效果,但是這個顏色不要太艷,所以在使用顏色時應(yīng)該盡量使用純度不高的顏色,同時可以適當調(diào)節(jié)一下透明度,目的就是不搶視覺,同時還能表達清楚我們的意思。

我們來看一下下面這個例子,對于刪除這種操作,我選擇使用20%透明度的紅色來著色,首先它沒有搶視覺,其次除了設(shè)計師本身之外,開發(fā)和PM都能很好的理解這是一個"紅色"的操作。但是你想想,如果用黑白灰此處你應(yīng)該如何表現(xiàn)呢?

交互設(shè)計師必讀!精細原型設(shè)計三要素

與此同時,對于和自己公司的產(chǎn)品經(jīng)理和開發(fā)者有著長期合作的設(shè)計師來說,給顏色賦予性格也是非常重要的一件事,紅色代表刪除,黃色代表選中,綠線代表前進,紅線代表后退,等等諸如此類的顏色定義,在長期的使用和溝通中可以培養(yǎng)其他人員對你顏色的敏感,同時,除了線型,色塊等等,你又多了一種表達含義的一種方式----顏色。

交互設(shè)計師必讀!精細原型設(shè)計三要素

其實交互文檔可以更精致,可以更有"格調(diào)",對吧?

還有,如果你連邏輯都沒想好就來想如何把交互圖畫的牛逼,那你就錯了,對于思維清晰的同學(xué)來講,這個是裝逼利器,對于想都沒想明白的同學(xué)來講,充其量算花拳繡腿。

百度招人咯,想跟作者成為同事的童鞋可以去試一下:

交互設(shè)計師必讀!精細原型設(shè)計三要素

 

原文地址:tamic.cc
作者:@AzTamic
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書:史上最全的設(shè)計師圖書導(dǎo)航:http://hao.uisdc.com/book/
設(shè)計微博:擁有粉絲量68萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航:全球頂尖設(shè)計網(wǎng)站推薦,設(shè)計師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號:【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:

交互設(shè)計師必讀!精細原型設(shè)計三要素
 

收藏 2
點贊 1

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。