久久蜜臀精品av_国产欧美日韩_亚洲一区二区三区四区_国产精品无码久久久久_久久性_国产日本在线视频

24個(gè)幫設(shè)計(jì)師與工程師更好溝通的實(shí)用技巧

2018-01-25 2008 0
編者按:設(shè)計(jì)師與工程師的交流經(jīng)常是雞同鴨講,牛頭對(duì)不上馬嘴,為了幫同學(xué)們搞定這個(gè)難題,一位國(guó)外的設(shè)計(jì)師兼開(kāi)發(fā)者整理了一個(gè)列表,幫同學(xué)們能跟工程師無(wú)障礙溝通,全是非常實(shí)用的知識(shí)點(diǎn),強(qiáng)烈推薦閱讀 >>> @特贊Tezign  :開(kāi)發(fā)者一般不是令人驚艷的設(shè)計(jì)師,設(shè)計(jì)師也通常不是出色的開(kāi)發(fā)者。雖然有很多例外,但這兩行的門(mén)道對(duì)對(duì)方而言都是難以言說(shuō)的謎,然而雙方卻要在這種情況下合作完成項(xiàng)目。作為在兩個(gè)領(lǐng)域都工作過(guò)的人,我為設(shè)計(jì)師整理了一個(gè)列表,使他們能夠更好地輔助開(kāi)發(fā)者開(kāi)發(fā)應(yīng)用和網(wǎng)站。

Photoshop 開(kāi)發(fā)者經(jīng)常需要處理設(shè)計(jì)師制作的Photoshop PSD文件,因此任何對(duì)設(shè)計(jì)師有益的事情也會(huì)對(duì)開(kāi)發(fā)者有益,包括繪制易于維護(hù)、易于理解的PSD文件。 20150302162233
1. 有效地進(jìn)行版本控制 設(shè)計(jì)師經(jīng)常會(huì)面對(duì)各種裝滿了一堆沒(méi)有清晰版本命名的PSD的文件夾。為了解決這個(gè)問(wèn)題,設(shè)計(jì)師可以事先確定一種合適的版本命名格式(理想的格式應(yīng)該使文件在字順排序下自動(dòng)有意義地排列)。
2. 保持圖層 不要輕易合并圖層。需要導(dǎo)出時(shí),通過(guò)組合,隱藏/顯示圖層的方式來(lái)進(jìn)行,導(dǎo)出后再把文件恢復(fù)到原來(lái)的狀態(tài)。不要輕易破壞有用的數(shù)據(jù)。電腦性能更不是合并圖層的理由——若被此限制,你應(yīng)該做的是買(mǎi)內(nèi)存更大,性能更好的電腦。
3. 對(duì)圖層進(jìn)行有意義的命名 雖然對(duì)圖層命名比較繁瑣,但這樣做確實(shí)能夠幫助理解,尤其是在重用文件元素的時(shí)候。命名時(shí)應(yīng)確保文字圖層的名稱(chēng)反應(yīng)其內(nèi)容。重復(fù)的圖層也要進(jìn)行有意義的命名,而不是簡(jiǎn)單的“副件”。
4. 合理地對(duì)圖層編組 應(yīng)該把分散在不同圖層的視覺(jué)元素編為一組。對(duì)單一設(shè)計(jì)的文件來(lái)說(shuō),編組整體上應(yīng)該一致按照從左到右,從上到下的順序。層次和順序比按顏色編碼圖層更好,因?yàn)閳D層移動(dòng)時(shí),顏色還需要保持。
5. 去掉不需要的圖層 不再需要的舊版本、模版和參考材料以及臨時(shí)復(fù)件應(yīng)該從圖層中及時(shí)刪除。間歇性地瀏覽一下你的所有圖層,及時(shí)刪除不需要的東西。
6. 使用圖層復(fù)合 Photoshop的圖層復(fù)合功能可以讓你制作多組圖層狀態(tài),如可見(jiàn)性,位置甚至圖層風(fēng)格。你可以用圖層復(fù)合功能來(lái)靈活地在一份文件中整合設(shè)計(jì)中不同部分(比如網(wǎng)站的多個(gè)標(biāo)簽、應(yīng)用的多個(gè)頁(yè)面)。這樣做可以不必保留重復(fù)的圖層編組,從而減小文件大小。
7. 保存矢量文件和可伸縮效果 在設(shè)計(jì)應(yīng)用時(shí),很可能會(huì)需要原設(shè)計(jì)兩倍尺寸的圖片來(lái)適應(yīng)有雙倍像素的新設(shè)備。確保在這種情況下你不需要重新繪制所有的圖標(biāo)。

