新手線框圖指南 - Web Design

a simple example of a wireframe showing a menu hover state this reduces the possibility of. 線框圖之所以重要，還由於設計師可以不考慮顏色、 ... 7days ofunlimitedWordPressthemes,plugins&graphics-forfree!* Unlimitedassetdownloads! Start7-DayFreeTrial DismissSignInHow-ToTutorialsDesign&IllustrationCodeWebDesignPhoto&VideoBusinessMusic&Audio3D&MotionGraphicsGameDevelopmentComputerSkillsCoursesDesign&IllustrationCodeWebDesignPhoto&VideoBusinessMusic&Audio3D&MotionGraphicsGuidesDesign&IllustrationCodeWebDesignPhoto&VideoBusinessMusic&Audio3D&MotionGraphicsGameDevelopmentComputerSkillsEnvatoElementsEnvatoStudioCommunityHelpEnvatoElementsEnvatoStudioCommunityForumHelpSignInHow-ToTutorialsDesign&IllustrationAdobePhotoshopAdobeIllustratorDrawingAdobeInDesignPhotoManipulationGraphicDesignTextEffectsVectorPhotoshopActionsIconDesignMoreCategories...LearningGuidesCodeJavaScriptWordPressMobileDevelopmentPHPLaravelCMSSwiftAndroidSDKReactAngular2+MoreCategories...LearningGuidesWebDesignCSSHTML&CSSAnimationUIDesignAdobePhotoshopSketchWorkflowDesignTheoryJavaScriptUXMoreCategories...LearningGuidesPhoto&VideoPhotographyVideoEditingHow-ToInspirationLightingAdobePhotoshopAdobeAfterEffectsAdobePremiereProAdobeLightroomMoreCategories...LearningGuidesBusinessSmallBusinessEntrepreneurshipFreelanceCareersMarketingFinanceProductivityPlanningCommunicationHow-ToMoreCategories...LearningGuidesMusic&AudioAudioProductionLogicProGeneralMixing&MasteringSoundDesignWorkshopsReasonRecordingAbletonLiveCubaseMoreCategories...LearningGuides3D&MotionGraphicsAdobeAfterEffects3D3DStudioMaxMotionGraphicsMayaCinema4DWorkflowBlenderVisualEffectsRoundupsMoreCategories...LearningGuidesGameDevelopmentGameDesignPlatformAgnosticGameMechanicsBusinessProgrammingGameArtLevelDesignFromScratchUnityHTML5MoreCategories...LearningGuidesComputerSkillsOSXAppTrainingProductivityHow-ToTips&ShortcutsCustomizationAutomationSecurityHardwareMicrosoftPowerpointMoreCategories...LearningGuidesCoursesDesign&IllustrationCodeWebDesignPhoto&VideoBusinessMusic&Audio3D&MotionGraphicsGuidesDesign&IllustrationCodeWebDesignPhoto&VideoBusinessMusic&Audio3D&MotionGraphicsGameDevelopmentComputerSkillsAdvertisementWebDesignWireframing新手線框圖指南AdvertisementAdvertisementAdvertisementAdvertisementAdvertisement WinnieLim Sep16,2020 ReadTime: 1min العربية/عربي Български বাংলা Deutsch English Español Français हिंदी Magyar BahasaIndonesia Italiano 한국어 Melayu Português Pусский українськамова TiếngViệt 中文（简体） 中文（繁體） WireframingUIDesignGridsAdobeIllustratorAdobePhotoshopFigmaThispostispartofaseriescalledUXFoundations.FirstStepsinYourUserExperienceWorkflow:NascentUXABeginner’sGuidetoWireframinginOmnigraffleChinese(Traditional)(中文（繁體）)translationbyStypstive(youcanalsoviewtheoriginalEnglisharticle) 線框圖對任何的的可視化設計過程來說都是非常重要的一步。

線框圖可以幫助你定義設計的信息層級，更容易根據你希望用戶處理信息方式來展示佈局。

如果你還沒會使用線框圖，現在你該開始來點真格的了。

就像建設藍圖一樣，在真正蓋房子之前，先用二維的黑白對話框來設計它。

和屏幕上的設計一樣，在不清楚信息怎樣處理的情況下你不能直接用PS開始設計，或者直接就開始寫代理。

