2014-11-17 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源:http://www.w2bc.com/Article/2887
很多交互設(shè)計(jì)師朋友可能覺得交互作品既沒有視覺作品高大上,又沒有用研報(bào)告高科技,總是感覺不那么好看。其實(shí)不然,交互文檔也是可以有檔次的。這次我們就來解決這個(gè)問題。
既然聊精細(xì)原型,我們就暫時(shí)拋開最基本的柵格化等設(shè)計(jì)要素不談,我們這次只是從原型本身的精細(xì)化來聊聊。
下面說說個(gè)人覺得影響原型精細(xì)化的幾個(gè)維度,不一定對,隨便看看就好:
首先,交互設(shè)計(jì)師輸出的是流程圖,給開發(fā)以及產(chǎn)品經(jīng)理溝通之用,所以有時(shí)候?yàn)榱送怀鼋缑娴膶哟魏蛥^(qū)域,有必要通過深淺灰色來進(jìn)行區(qū)分,在我制圖的過程中,基本上界面上70%都是白色為主,一個(gè)是為了看起來更加干凈,再一個(gè)是如果有必要打印溝通,當(dāng)然白色是比較好的。
在設(shè)計(jì)圖中有很多線條,線條的粗細(xì)、虛實(shí)程度以及構(gòu)成都有不同的意義,靈活的運(yùn)用這些線條可以幫助自己的文檔提高一個(gè)檔chi。
下面說一說我的一點(diǎn)小經(jīng)驗(yàn)供大家借鑒。
首先說線條怎么畫出來,很多設(shè)計(jì)師通常使用矩形工具來為自己的界面提供線條,這樣用起來最方便,但是如果在界面內(nèi)的區(qū)域劃分、條目列舉等等情況下,眾多矩形看起來會(huì)非常的沒有重點(diǎn),同時(shí)在兩個(gè)矩形重疊處也非常不好處理,所以再界面內(nèi)的區(qū)域劃分這種情況使用適當(dāng)?shù)倪B接線工具還是非常好的,既避免的重疊的問題,又更好調(diào)節(jié)哪些是重點(diǎn),哪些不是重點(diǎn)。
然后是線條的虛實(shí),線條的虛實(shí)是配合上一條來使用,在頁面內(nèi)劃分時(shí)候虛線配連接線會(huì)讓界面更有層次。同時(shí)我喜歡用線條的粗細(xì)來做背景內(nèi)容和界面內(nèi)容的區(qū)別。
上面說的只是線條的幾個(gè)維度,運(yùn)用好可以做出非常性感的線條,同時(shí)也不會(huì)增加工作量。
適當(dāng)?shù)念伾梢詭椭换ジ玫陌l(fā)揮功效。
首先,適當(dāng)?shù)念伾梢愿玫倪_(dá)到黑白灰無法達(dá)到的效果,但是這個(gè)顏色不要太艷,所以在使用顏色時(shí)應(yīng)該盡量使用純度不高的顏色,同時(shí)可以適當(dāng)調(diào)節(jié)一下透明度,目的就是不搶視覺,同時(shí)還能表達(dá)清楚我們的意思。
我們來看一下下面這個(gè)例子,對于刪除這種操作,我選擇使用20%透明度的紅色來著色,首先它沒有搶視覺,其次除了設(shè)計(jì)師本身之外,開發(fā)和PM都能很好的理解這是一個(gè)”紅色”的操作。但是你想想,如果用黑白灰此處你應(yīng)該如何表現(xiàn)呢?
與此同時(shí),對于和自己公司的產(chǎn)品經(jīng)理和開發(fā)者有著長期合作的設(shè)計(jì)師來說,給顏色賦予性格也是非常重要的一件事,紅色代表刪除,黃色代表選中,綠線代表前進(jìn),紅線代表后退,等等諸如此類的顏色定義,在長期的使用和溝通中可以培養(yǎng)其他人員對你顏色的敏感,同時(shí),除了線型,色塊等等,你又多了一種表達(dá)含義的一種方式—-顏色。
其實(shí)交互文檔可以更精致,可以更有”格調(diào)”,對吧?
還有,如果你連邏輯都沒想好就來想如何把交互圖畫的牛逼,那你就錯(cuò)了,對于思維清晰的同學(xué)來講,這個(gè)是裝逼利器,對于想都沒想明白的同學(xué)來講,充其量算花拳繡腿。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://yvirxh.cn