助力開(kāi)發(fā)者 還有一些特別與應(yīng)用及網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的建議,每項(xiàng)都有相應(yīng)的要求和限制。 QQ20150302162249
8. 學(xué)會(huì)在縮放時(shí)保存圓角 操作系統(tǒng)經(jīng)常會(huì)統(tǒng)一圓角的角半徑(iOS通常為12像素)。Adobe Fireworks會(huì)保持圓角矩形的角半徑,但Photoshop不會(huì)。因此確保你用直接選擇工具來(lái)選取圓角的點(diǎn)并且以傳統(tǒng)的方式縮放圖像。
9. 在72ppi下進(jìn)行設(shè)計(jì) 一個(gè)像素就是一個(gè)像素,更多的像素只會(huì)生成更大的文件。不要通過(guò)改分辨率來(lái)蒙混過(guò)關(guān)。
10. 對(duì)齊像素 確保相關(guān)的形狀工具設(shè)置成對(duì)齊像素。根據(jù)你的需要使用像素網(wǎng)格等工具。一貫使用偶數(shù)尺寸來(lái)方便裁剪。
11. 使用RGB模式 這點(diǎn)不僅對(duì)顏色顯示重要,對(duì)開(kāi)發(fā)者將顏色正確地寫(xiě)入代碼也同樣關(guān)鍵。
12. 資源準(zhǔn)備是你工作的一部分 很多(大多數(shù))開(kāi)發(fā)者除了基本的編輯功能外對(duì)Photoshop一竅不通。設(shè)計(jì)師需要適時(shí)地導(dǎo)出可能會(huì)在應(yīng)用或網(wǎng)站上用到的裁剪圖,因?yàn)楫吘顾麄兪菍?duì)文件和Photoshop最熟悉的人。 這項(xiàng)工作雖然很痛苦,而且很耗時(shí),但這是除“設(shè)計(jì)”外90%的工作。
13. 謹(jǐn)慎地使用字體 不同的設(shè)備和操作系統(tǒng)的預(yù)設(shè)字體有所不同,因此不能確保這些設(shè)備都有你進(jìn)行設(shè)計(jì)的電腦上的字體(事實(shí)上,你比一般人的設(shè)備上的字體都多)。基本上,將應(yīng)用或網(wǎng)站上的文字以實(shí)際文本的格式呈現(xiàn)會(huì)有更好的效果,但這也使對(duì)字體的選擇不僅基于視覺(jué),還有可行性上的考慮。 還有一點(diǎn)值得注意,允許個(gè)人設(shè)計(jì)使用的許可也許不允許你將該字體完全使用在應(yīng)用或網(wǎng)頁(yè)上。在選定設(shè)計(jì)中使用的字體之前,確保和你的開(kāi)發(fā)者或客戶進(jìn)行有效溝通。
14. 確定設(shè)計(jì)尺寸 對(duì)移動(dòng)設(shè)備應(yīng)用來(lái)說(shuō),屏幕尺寸不是全部信息,你還需要考慮系統(tǒng)狀態(tài)欄等的存在,以及他們?nèi)绾卧谄聊粰M排和豎排時(shí)影響尺寸(比如iOS設(shè)備的頂端狀態(tài)欄會(huì)在橫排的時(shí)候減小較小邊的尺寸,在豎排的時(shí)候減小大邊的尺寸)。和你的開(kāi)發(fā)者確認(rèn)一下應(yīng)用是否為完整的全屏很必要。 QQ20150302162301
15. 使用平臺(tái)風(fēng)格 每個(gè)平臺(tái)(操作系統(tǒng))都有其獨(dú)特的用戶界面元素和交互風(fēng)格(也會(huì)根據(jù)不同的設(shè)備有所不同)。在設(shè)計(jì)時(shí)注意這些風(fēng)格,并且除了有特殊原因,不要進(jìn)行與平臺(tái)本身風(fēng)格差別太大的設(shè)計(jì)。例如,在iPad上,你會(huì)發(fā)現(xiàn)這些需要注意的地方:
  1. 支持兩種屏幕方向的強(qiáng)烈需求
  2. 雙欄設(shè)計(jì)在兩種屏幕方向上都可接受
  3. 將彈出框作為一種界面元素和分組機(jī)制
  4. 確定的文件瀏覽器的風(fēng)格
  5. 在級(jí)別較高的導(dǎo)航欄中,返回按鈕是向左指的圖標(biāo)
