如何設(shè)計(jì)出開發(fā)者不會(huì)討厭的網(wǎng)站

為了獲得最佳的視覺精度，每個(gè)Web設(shè)計(jì)項(xiàng)目最終都需要為每個(gè)頁(yè)面和界面設(shè)計(jì)完整的模型。由于受到技術(shù)上的限制，這些模型必須作為與開發(fā)人員定期討論的協(xié)作性視覺設(shè)計(jì)文檔——而不僅僅是傳遞給對(duì)方的東西，就好像對(duì)方是WYSIWIG工廠一樣。

圖形、紋理、排版和其他小花菜都必須從一個(gè)簡(jiǎn)單的圖形轉(zhuǎn)換成一個(gè)生動(dòng)的界面。但是，僅僅因?yàn)槟愣萌绾卧O(shè)計(jì)偉大的原型，并不意味著你懂得如何為開發(fā)人員設(shè)計(jì)它們。在本文中，我們將提供一些技巧，幫助您構(gòu)建盡可能平穩(wěn)地過(guò)渡到開發(fā)的模型。

畢竟，如果您希望項(xiàng)目向前發(fā)展，您必須始終確保從框架和系統(tǒng)角度思考的開發(fā)人員能夠清楚地理解您的數(shù)字藝術(shù)作品。

正如免費(fèi)設(shè)計(jì)人員與開發(fā)人員協(xié)作指南中推薦的那樣，正確實(shí)現(xiàn)的第一步是預(yù)測(cè)開發(fā)過(guò)程中可能(通常會(huì))出現(xiàn)的UI限制。

在設(shè)計(jì)世界中，似乎任何美麗的想法都可以用代碼來(lái)創(chuàng)建。HTML5/CSS3規(guī)范確實(shí)走過(guò)了很長(zhǎng)的路，但是一些想法在完全支持下仍然很難構(gòu)建。

當(dāng)在線框/原型階段與開發(fā)人員合作時(shí)，請(qǐng)始終牢記HTML5、CSS3或任何您選擇的語(yǔ)言的局限性。這樣，你就會(huì)知道該設(shè)計(jì)什么，以及如何可視化地設(shè)計(jì)想法，以便開發(fā)人員可以實(shí)際構(gòu)建界面。

在你的辦公桌旁邊(或者在谷歌文檔中)列一個(gè)清單，列出需要避免的障礙、障礙和界面想法。雖然以后可能會(huì)添加這些特性，但您應(yīng)該首先關(guān)注最可行的接口元素的優(yōu)先級(jí)排序。在設(shè)計(jì)過(guò)程中，每周與開發(fā)人員一起回顧一下這個(gè)列表，這樣你就不會(huì)迷失在一個(gè)高保真度的設(shè)計(jì)中，而這個(gè)設(shè)計(jì)實(shí)際上是一個(gè)技術(shù)夢(mèng)魘。

現(xiàn)在已經(jīng)為設(shè)計(jì)可行性提供了一個(gè)良好的起點(diǎn)，讓我們研究一些在設(shè)計(jì)時(shí)要記住的其他方法。

當(dāng)涉及到探索交互時(shí)，原型是討論可行性的最有效的平臺(tái)。除了實(shí)際編碼你的設(shè)計(jì)，原型比簡(jiǎn)單地描述或注釋平面線框圖和原型要有效得多。

即使是粗略的低保真原型(也被稱為交互式線框)也可以向開發(fā)人員展示內(nèi)容的總體框架，以及用戶點(diǎn)擊體驗(yàn)時(shí)內(nèi)容之間的依賴關(guān)系。雖然視覺上的細(xì)節(jié)還遠(yuǎn)遠(yuǎn)不夠完善，但開發(fā)人員仍然可以提供關(guān)于設(shè)計(jì)基礎(chǔ)設(shè)施的反饋。

