規劃Web應用程序

Question

我即將開始構建新的創業公司，所以我需要一些指導方針。

什麼是規劃網站的最佳方式？我不認爲「首先設計，然後是數據庫關係，然後開始開發」，但是「如何規劃應用程序的工作方式」？

是否有一些經過驗證的方法，比如使用某種工具或其他方法做網站「藍圖」的最佳方式？

我需要儘可能多的反饋，因爲人們可以給我，這對我來說非常重要。

鏈接，經驗，一切都歡迎=）

我想一些工具能夠得出類似

頁的過程 - 如果登錄 - 做 - 如果沒有登錄 - 這樣做2

Answer 1

寫下來。在一張紙上。在相關部件之間畫線。

沖洗並重復必要的操作。

我是認真的。工具，花哨圖表，流程圖對於管理來說都非常漂亮，但它們阻礙了真正瞭解你的應用程序的工作方式。如果它太複雜，你無法在一張紙上看到它們，做一個大的圖片視圖，然後做每個小節。

如果你可以得到一個巨大的白板或一塊屠夫紙，它甚至更好。出於某種原因，擁有大量工作空間對於解決問題來說是非常棒的。

Answer 2

我曾經做過很多規格的單詞......百頁以上。我不再相信這一點，因爲一旦你寫下來，它可能會改變（你的想法，特徵等）。相反，我建議你看看叫做SketchFlow的MS產品（它帶有Blend）。這使您可以快速，無需編寫任何代碼將工作線框，網站地圖和模擬對齊在一起。雖然您可以創建高保真度（它的功能和看起來非常接近真實的東西），但我建議您將注意力放在創建低保真模擬上。這些草圖樣式看起來像手繪UI元素。通過這種方式，您可以完全專注於您的產品的工作方式，而不用多說它的外觀。如果模擬出的「完成」太多，你會掛上「藍色大按鈕」綜合徵，人們更關心按鈕的外觀，而不太關心它的功能。

我寫了四篇關於線框，模擬ups等的文章，並提出了各種工具以及爲什麼選擇SketchFlow。然後我開始在SketchFlow中構建一個模擬。

http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-1.aspx

http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-2.aspx

http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-3.aspx

http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-4.aspx

希望這可以幫助你！

Answer 3

首先開發您的數據模型。即使你不願意使用UML，也要了解你的數據將如何表示。

想出一些用例來驗證您的數據模型。它不一定是完美的，但它應該是99％，以避免將來的痛苦。

一旦你有一個數據模型和用例，你的界面需要（在你的情況下，你的網站）將變得更加清晰。當然，我從純粹的後端角度來看待這一點。

一旦你有一個可行的界面，聘請一位好的UX專家爲你完成細節（工作流程和實際界面）。

Answer 4

這是一個很大的問題。我最好的建議是先從你的用戶身上思考，他們的目標是什麼等等，然後畫出一些人物角色。角色是描述將使用您的網站的典型人物。一旦你有你的角色，你可以開始計劃你的網站。

http://en.wikipedia.org/wiki/Personas

一旦你有你的角色，你可以計算出用戶的旅程 - 這些人基本上是流程圖，詳細說明用戶將如何實現你想幫助他們的任務。

http://www.boxesandarrows.com/view/an_introduction_to_user_journeys

從用戶出發，可以計算出你需要在一個網站地圖的形式來創建頁面。

http://en.wikipedia.org/wiki/Site_map

然後最後你可以算出來的頁面爲線框的內容。

http://en.wikipedia.org/wiki/Website_wireframe

有工具負載在那裏：PC和的OmniGraffle（http://www.omnigroup.com/applications/OmniGraffle/）爲Mac的Visio（http://office.microsoft.com/en-us/visio/FX100487861033.aspx）。這兩種工具都可以在網上免費下載網頁設計模板。還有一個很棒的在線工具叫做Balsamiq（http://www.balsamiq.com/products/mockups），它可以讓你擺放頁面而不必使用設計工具。首先，儘管筆和紙是您需要的唯一工具。

一旦這些細節進行排序，你可以開始考慮數據模型，圖形設計等等等等，但是這整個過程是迭代的，你可能會說將永遠不會結束:)

祝你好運！