因此,在設(shè)計(jì)時(shí)要熟悉平臺(tái),因?yàn)槟愕脑O(shè)計(jì)要適應(yīng)它。沒(méi)有哪一種單一的設(shè)計(jì)可以適應(yīng)所有的平臺(tái)。
16. 對(duì)橫排和豎排分別進(jìn)行設(shè)計(jì) 不同的屏幕方向需要不同的交互設(shè)計(jì)風(fēng)格,這不僅是因?yàn)槠聊粚捀弑龋€因?yàn)橛脩粢圆煌较蚴殖衷O(shè)備時(shí)外形、重量和平衡上的區(qū)別。 只針對(duì)適應(yīng)屏幕寬高比進(jìn)行設(shè)計(jì)頂多是一個(gè)糟糕的妥協(xié)策略。
17. 針對(duì)每種主流尺寸和情景進(jìn)行設(shè)計(jì) 同一應(yīng)用在手機(jī)、平板和電腦上的內(nèi)容和交互都應(yīng)有所不同。對(duì)移動(dòng)設(shè)備而言,我們也需要考慮注意力持續(xù)時(shí)間、注意力分散、使用設(shè)備時(shí)的身體協(xié)調(diào)性減弱,以及用戶在移動(dòng)或危險(xiǎn)情境下使用設(shè)備的可能性(例如走路時(shí)的障礙物、過(guò)馬路時(shí)的交通情況以及駕駛安全性)。 這些使用情景與設(shè)備的尺寸和本質(zhì)有不可否認(rèn)的關(guān)系,有效的設(shè)計(jì)應(yīng)該充分考慮這些因素。
18. 使用純正的,至少實(shí)際的示例內(nèi)容 好的示例內(nèi)容標(biāo)準(zhǔn)有以下幾條:
  1. 示例內(nèi)容涵蓋應(yīng)用可能的長(zhǎng)度,而不是僅僅為了原型設(shè)計(jì)的方便。
  2. 設(shè)計(jì)必需的數(shù)據(jù)缺省時(shí)的顯示方案,尤其如用戶照片等。
  3. 考慮不合需要的輸入示例,比如需要進(jìn)行裁剪的過(guò)寬或過(guò)長(zhǎng)的圖片。
  4. 包含極端或少見(jiàn)的名字示例,包括超長(zhǎng)或不間斷的姓和名。
  5. 地址不限制為當(dāng)?shù)氐牡刂沸问剑ǜ鞣N可能的長(zhǎng)度和格式。
  6. 在設(shè)計(jì)的任何角落都找不到“Lorem ipsum”。