例如，對(duì)于一個(gè)大型博客設(shè)計(jì)，您可能會(huì)陷入無(wú)限滾動(dòng)的僵局，但是card UI模式仍然可以作為可用性和站點(diǎn)加載時(shí)間之間的折衷。在更微妙的層次上，開發(fā)人員還可以為您提供特定于設(shè)備的反饋。導(dǎo)航頭在原型中可能工作得很好，但在某些瀏覽器和設(shè)備中，它可能完全被地址欄隱藏了。

除非您讓開發(fā)人員使用您的原型，否則您將無(wú)法發(fā)現(xiàn)這些技術(shù)上的挫折(其中一些可能需要徹底的更新)。事實(shí)上，我們的應(yīng)用程序與Photoshop和Sketch結(jié)合的部分原因是為了鼓勵(lì)更多的設(shè)計(jì)師跨入交互設(shè)計(jì)階段(即使他們更喜歡首先增加視覺設(shè)計(jì)的逼真度)。

網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域與移動(dòng)應(yīng)用程序設(shè)計(jì)有很大的不同。

Android和iOS應(yīng)用程序運(yùn)行在一個(gè)操作系統(tǒng)上，屏幕分辨率各不相同。然而，網(wǎng)站引入了更多的變量——它們必須在不同的屏幕分辨率、不同的操作系統(tǒng)、不同的瀏覽器、以及不同的屏幕分辨率(和設(shè)備)上運(yùn)行。

設(shè)計(jì)網(wǎng)站界面的過(guò)程和設(shè)計(jì)手機(jī)應(yīng)用程序界面的過(guò)程很相似。但是這兩種媒介的開發(fā)有很大的不同。在設(shè)計(jì)模型時(shí)，您需要考慮每個(gè)特性的潛在缺陷和缺陷。

對(duì)于并不是所有瀏覽器都支持的較新的CSS3技術(shù)(例如:轉(zhuǎn)換、反射、剪貼路徑和屏蔽)尤其如此。雖然Photoshop和大多數(shù)其他設(shè)計(jì)程序都允許你在你的設(shè)計(jì)旁邊插入注釋，但當(dāng)你準(zhǔn)備一個(gè)主要的迭代時(shí)，沒有什么可以替代與開發(fā)人員進(jìn)行快速的可行性討論。

下面，您將找到一些我們最喜歡的免費(fèi)開源腳本，以幫助提高瀏覽器兼容性。這些資源在設(shè)計(jì)時(shí)可能不能直接幫助您，但在與開發(fā)人員協(xié)作時(shí)，它們無(wú)疑是一個(gè)重要的對(duì)話點(diǎn)。

即使您不了解這些腳本是如何工作的，您也應(yīng)該向您的開發(fā)人員提出它們。根據(jù)我們的經(jīng)驗(yàn)，我們發(fā)現(xiàn)開發(fā)人員很欣賞這種主動(dòng)姿態(tài)，而且不介意花時(shí)間解釋兼容性問題。畢竟，這對(duì)雙方都有好處，因?yàn)榘疽雇ǔＪ窃O(shè)計(jì)師和開發(fā)人員共同的痛苦。

由于主頁(yè)是整個(gè)站點(diǎn)的門戶，所以它的設(shè)計(jì)可能需要花費(fèi)最大的精力，但是您也需要對(duì)內(nèi)頁(yè)應(yīng)用同樣的精確度。

在一些大公司，由于嚴(yán)格的內(nèi)部流程，項(xiàng)目經(jīng)理要求每個(gè)頁(yè)面都有完整的模型。在其他公司，一些開發(fā)人員可能有設(shè)計(jì)經(jīng)驗(yàn)，允許他們從一個(gè)模型構(gòu)建多個(gè)相似的頁(yè)面(為您節(jié)省更多的時(shí)間來(lái)處理獨(dú)特的頁(yè)面)。根據(jù)公司協(xié)議調(diào)整模型細(xì)節(jié)的級(jí)別。

現(xiàn)在，讓我們研究一些模型元素的開發(fā)注意事項(xiàng)。

一個(gè)敏銳的圖形設(shè)計(jì)的感覺是需要的偉大的模型設(shè)計(jì)。

