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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖片來源:通過UXPin進行合作

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

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

考慮以下幾個改變:

沒有正確或錯誤的答案，因為每個項目都需要單獨處理。

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

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

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

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

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

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

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

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

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

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

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

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

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

Photoshop和Sketch都支持各種各樣的插件來自動化任務(wù)和改進典型的設(shè)計流程。盡管Sketch是建立在網(wǎng)頁設(shè)計的基礎(chǔ)之上的，Photoshop有更多的插件選擇，僅僅是因為它存在的時間更長，關(guān)注的任務(wù)范圍更廣(照片編輯、打印工作、UI設(shè)計等)。

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

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

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

圖片來源:我是沃爾什。知識共享。

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

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