從更深的級別來說，一個線框圖對確定用戶和界面是如何交互也是非常有幫助的。

比如，線框圖可以包括多按鈕或菜單的不同狀態。

線框圖之所以重要，還由於設計師可以不考慮顏色、樣式，而集中界面的佈局和交互上。

我跟我的客戶會這樣說：如果一個用戶在黑白線框圖下都搞不清楚該如何使用，那加上顏色就更不用說了。

按鈕不使用發光或明亮的顏色，也必須足夠醒目。

就像房基一樣，在你開始加顏色之樣，線框圖基礎必須足夠強大。

第一步：獲取靈感 一圖胜千言，在具體操作之前，先去看下I♥wirefames。

你可以馬上就看到並直觀地了解到其他設計師是怎樣處理線框圖過程的。

還可以試試這個有趣的瀏覽器書籤：Wirify可以幫你看到任何網站的"線框"版。

只要你不斷地觀察其他的設計師或者網站的線框圖，你逐漸就會明白線框圖是如何在屏幕上進行信息組織的。

第二步：設計你的流程 設計一個有機組合的過程，不同設計師處理線框圖的方法，以及把線框圖轉換為界面或代碼的方法都可能是不一樣的。

你需要做的就是運用自己的優勢，找出你用起來最順手的流程。

下面是幾種常見的流程圖。

37signals以使用草圖然後直接開始編程而聞名，儘管如此，他們的設計師有些也會在流程中使用視覺原型工具。

對我來說，我對先設計再編輯的流程再熟悉不過了，已經形成某種精簡過的流程。

有些人可能沒有想到，不過我會去考慮應該在項目中使用何種html/css框架。

比如，我都是在Blueprint網上建站，因此我會在線框圖和藍圖中都設計相同的12列的網絡。

由於不用在我的css樣式表中與每個元素的寬度（它們現在是預定義為1到2個列寬帶），這也適當地節省了原型和開發時間。

我現在使用cssgrid（因為它的交互性設計支持不錯），不過它同樣設置了一個12列的網格，你也可以下載下來作為PS模板。

如我所說，採用何種流程取決於你，有時你需要先試上那麼幾次，然後你才會發現這種方式更有效率。

有些人擅長畫草圖，他們可能根本就不考慮使用線框圖工具。

有些設計師則會每步都做，這樣在設計開始到成形的過程中可以避免產生誤差，然後每個迭代都想得很清楚。

你以後會找到自己順手的方式，不過就本教程而言，我會以我自己的習慣作為例子。

我之所以經常使用Illustrator作為我的線框圖工具主要是三個原因。

Styles-你可以保存樣式，然後樣式還可以到處復用，就像CSS一樣。

它很容易修改、移動或者縮放多個物體。

後期容易轉到PS處理。

不過我也會根據項目需求使用其他的工具。

我在下一部分會大概列出其中一些工具名稱，以及他們的優缺點。

第三步：挑選工具 下面是一些常用的工具，排名不分先後。

Balsamiq Balsamiq作為線框工具開始流行起來，主要是因為用Balsamiq做出來的原型帶有手繪風格，一看就能明白線框圖並不是一個成品，而是中間品。

Balsamiq擁有非常龐大的可複用的組件庫，你可以很容易地拖拽設計線框圖。

任何平台都能使用，MAC\WINDOWS\LINUX都有桌面版，如果你喜歡在雲端工作，它也提供了WEB版。

象iMockups等IOS的第三方app，也同樣支持Balsamiq導出的格式。

Omnigraffle 是一個很老的Mac平台的應用，Ominigraffle同樣支持多種用戶創建的可複用的組件庫。

因為它是作為一種圖表應用而專門開發的，Ominigraffle有著複雜的功能，比如自動對齊、定制物體樣式，智能參考線和圖片工作。

其中一些功能在AdobeCS套件也提供，不過如果你沒有CS套件的話，Ominigraffle作為可生成細節線框圖的工作，性價比也相當不錯（約100差不多左右）。

Axure 它差不多是線框圖工具的鼻祖，Axure是最早的專門級線框/原型工具之一。

直到最近，Axure也只有Windows版。

我個人使用Axure經驗不多，不過工業專業人士已廣泛使用。

Flairbuilder 是個新成員，Flairbuilder對交互性的支持也比較強。

它同樣有著龐大的組件庫，支持母板頁，你可以輸出可在線查看的原型。