例如，即使兩個(gè)頁(yè)面僅以圖標(biāo)的不同來(lái)區(qū)分，最安全的選擇仍然是創(chuàng)建兩個(gè)獨(dú)立的原型以避免任何混淆。大多數(shù)時(shí)候，你會(huì)發(fā)現(xiàn)創(chuàng)建所有的內(nèi)頁(yè)然后分別導(dǎo)出圖標(biāo)更安全——這樣，開發(fā)者可以訪問單獨(dú)的圖標(biāo)圖像和頁(yè)面設(shè)計(jì)作為參考材料。

圖片來(lái)源:圖標(biāo)設(shè)置在UXPin

在結(jié)束你的模型設(shè)計(jì)之前，按照這個(gè)檢查表來(lái)看看你是否遺漏了什么。下面是一些需要檢查的事情的快速列表:

在較大的項(xiàng)目中，我們建議包含一個(gè)簡(jiǎn)短的開發(fā)人員說(shuō)明文檔。一定要澄清與筆記相關(guān)的參考模型(和頁(yè)面部分)。如果你在UXPin中工作，你可以在預(yù)覽模式下給設(shè)計(jì)本身添加一個(gè)注釋，或者你也可以上傳一個(gè)單獨(dú)的文檔到你的項(xiàng)目文件夾中。

圖片來(lái)源:通過(guò)UXPin進(jìn)行合作

手機(jī)應(yīng)用程序模型必須考慮橫向和縱向視圖，而網(wǎng)站必須支持從智能手機(jī)到寬屏顯示器的任何尺寸的任何視圖。

如果您的設(shè)計(jì)是為了響應(yīng)，那么我們建議為每個(gè)斷點(diǎn)創(chuàng)建不同的模型，以向開發(fā)人員展示如何適應(yīng)布局。

考慮以下幾個(gè)改變:

沒有正確或錯(cuò)誤的答案，因?yàn)槊總€(gè)項(xiàng)目都需要單獨(dú)處理。

當(dāng)有疑問時(shí)，Luke Wroblewski所倡導(dǎo)的“移動(dòng)優(yōu)先”方法總是一個(gè)好的起點(diǎn)(一旦你完成了最初的用戶研究)。圍繞最小屏幕尺寸的內(nèi)容進(jìn)行設(shè)計(jì)，然后隨著屏幕尺寸的增大而增大。通過(guò)首先構(gòu)建基本內(nèi)容，您確保了更愉快的與設(shè)備無(wú)關(guān)的體驗(yàn)。

要準(zhǔn)備過(guò)渡到開發(fā)，請(qǐng)確保正確標(biāo)記響應(yīng)式模型。文件名必須包括響應(yīng)斷點(diǎn)(以像素為單位)以及其他重要細(xì)節(jié)(修訂日期、草案編號(hào)、視網(wǎng)膜屏幕等)。

您的目標(biāo)是針對(duì)每一種可能的情況進(jìn)行設(shè)計(jì)，這樣開發(fā)人員就不必去思考了。

與往常一樣，如果您不確定如何交付某個(gè)內(nèi)容，只需詢問其中一個(gè)開發(fā)人員他們喜歡哪種格式。保持溝通渠道暢通，減少問題，避免混亂。

數(shù)字設(shè)計(jì)程序有很多形式，從Adobe Photoshop到Fireworks和流行的新人SketchApp。盡管功能不同，但在這些不同的應(yīng)用程序中，總體的模型設(shè)計(jì)過(guò)程仍然相對(duì)統(tǒng)一。

下面的技巧是針對(duì)為開發(fā)人員創(chuàng)建模型資產(chǎn)的設(shè)計(jì)人員的。其中一些想法表面上很容易被忽視，但是當(dāng)需要編寫代碼時(shí)，它們就會(huì)產(chǎn)生巨大的不同。

掌握任何設(shè)計(jì)程序都需要時(shí)間，而轉(zhuǎn)換工作流程也會(huì)讓人望而卻步。但是一旦你嘗試將這些技巧融入其中，它們就會(huì)成為你的第二天性。當(dāng)您在設(shè)計(jì)時(shí)考慮到開發(fā)人員，這會(huì)使每個(gè)人的工作變得更容易。

