走橋流產品企畫術
編輯歷史
| 時間 | 作者 | 版本 |
|---|---|---|
| 2014-10-23 17:59 – 18:31 | r493 – r738 | |
顯示 diff 走橋流產品企畫術
- 如何以邊走邊橋 workaround 的方式在 g0v 規劃軟體專案
+ 如何以邊走邊橋 (walk-around) 的方式在 g0v 規劃軟體專案
+
+ walk-around step by step
*step 1 想像第一眼要給 user 看到什麼？於是畫了首頁的 wireframe
（14 行未修改）
*data / api
- 註：如果在 step 7 跟 step 8 之間卡住，通常代表專案規模太大，需要出動次元斬切割成幾個不同的模組
+ 註：
+ *如果在 step 4 跟 step 5 之間卡住，通常代表腦內的 ui library 沒建好，需要一邊思考自己想要的功能，一邊翻閱 semantic ui 、jquery ui 、android design guide 、apple human interface guidelines 的 ui component 範例，尋找可以套用到這個功能上的元件，每次找到，就會在腦內建立一個功能-元件連結。幾次以後腦內的 ui library 會漸漸成形，開始不需要看範例就能想像什麼功能要用哪個 ui component。
+ *如果在 step 7 跟 step 8 之間卡住，通常代表專案規模太大，需要出動次元斬將專案切割成幾個不同的模組。
wireframe / flow chart tools
（9 行未修改）
user story format
- k
+ justin style
+ kktix style
+ socialtext style
+ freestyle：只有 socialtext style 的 nested checklist，使用者即自己的狗食適用
|
||
| 2014-10-23 17:59 | r492 | |
顯示 diff（35 行未修改）
|
||
| 2014-10-23 17:57 – 17:59 | r451 – r491 | |
顯示 diff（3 行未修改）
*step 1 想像第一眼要給 user 看到什麼？於是畫了首頁的 wireframe
*step 2 但是從首頁按鈕點進去內頁以後要幹嘛呢？此時腦袋就會開始一片空白
- *step 3 於是只好乖乖畫流程圖，邊畫邊想使用者會先這樣、然後會那樣…
+ *step 3 於是只好乖乖畫流程圖或者寫 user story，邊畫邊想使用者會先這樣、然後會那樣…
*step 4 畫了一兩幅流程圖，突然覺得自己看到一束光
*step 5 於是又回到 wireframe，把流程圖裡的功能變成按鈕跟頁面區塊塞進來
（4 行未修改）
*step 10 兜完 html 跟 css 以後，因為沒資料於是又卡住
*step 11 於是開始弄資料，比較沒種的手刻假 json，比較有種的直接幹 api 出來
- *wireframe ←→ flow chart
+ *wireframe ←→ flow chart / user story
* ↓
*html mockup
（3 行未修改）
註：如果在 step 7 跟 step 8 之間卡住，通常代表專案規模太大，需要出動次元斬切割成幾個不同的模組
- wireframe tools
+ wireframe / flow chart tools
*手繪
（5 行未修改）
*google docs drawing
- flow chart tools
+ user story format
- #
+ k
|
||
| 2014-10-23 17:57 | r450 | |
顯示 diff（35 行未修改）
|
||
| 2014-10-23 17:57 – 17:57 | r447 – r449 | |
顯示 diff（30 行未修改）
*google docs drawing
- https://g0v.hackpad.com/EkSC4a4fgkC
+ flow chart tools
+
+ #
|
||
| 2014-10-23 17:57 | r446 | |
顯示 diff（33 行未修改）
|
||
| 2014-10-23 17:57 – 17:57 | r430 – r445 | |
顯示 diff（30 行未修改）
*google docs drawing
- f
+ https://g0v.hackpad.com/EkSC4a4fgkC
|
||
| 2014-10-23 17:57 | r429 | |
顯示 diff（33 行未修改）
|
||
| 2014-10-23 17:56 – 17:57 | r382 – r428 | |
顯示 diff（20 行未修改）
註：如果在 step 7 跟 step 8 之間卡住，通常代表專案規模太大，需要出動次元斬切割成幾個不同的模組
- wireframe tool
+ wireframe tools
*手繪
*windows journal
*linux xournal
- #
+ *拉框
+ *moqups
+ *libreoffice draw
+ *google docs drawing
+
+ f
|
||
| 2014-10-23 17:56 | r381 | |
顯示 diff（28 行未修改）
|
||
| 2014-10-23 17:55 – 17:56 | r365 – r380 | |
顯示 diff（23 行未修改）
*手繪
- -
+ *windows journal
+ *linux xournal
+ #
|
||
| 2014-10-23 17:55 | r364 | |
顯示 diff（26 行未修改）
|
||
| 2014-10-23 17:55 – 17:55 | r353 – r363 | |
顯示 diff（21 行未修改）
wireframe tool
- -
+
+ *手繪
+ -
|
||
| 2014-10-23 17:55 | r352 | |
顯示 diff（24 行未修改）
|
||
| 2014-10-23 17:41 – 17:55 | r78 – r351 | |
顯示 diff（1 行未修改）
如何以邊走邊橋 workaround 的方式在 g0v 規劃軟體專案
- wireframe ←→ flow chart
- ↑↓
+ *step 1 想像第一眼要給 user 看到什麼？於是畫了首頁的 wireframe
+ *step 2 但是從首頁按鈕點進去內頁以後要幹嘛呢？此時腦袋就會開始一片空白
+ *step 3 於是只好乖乖畫流程圖，邊畫邊想使用者會先這樣、然後會那樣…
+ *step 4 畫了一兩幅流程圖，突然覺得自己看到一束光
+ *step 5 於是又回到 wireframe，把流程圖裡的功能變成按鈕跟頁面區塊塞進來
+ *step 6 等流程圖裡有的功能都塞進 wireframe 以後，又不知道接下來要幹嘛了
+ *step 7 於是又回去畫流程圖
+ *step 8 反覆幾次以後，有天突然覺得很煩，整件事情不就這樣而已嗎我幹嘛搞那麼久咧？
+ *step 9 於是開了 repo 不管三七二十一直接兜 html 跟 css
+ *step 10 兜完 html 跟 css 以後，因為沒資料於是又卡住
+ *step 11 於是開始弄資料，比較沒種的手刻假 json，比較有種的直接幹 api 出來
+ *wireframe ←→ flow chart
+ * ↓
+ *html mockup
+ * ↓
+ *data / api
+
+ 註：如果在 step 7 跟 step 8 之間卡住，通常代表專案規模太大，需要出動次元斬切割成幾個不同的模組
+
+ wireframe tool
+ -
|
||
| 2014-10-23 17:41 | r77 | |
顯示 diff（5 行未修改）
|
||
| 2014-10-23 17:40 – 17:41 | r41 – r76 | |
顯示 diff（1 行未修改）
如何以邊走邊橋 workaround 的方式在 g0v 規劃軟體專案
- 案例
+ wireframe ←→ flow chart
+ ↑↓
|
||
| 2014-10-23 17:40 | r40 | |
顯示 diff（4 行未修改）
|
||
| 2014-10-23 17:39 – 17:40 | r4 – r39 | |
顯示 diff- 走瞧流產品企畫術
+ 走橋流產品企畫術
+ 如何以邊走邊橋 workaround 的方式在 g0v 規劃軟體專案
+
+ 案例
|
||
| 2014-10-23 17:39 | r3 | |
顯示 diff（1 行未修改）
|
||
| 2014-10-23 17:38 – 17:39 | r1 – r2 | |
顯示 diff- Untitled
-
- This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
+ 走瞧流產品企畫術
|
||
| 2014-10-23 17:38 | r0 | |
顯示 diff+ Untitled
+ This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
|
||