在線應用 如果桌面應用不是你的菜，也有像mockflow\hotgloo\mockingbird這樣的工具。

Keynote/Powerpoint Keynotopia將你最喜歡的表現應用轉換為快速原型工具以創建手機端、web端和桌面應用原型。

對非MAC用戶也別著急，Keynotopia同樣支持powerpoint模板。

我個人非常推薦這個工具，如果你希望快速製作線框圖或原型的話。

還有一個不錯的選擇叫做KeynoteKungfu。

AdobeCS 對那種非常熟悉Adobesuite的人來說，Fireworks,illustrator和Indesign都是非常強大的線框圖工具，同時他們也各有長處和不足。

Fireworks. 你可以用Fireworks處理所有的設計流程，從最開始的線框圖到最後的完整視覺效果。

Fireworks支持母板頁（就如同可複用的模板，如果你修改了母板，那其他調用母板的所有子頁面都會實時生效)和元素庫。

你也可以用Fireworks相對快一點地來製作交給原型。

Illustrator 這是我個人最喜愛的工具，因為我對它已經非常熟悉了，我也確認許多設計師都會對它非常熟悉。

當我想做一個快速但複雜的線框圖，但不需要有交互性的時候， 我會選擇Illustrator，它憑幹什麼致勝？它可以導出能編輯層、強大的拷貝粘貼至PS的功能，以及強大的印刷控制。

同時對類型樣式控制強大，你可以保存、編輯和復用，就像CSS一樣。

Indesign 優點和Illustrator差不多，印刷樣式控制功能甚至更強一些，強大的母板頁功能，最近會增加交互原型功能。

當我製作交互性的多多頁面原型時，我會選用Indesign。

對我來說唯一不方便的就是導出功能太弱了，不支持PS，無法視覺設計。

Protoshare 功能強大，容易使用。

最近發布版本9，新的所見即所的調色板。

值得一探究竟。

第四步：設置網格 關於網絡系統有非常多的理論，但不要深究，我將其解釋為“一個結構化的放置元素的簡單辦法”。

本教程裡我會用Illustrator來進行說明，你可以應用到其他自己的工具裡。

首先，設置文檔尺寸。

我使用1280*900，因為我將會用cssgrid，它能夠讓我的網頁根據手機端或最大到1140像素進行自動調整。

將從cssgrid下載的模板放在你的文檔裡。

小技巧： 可供下載的網格模板非常多，如果你對定制自己的網格模板感興趣的話，可以看下responsify.it. 第五步：用箱體來進行佈局 在網格上先畫出箱體。

考慮好你想展示給用戶看到的信息順序。

從上而下最為容易，接著從左到右。

下面是一個線框圖的例子，是現在軟件公司最常用的佈局。

有時，取決於你的目標，和你設計的對象，你對佈局發揮些創意，但始終要牢記住信息的層級關係。

這是我的一個客戶真實的案例，我打破了常規的技術公司的網絡佈局慣例。

這是一個博客的佈局，細心考慮了廣告排位，以及給客戶的詳細說明。

第六步：使用字體定義信息層級關係 對箱體佈局擺放確定後，開始加入主一些內容，感覺下信息是否組織良好。

首個規則還是一樣：就算在黑白線框圖上，你希望帶給觀眾看到的信息必須清晰。

簡單使用不同的字體大小來區分不同級別的信息是個不錯的辦法。

在這個階段不要害怕做實驗。

有時，你填進的細節越多，你就越能意識到最初的佈局是否作有用。

這是整個線框圖流程的，盡可能多地迭代，為了縮小最好的辦法，展示你想和用戶交流的信息。

在下面的例子裡，我決定把屏幕截圖部分做得晚大些，我也開始使用黑色箱體來定義網站上視覺最重要的部分。

第七步：用灰度來調優 使用全譜的灰度能幫助你決定你的元素的視覺力度，而不用選擇顏色。

事實上，這在後續的視覺設計流程也有幫助。

第八步：高保真線框圖 這步可選，不過如果你想不斷進步，也許你會希望試一試。

高保真線框圖簡單加更多的細節，盡可能地多，不用細緻到視覺設計。

實際尺寸到線框圖裡，試圖明確完美的字體尺寸。

也會涉及到顏色。