下面是我們這些年學(xué)到的一些最佳實(shí)踐:

更多實(shí)用的技巧，我們推薦Photoshop禮儀網(wǎng)站，其中包括幾十個(gè)主題的建議，如效果，圖層組織，排版。要了解更多關(guān)于模型的解剖和過(guò)程，請(qǐng)查看模型的免費(fèi)指南。

每個(gè)開發(fā)人員至少應(yīng)該了解版本控制系統(tǒng)，它就像存儲(chǔ)腳本、數(shù)據(jù)庫(kù)或整個(gè)網(wǎng)站以前版本的數(shù)字檔案。除了組織文件之外，版本控制對(duì)于回滾更改或比較兩個(gè)(或多個(gè))文件之間的差異也很有用。

盡管版本控制主要用于編程，但在設(shè)計(jì)社區(qū)中也有一些人使用它。雖然基于設(shè)計(jì)的版本控制還很新，但是有一些很好的資源可用。Pixelapse是一個(gè)在線存儲(chǔ)應(yīng)用程序，用于管理云中的設(shè)計(jì)文檔。雖然GitHub主要是一個(gè)代碼存儲(chǔ)平臺(tái)，但他們最近增加了對(duì)PSD文件的支持。

現(xiàn)在，設(shè)計(jì)者可以使用GitHub作為他們自己的PSDs版本控制系統(tǒng)。當(dāng)然，該站點(diǎn)是開源的，對(duì)于私有企業(yè)項(xiàng)目來(lái)說(shuō)可能不是一個(gè)很好的選擇——但它是一個(gè)練習(xí)和學(xué)習(xí)版本控制的好方法。

下面是一些以設(shè)計(jì)為中心的版本控制的替代方案:

Photoshop和Sketch都支持各種各樣的插件來(lái)自動(dòng)化任務(wù)和改進(jìn)典型的設(shè)計(jì)流程。盡管Sketch是建立在網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)之上的，Photoshop有更多的插件選擇，僅僅是因?yàn)樗嬖诘臅r(shí)間更長(zhǎng)，關(guān)注的任務(wù)范圍更廣(照片編輯、打印工作、UI設(shè)計(jì)等)。

圖片來(lái)源:Pixabay。CC0公共領(lǐng)域。

我們?yōu)閺念^創(chuàng)建界面的UI設(shè)計(jì)人員選擇了以下插件。與傳統(tǒng)的工作流程相比，這些插件將幫助你用更少的時(shí)間和精力實(shí)現(xiàn)像素完美的模型。

模型和高保真原型的創(chuàng)建是設(shè)計(jì)團(tuán)隊(duì)在開發(fā)人員接管之前的最后一個(gè)主要任務(wù)。為了讓你的設(shè)計(jì)在過(guò)渡期間保持在正常的軌道上，提供盡可能多的資源并澄清一切。正如我們之前建議的那樣，過(guò)度澄清總比不充分澄清要好。

圖片來(lái)源:我是沃爾什。知識(shí)共享。

在設(shè)計(jì)模型時(shí)要考慮到開發(fā)人員，這樣你就可以不斷地對(duì)現(xiàn)實(shí)進(jìn)行檢查。當(dāng)你從自己的例行程序轉(zhuǎn)向?qū)﹂_發(fā)人員更友好的過(guò)程時(shí)，這絕對(duì)是令人沮喪的。但是，當(dāng)你作為一個(gè)更大的團(tuán)隊(duì)的一部分在設(shè)計(jì)項(xiàng)目中工作時(shí)，最好是在流程上妥協(xié)，而不是由于溝通上的失敗而在設(shè)計(jì)上不必要地妥協(xié)。

要了解更多與開發(fā)人員協(xié)作的技巧，請(qǐng)查看免費(fèi)的設(shè)計(jì)人員與開發(fā)人員協(xié)作指南。在70多個(gè)頁(yè)面中，您將獲得包括開發(fā)人員在設(shè)計(jì)的所有不同階段的真實(shí)建議:規(guī)劃功能、線框圖、原型、原型和測(cè)試。