19. 本地化考慮 當(dāng)大多數(shù)人考慮支持其它語(yǔ)言時(shí),他們想的是文本。而當(dāng)設(shè)計(jì)師或開(kāi)發(fā)者考慮本地化時(shí),他們應(yīng)該考慮的是布局。為了實(shí)現(xiàn)本地化,你的設(shè)計(jì)應(yīng)該使所有文本支持與英文50%的寬度差異。 在顯示同等內(nèi)容時(shí),亞洲語(yǔ)言需要的空間比英語(yǔ)少接近50%,而歐洲語(yǔ)言會(huì)比英語(yǔ)多接近50%。這個(gè)問(wèn)題在設(shè)計(jì)按鈕和幫助文本時(shí)尤其重要。
20. 考慮屏幕全局光源 作為設(shè)計(jì)師,你應(yīng)該早就了解每個(gè)平臺(tái)都有其不可改變的屏幕全局光源(例如在iOS上,是在中心的正上方,或90度)。所有高光和陰影效果都應(yīng)該和平臺(tái)的光源相協(xié)調(diào)。
21. 明確導(dǎo)航和組織控件設(shè)計(jì) 向你的開(kāi)發(fā)者明確展示你的設(shè)計(jì)中包含的標(biāo)簽、下拉菜單或者其它閉合機(jī)制。在進(jìn)行這種控件設(shè)計(jì)時(shí),要尊重平臺(tái)的設(shè)計(jì)慣例。開(kāi)發(fā)者在進(jìn)行開(kāi)發(fā)時(shí)需要明確了解信息層次,因此你要確保你的設(shè)計(jì)清晰地展示你的意圖。圖層復(fù)合在這種情況下非常有用。
22. 導(dǎo)出圖形時(shí)不進(jìn)行壓縮 在導(dǎo)出時(shí)以PNG alpha通道格式保存,除非被明確告知其它保存方式。除非被明確要求,否則不要使用JPEG格式。不要考慮圖像文件大小,因?yàn)殚_(kāi)發(fā)者或他們的開(kāi)發(fā)環(huán)境會(huì)對(duì)圖像進(jìn)行最優(yōu)化。以透明背景導(dǎo)出每個(gè)元素,而不是純色,即便你設(shè)計(jì)中的一部分背景確實(shí)是純色的。
23. 詢問(wèn)陰影的處理 和你的開(kāi)發(fā)者溝通是否要將陰影效果包含在導(dǎo)出圖中。通常情況下,開(kāi)發(fā)者會(huì)用CSS或?qū)懘a來(lái)應(yīng)用陰影,這樣做事實(shí)上會(huì)比直接使用預(yù)先保存的陰影位圖更方便容易。不要假定陰影效果應(yīng)該包含在圖像中,雖然在設(shè)計(jì)原型時(shí)用圖層展示陰影效果。
24. 理解按鈕的構(gòu)建方法 應(yīng)用或網(wǎng)頁(yè)上的按鈕幾乎都不是用單一的圖片創(chuàng)建的,而通常是下面兩種情況: · 3部分圖像,左端圖像,右端圖像,重復(fù)的單像素寬的中間部分(允許圖像的橫向擴(kuò)展) · 9部分圖像,上中下-左端圖像,上中下-右端圖像,以及3個(gè)重復(fù)的上中下中間部分(允許按鈕的橫向和縱向擴(kuò)展)

最后的想法 任何軟件都應(yīng)該是平面設(shè)計(jì)、交互設(shè)計(jì)和開(kāi)發(fā)三者合作的結(jié)果,這三部分都同等重要。知道另外領(lǐng)域的需求對(duì)我們自己的工作非常有幫助。


5
評(píng)論區(qū)(0)
正在加載評(píng)論...
相關(guān)推薦
主站蜘蛛池模板: 欧美电影一区 | 欧美在线观看一区二区 | 免费黄色特级片 | 久久久久免费 | 亚洲精品乱码8久久久久久日本 | 久久久国产精品入口麻豆 | 一区二区三区四区视频 | 日韩国产欧美一区 | 伊人二区 | 国产在线激情视频 | 亚洲欧美日韩精品久久亚洲区 | 在线观看亚洲一区二区 | 日韩精品成人在线 | 中文字幕在线三区 | 亚洲精品久久久久久一区二区 | 欧美日韩看片 | 九九热精品视频 | 在线成人免费视频 | 国产在线一区二 | 精品亚洲一区二区 | 欧美操操操 | 亚洲精品一区二区在线观看 | 国产成人影院 | 成人免费视频 | 国产福利精品一区 | 国产精品观看 | 伊人精品一区二区三区 | 国产露脸对白88av | 日韩中文一区 | 国产日韩欧美在线播放 | 国内在线视频 | 亚洲 91| 免费一区二区 | 国产成人99久久亚洲综合精品 | 久久精品欧美一区二区三区不卡 | 成年人免费看 | 欧美午夜一区二区三区免费大片 | 日韩一区二区在线视频 | 成人精品免费 | 欧美精品一区三区 | 国产传媒毛片精品视频第一次 |