通常觀點是視覺/編程階段你，而不是初階模式或是草圖。

執行迭代循環（反饋-》線框圖）盡可能快速地線框應用，用你最順手的，而不是在photoshop中移動層和像素。

也就是說，在某中場景下，跳過過多定義細節，直接進行交互原型階段(如37signals)會更好。

關於這個的爭論在於某個交互細節，不能在一個平面畫上進行充分討論。

如果你和開發團隊協作，你希望把完成的線框圖交給開發人員來編程，你接著做視覺。

第九步：把線框圖轉換為視覺圖 前面提過，我最喜歡使用Illustrator做線框圖的原因是因為我可以直接導出psd文件，絕大多數層都可編輯。

我使用PS時並不必過多編輯類型（事實上PS的類型編輯工作並不咋的，雖然CS6已經有所改進） 下圖是線框圖轉換為視覺圖的樣例。

線框圖的結構是原封不動的，只是調整後增強了視覺效果。

你可以直接查看網站 結論 到此為止我們的教程就結束了。

我希望可以鼓勵你開始實驗之旅！就任何設計流程而言，不要害怕迭代＼迭代＼迭代。

同樣，花些時間了解各種不同的工具和流程。

你可發現這個時間投資會很值，你可以找到符合你直觀的應用。

如有問題請留言，感謝閱讀。

相關資源 如果想了解線框圖更多資料，你可以查看這些資源： 35個優秀的線框資源 用AdobeFireworks做線框&原型－資源和教程 好設計更快(關於線框圖草圖） 50個免費的UI和網頁設計線框圖包，資源和資源文件。

雅虎！設計模板包 wireframes.linowski.ca Ｑuora:什麼是最好的線框圖設計工具 关注我们的公众号AdvertisementWireframingUIDesignGridsAdobeIllustratorAdobePhotoshopFigma Didyoufindthispostuseful? Yes No Wouldyouliketoprovidefeedback(optional)? Cancel Submit Wantaweeklyemailsummary?Subscribebelowandwe’llsendyouaweeklyemailsummaryofallnewWebDesigntutorials.Nevermissoutonlearningaboutthenextbigthing.SignupWinnieLimIntegratedvisualdesignerspecializinginsimple,user-centricdesignsolutions. Scrolltotop Lookingforsomethingtohelpkickstartyournextproject? EnvatoMarkethasarangeofitemsforsaletohelpgetyoustarted. WordPressThemesFrom$13MagentoThemesFrom$17ECommerceWebsitesFrom$16HTML5TemplatesFrom$4 UnlimitedDownloadsFrom$16.50/monthGetaccesstooveronemillioncreativeassetsonEnvatoElements.Over9MillionDigitalAssetsEverythingyouneedforyournextcreativeproject.CreateBeautifulLogos,Designs&MockupsinSecondsDesignlikeaprofessionalwithoutPhotoshop.JointheCommunityShareideas.Hostmeetups.Leaddiscussions.Collaborate.QuickLinksExplorepopularcategoriesCuratedDesignAssetsBestCoolFontsInDesignMagazineTemplatesPhotoshopActionsInDesignNewsletterTemplatesInDesignTemplatesCuratedWebDesignAssetsResponsiveWordPressThemesWordPressThemesforConsultantsWireframeTemplatesBestShopifyThemesMasonryWordPressThemesWebThemes&TemplatesWPThemesHTMLTemplatesShopifyThemesBootstrapThemesFreeWordPressThemesVideoAfterEffectsTemplatesAppleMotionTemplatesVideoEffectsLowerThirdsStockFootagePlaceitLogoMakerVideoMakerDesignTemplatesFreeTemplatesMockupsCuratedVideoAssetsAfterEffectsSlideshowTemplatesPremiereProVideoIntroTemplatesFinalCutProTemplatesFinalCutProTitleTemplatesPremiereProVideoEffectsCuratedPresentationAssetsKeynotePitchDeckTemplatesGoogleSlidesBusinessTemplatesPowerPointPitchDeckTemplatesBestShopifyMobileThemesBestPresentationTemplatesFreeToolsImageResizerVideoCropperVideoToGifConverterElementsWordPressThemesStockImagesWebsiteTemplatesLogosFontsTuts+LearnJavaScriptPhotoshopTutorialsHowtoDrawHowtoUseWordPressHowtoUsePowerPoint