當(dāng)我們?cè)谧鯝PP產(chǎn)品設(shè)計(jì)的時(shí)候，我經(jīng)常忘掉那些小界面。比如報(bào)錯(cuò)頁(yè)面，比如“正在連接到服務(wù)器請(qǐng)等待”等零碎兒，它們和主要界面的關(guān)系是怎么樣的，它們之間又是什么關(guān)系，象我這種沒(méi)有什么編程基礎(chǔ)的人來(lái)說(shuō)，經(jīng)常會(huì)忽略這些。所以當(dāng)我把產(chǎn)品設(shè)計(jì)交給程序員的時(shí)候，他們很容易迷失在我的產(chǎn)品邏輯中，我們不得不一次次的開(kāi)會(huì)，之后程序員們還不得不自己補(bǔ)全很多我遺漏的小頁(yè)面。這讓我很沮喪，也讓程序員們很沮喪。

所以我想做這么個(gè)小工具，只要你會(huì)一點(diǎn)HTML，就可以用它快速的表達(dá)APP的產(chǎn)品表現(xiàn)，你可以輕松的增減或挪移界面，也可以很方便的表達(dá)它們之間的互動(dòng)關(guān)系。

App Sketch大概的思路是，用一個(gè)Section來(lái)表達(dá)一個(gè)全屏的界面。整體有兩個(gè)維度：橫向是從左向右層層推進(jìn)的主界面，縱向是每個(gè)主界面可能產(chǎn)生的各種小頁(yè)面。各個(gè)界面之間的互動(dòng)關(guān)系通過(guò)超鏈接串起來(lái)。

最簡(jiǎn)單的用法，是引用一系列全屏（默認(rèn)是480*640，當(dāng)然你可以隨便改）的靜態(tài)圖片，每個(gè)Section放一張靜態(tài)圖片，然后你就可以看到他們的互動(dòng)關(guān)系然后隨手修改。它比Axure好的地方是很簡(jiǎn)單，你的思路不會(huì)因?yàn)槭褂妙~外的工具而被擾亂，還有就是你可以用自定義的CSS文件準(zhǔn)確的描述每個(gè)界面的細(xì)節(jié)，而且這些Css可以復(fù)用到成品的APP上，不會(huì)浪費(fèi)。

App Sketch在形態(tài)上就是一個(gè)html+JS的包，你下載后可以隨便怎么改。我做了一套默認(rèn)的APP風(fēng)格，你可以直接用，也可以改成自己喜歡的風(fēng)格。或添加你自己需要的css標(biāo)簽。

這個(gè)項(xiàng)目的發(fā)起人是我和我的同事張路。我是做市場(chǎng)的不懂編程，而且個(gè)性比較粗糙，所以你看到的這個(gè)工具現(xiàn)在也挺粗糙。不過(guò)這個(gè)工具對(duì)我挺有用，希望也對(duì)你有用。如果你有興趣，歡迎你一起來(lái)完善這個(gè)小工具。

快速生成APP產(chǎn)品設(shè)計(jì)的小工具下載：App-Style-20120524kk.zip