首頁

視覺設(shè)計師是怎樣讓前端工程師100% 實現(xiàn)設(shè)計效果的

藍藍設(shè)計的小編

首先,作為一個設(shè)計師,尤其是UI設(shè)計師,請跟我一起大聲念:必須掌握前端切圖流程!!

這可能意味著你得學(xué)會HTML+CSS,或者要長時間和IOS或者安卓開發(fā)人員交流他們是怎么把圖片和文字排進屏幕內(nèi)的。別老是抱怨你是設(shè)計怎么能去學(xué)碼農(nóng)的東西,設(shè)計人員對這些看似高深的源碼有本能的畏懼和厭惡。無論你所在的公司在項目人員配置上如何貼心到位,但如果你自己沒有掌握這些知識點,就不要妄想最后實現(xiàn)環(huán)節(jié)上能順利收尾,因為你從出發(fā)點開始和程序員的認知就不對稱,這些不對稱是矛盾和偏差的根源。

界面設(shè)計的四個層面 設(shè)計最重要的一步 往往并不會去追求外觀的美

藍藍設(shè)計的小編

許多設(shè)計師在社區(qū)中分享的作品往往是為了炫技,而產(chǎn)品的邏輯通常都經(jīng)不起推敲的,真正優(yōu)秀的設(shè)計應(yīng)該從更高的層面出發(fā),而不只是做表面上的工作。

前言

13年底,Intercom 的產(chǎn)品VP Paul Adams 在 Intercom 官博發(fā)表了 一篇博文 。文章講述了網(wǎng)絡(luò)上設(shè)計社區(qū)里普遍存在的一種現(xiàn)象,大意是“許多設(shè)計師在社區(qū)中分享的作品往往是為了炫技,而產(chǎn)品的邏輯通常都經(jīng)不起推敲的,真正優(yōu)秀的設(shè)計應(yīng)該從更高的層面出發(fā),而不只是做表面上的工作”。

文章發(fā)布后,在 Twitter 、HN 及博客評論下引起了反響。雖然部分內(nèi)容在一些設(shè)計師眼里看起來比較有攻擊性(也就是俗稱“開噴”),甚至還帶有些地圖炮,但是文中關(guān)于“設(shè)計的四個層次”以及“when..I want to..then I can…”等設(shè)計觀點和方法論都非常值得我們回味并運用到工作當(dāng)中。

文章是2月前Sam推薦給我的,隨后到 twitter 上獲得了作者的授權(quán),在這里也應(yīng)作者需要,貼上 Intercom 的官博連接:http://blog.intercom.io/ 。

譯文開始,Dribbble 大牛務(wù)必冷靜閱讀。 =D

__________________以下為譯文正文__________________

設(shè)計追波風(fēng)

[ISUX轉(zhuǎn)譯]設(shè)計追波風(fēng)

關(guān)于工作效率的心得分享

藍藍設(shè)計的小編

我相信大家應(yīng)該都有過工作效率的些許煩惱。而這個效率啊伴隨我很長時間的痛苦。每每到PDI的時候領(lǐng)導(dǎo)必提效率有木有?自認為快是不算的,必須領(lǐng)導(dǎo)和客戶方說了算,對于當(dāng)年校招進來的毛驢,是一件淚崩漫長的提升過程。整天琢磨如何快,多快的速度才算快,恨不得快到連參照物都變得動感模糊。時間是把殺豬刀,不僅催人老還得與它賽跑,經(jīng)過這幾年的自殘式磨練,也早該總結(jié)總結(jié)。



一、 懂得整理需求

效率是先把重要的事情優(yōu)先排序來完成,好的整理習(xí)慣是可以提率的。當(dāng)需求很多的時候是可以通過整理需求有條不紊的進行。只要了解哪些是重要和緊急的事情,就能輕松的決定先處理什么。這個相當(dāng)于是做項目管理的事情,要善于管理自己的工作。建議學(xué)習(xí)佐藤可士和的《整理術(shù)》。

例如:本周產(chǎn)品經(jīng)理們提了很多需求:@#¥……&%……&%……

可這樣做:

1、列出所有需求

ABCBBD

2、歸納類型

ABBBCD

3、了解份量

A(傳輸功能設(shè)計):總辦需求

BBB(圖標(biāo)類設(shè)計): 迭代需求,排一起繪制

C(新增界面設(shè)計): 迭代需求,需較多時間設(shè)計

D(功能宣傳圖):迭代需求,版本發(fā)布的新功能宣傳

4、明確期限

假如級別為High、Mid、Low…

A(傳輸功能設(shè)計):總辦需求—非常緊急(今天)—High

D(功能宣傳圖):迭代需求,版本發(fā)布的新功能宣傳—周三—Mid

C(新增界面設(shè)計): 迭代需求,需較多時間設(shè)計—本周—Mid

BBB(圖標(biāo)類設(shè)計): 迭代需求,需較多時間設(shè)計—本周—Low

需求從散到整,從大到小,從繁到簡,從緊急到迭代這樣去處理就會變得清晰可觀。

做好扁平化設(shè)計-視覺篇

藍藍設(shè)計的小編

3

 一頭牛從最初的寫實到最后僅僅只用幾根線條來表示,整個簡化的過程也經(jīng)歷了好幾個步驟,當(dāng)然這里對設(shè)計師觀察和提煉能力要求很高,要充分了解對象物的本質(zhì),懂得巧妙的取舍,用極簡的要素,在沒有更多裝飾的情況下表達清楚內(nèi)容,在界線與輪廓的高對比下,表現(xiàn)出物體的美感。

設(shè)計中的字體字號

藍藍設(shè)計的小編

 

問題的關(guān)鍵有:

1.字體樣式太多,導(dǎo)致頁面雜亂

2.使用的字體不易識別

3.字體樣式和內(nèi)容的氣氛或規(guī)范不匹配

怎么避免這樣的結(jié)果發(fā)生呢?

通過設(shè)計經(jīng)驗可以幫助你做出更好的版式

了解不同平臺的常用字體設(shè)計規(guī)范

在每個項目設(shè)計中只使用1-2個字體樣式,而在品牌字有明確的規(guī)范的情況下,只需要一種字體貫穿全文,通過對字體放大來強調(diào)重點文案。字體用的太多,越顯得不夠?qū)I(yè)。

不同的樣式的字體,形狀或系列最好相同,保證字體風(fēng)格的一致性。

字體與背景的層次要分明

確保字體樣式與色調(diào)氣氛相匹配

界面設(shè)計的統(tǒng)一與迥異

藍藍設(shè)計的小編

統(tǒng)一的力量是強大的。作為人類,在日?;顒又?,我們潛意識期望某種協(xié)調(diào)和秩序。世上每個禁行標(biāo)記看起來都很像,這是有原因的。我在澳大利亞時,學(xué)著在道路另一側(cè)駕駛就已經(jīng)很艱難了。想象一下,如果每個城市都有自己特定的禁行標(biāo)志——紫色霓虹燈禁行標(biāo)志——那會是什么情況!某種程度上來說,我們靠一致性來使自己感到平常和舒適。


我們會注意到相互迥異的事物,這可能讓人沮喪和迷惑。但有時又會讓人耳目一新、為之著迷。我愛星巴克,我會本能地購買咖啡,動作一氣呵成。領(lǐng)取我的白色超大杯咖啡時,也沒有絲毫畏縮。忽然,在十一月的某天,我手捧著一杯迷人的紅色假日杯,上面有一些令人感到安逸的冬季圖案。白色的杯子星巴克已經(jīng)使用多年,沒有什么打破過這一傳統(tǒng),但有時制造點混亂也不錯。它能通過人們不熟悉的方式,吸引和迷住顧客。


APP交互設(shè)計作品欣賞 by Ramotion INC.

藍藍設(shè)計的小編

一個優(yōu)秀的APP交互動畫不僅僅是弦,而且要實用,有的還要考慮手機的性能等因素,所以想做一個好的交互不并容易,今天摘選自Ramotion公司的一些項目交互作品,交互效果很棒,值得欣賞學(xué)習(xí)。

(GIF圖片較大,想看好作品,請耐心等待加載。)

一個有趣的下拉刷新loading交互效果,這個彈性看起來很有吸引力。

app Interactive Design-by-ramotion-1

移動端設(shè)計—視覺設(shè)計

藍藍設(shè)計的小編

移動端設(shè)計——第三節(jié):視覺設(shè)計

為了利用平臺化的功能,歷史上第一批移動網(wǎng)站不得不在很多方面做出“讓步”,因此遠達不到“佳作”的水平。而如今,功能更加完備的設(shè)備讓我們有機會打造出更具視覺吸引力的設(shè)計,這些設(shè)計不僅能夠刺激和吸引用戶,更能夠提高用戶體驗的實用性。不過,機會的出現(xiàn)同時也伴隨著挑戰(zhàn)。

30+有吸引力的jQuery插件 可應(yīng)用到你的WEB站點

藍藍設(shè)計的小編

很多公司是缺少前端人員,前端的工作都郵設(shè)計師來完成,但設(shè)計師們對前端的熟悉程度一般般,想做出一些好的,就必須去找源代碼了,今天我們整理出30+有吸引力的jQuery插件,這些都是比較新鮮的代碼,有的效果很不錯,有的卻很實用,喜歡的可以嘗試應(yīng)用到你的網(wǎng)站上,讓你的WEB站點更生動一些吧!

魔法滾動,在演示頁滑動鼠標(biāo)中鍵試試,很有趣哦。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