這個 app 真是沒完沒了啊
算起來 wenku10 做了差不多五個月了,怎麼做都做不完啊。
從第一天的 wen8 基層代碼上的移植、到評估並實現直書功能、自定義排版設定,各種 bug 的修復,就這樣就了三個月……突然(?) wen8 掛掉了,重新定位這個 app 的發展方向,花了三天加入了本地閲讀功能;覺得不夠於是又花了半個月寫了 蜘蛛 ,又覺得這讓要啃生肉還是不多夠,又花了半個月増加了字典功能……
( wen10 的記錄,第一個 commit 我還在工作呢,辭職是從第一個「5 mouths ago」開始的。做了幾天我就開始打遊戲來著, 然後就「開工」不停地寫了。記錄真是好東西啊,這種回溯起來有種五味雜陳的感覺讓我好想哭… )
到現在這一刻,這個 app 要吸引我使用好像還差點什麼,啃生肉是沒問題了,就差了「分享感想及評論」這個跟「閲讀」本身沒什麼關係不過卻無可否認地很重要的功能。
在 3Ds Max 上的 Pflow 的 UI,來自幾年前的文章
現在 wen10 的 UI:
現在的設計比較傾向單向操作,可惜實際上某些步驟需要子步驟才能完成的。問題是當前的 UI 沒有辦法很好地呈現子步驟的方法,可惜要做得跟 Pflow 一樣的話,目前並沒有很多的 lib 提供像 flow chart 的畫圖方式。所以只好使用 xaml 裏面的 Canvas 來組圖了。
然後我就學起 Data Visualization 來了!
不過在寫之前,之得整合一下其它不滿意的地方。首先是只提拱「抓書」的方式好像不夠,得建立一種閲讀上的體驗才行。也就是說,每一本書單獨一只蜘蛛是不夠的。如果網站有提拱搜索的話,這邊也得「抓取」搜索的接口才行。
樣一來就能跟整個 app 廢掉了的操作流程扯上關係了。
……要做嗎?
呃,這個程度的確可以説是接近 Pflow 等級了,不過要讓用户懂得怎麼用可以需要寫教學了。問題是這個 app 不就是一個「簡單的」閲題器而已,有需要做到這個程度的必要嗎?再説現在的 impl 我相信也不會有多少個懂得用的。
可是看起來好帥,我好想做!做吧?
首先上面的是編輯器界面中的畫板部分,讀者(?)透過定義這個流程自動抓取各種資訊。
- 導航 ( Search / Navigations / Bookshelf ... )
在讀者看書之前,首先要做的就是選那一書本來看。然後這個過程稱為導航 ( Navigations ) ,他可以透過不同的方式抵逹某本書( point of interest ),例如通過不同的書籍分類、搜尋、書架等等找到想看的書。這都歸納為一個主要部分。
- 書頁 ( Book Info View )
這是關於這本書的詳細資訊,評論、統計、目錄會方為三個板塊顯示。理論上這也算是一種導航,不過因為閲覽這些東西的「時間」不夠,可以算是上一步驟的「解壓」版吧。
- 閲讀 ( Content Reader )
這裏就是正文了,沒什麼好説的。實際上這個部分的 impl 也差不多完善了。
目前 app 的最大好處就是劉覽器不會提供離線的功能吧。論譠的話更不用說書籤什麼的了。
當然指令上的 re-impl 難度不高,但界面上的「畫圖」方面就開始扯到數學上去了。説起來任何東西扯到數學難度就會跳升十倍。
===
不過在這之前我得先補齊這個 blog 一直缺失的 某個功能 T^T
從第一天的 wen8 基層代碼上的移植、到評估並實現直書功能、自定義排版設定,各種 bug 的修復,就這樣就了三個月……突然(?) wen8 掛掉了,重新定位這個 app 的發展方向,花了三天加入了本地閲讀功能;覺得不夠於是又花了半個月寫了 蜘蛛 ,又覺得這讓要啃生肉還是不多夠,又花了半個月増加了字典功能……
( wen10 的記錄,第一個 commit 我還在工作呢,辭職是從第一個「5 mouths ago」開始的。做了幾天我就開始打遊戲來著, 然後就「開工」不停地寫了。記錄真是好東西啊,這種回溯起來有種五味雜陳的感覺讓我好想哭… )
近況
就這樣很快地替入了開發的第五個月。真的快沒錢了,得隨便找個保安什麼的幹。做全職程序員的話,感覺可能會重蹈覆轍。在家工作的話,這五個月來我天天坐在床上坐得我感覺整個身體都好像收縮了。到現在這一刻,這個 app 要吸引我使用好像還差點什麼,啃生肉是沒問題了,就差了「分享感想及評論」這個跟「閲讀」本身沒什麼關係不過卻無可否認地很重要的功能。
檢討編輯器的 UX 及 UI
「評論」這個功能其實我想在蜘蛛上實現,所以稍微轉移一下焦點。但現在我又覺得蜘蛛的表現方式不太能體現各種步驟的關係,於是想做一個比較將 Pflow 的表現方式。在 3Ds Max 上的 Pflow 的 UI,來自幾年前的文章
現在 wen10 的 UI:
現在的設計比較傾向單向操作,可惜實際上某些步驟需要子步驟才能完成的。問題是當前的 UI 沒有辦法很好地呈現子步驟的方法,可惜要做得跟 Pflow 一樣的話,目前並沒有很多的 lib 提供像 flow chart 的畫圖方式。所以只好使用 xaml 裏面的 Canvas 來組圖了。
然後我就學起 Data Visualization 來了!
不過在寫之前,之得整合一下其它不滿意的地方。首先是只提拱「抓書」的方式好像不夠,得建立一種閲讀上的體驗才行。也就是說,每一本書單獨一只蜘蛛是不夠的。如果網站有提拱搜索的話,這邊也得「抓取」搜索的接口才行。
樣一來就能跟整個 app 廢掉了的操作流程扯上關係了。
重新整理指令概念
然後我花了點時間重新考慮新的 impl:……要做嗎?
呃,這個程度的確可以説是接近 Pflow 等級了,不過要讓用户懂得怎麼用可以需要寫教學了。問題是這個 app 不就是一個「簡單的」閲題器而已,有需要做到這個程度的必要嗎?再説現在的 impl 我相信也不會有多少個懂得用的。
可是看起來好帥,我好想做!做吧?
解説
嘛,實用性什麼的先櫚在一邊,來討論一下我畫了些什麼:首先上面的是編輯器界面中的畫板部分,讀者(?)透過定義這個流程自動抓取各種資訊。
架構
整個 app 可以分為三節:- 導航 ( Search / Navigations / Bookshelf ... )
在讀者看書之前,首先要做的就是選那一書本來看。然後這個過程稱為導航 ( Navigations ) ,他可以透過不同的方式抵逹某本書( point of interest ),例如通過不同的書籍分類、搜尋、書架等等找到想看的書。這都歸納為一個主要部分。
- 書頁 ( Book Info View )
這是關於這本書的詳細資訊,評論、統計、目錄會方為三個板塊顯示。理論上這也算是一種導航,不過因為閲覽這些東西的「時間」不夠,可以算是上一步驟的「解壓」版吧。
- 閲讀 ( Content Reader )
這裏就是正文了,沒什麼好説的。實際上這個部分的 impl 也差不多完善了。
實作上的問題
也就是説,蜘蛛要做的東西就是能夠提取網站的幾個接點,將其轉換成 app 的方式劉覽。前提是,這個 app 得提拱比網站更好的操作環境,不然做我直接上 web 版不就好了?目前 app 的最大好處就是劉覽器不會提供離線的功能吧。論譠的話更不用說書籤什麼的了。
當然指令上的 re-impl 難度不高,但界面上的「畫圖」方面就開始扯到數學上去了。説起來任何東西扯到數學難度就會跳升十倍。
問題一: 比例
首先物件座標跟不同屏幕的比例問題,直接取屏幕的座標是不可行的,因為在桌面的 24 寸 1920 x 1080 的屏幕上的圖片,在 6 寸的 1920x1080 手機看起來所有東西都會變得好小。問題二: 讀取及儲存
這是關於要怎麼儲存及讀取這個流程圖的數據。也就是説要定義各種型狀的接點及位置,怎麼有效地優化接點,讓重新渲染時手機不會卡。而且要準確重現上次狀態。問題三: 實際上要怎麼畫
説實話這是最難的部分了,舉個例,簡單的兩個方塊,一條線。裏面包含的算法可不是開玩笑的多。如果説要讓我用 AS3 寫一個出來應該非常簡單吧,可是基於 C# 的特性,要重現 AS3 能簡單實現的東西在 C# 上簡直難如登天。問題四: 如何實現會員功能及發表評論的方塊
這個要實現不難,但做的時候可能需要幾個「白老鼠」來測試。但這也不是問題,其實這東西無須増加任何方塊直接透過 Script 方塊實現。不過讀者當然不會寫了,反過來想,如果讀者知道什麼是 cookie 的話,可能已經懂 JavaScript 就是了。不過「Poster (暫定)」方塊還是要做的,也得考慮登陸本身是否含有 captcha 或者 JavaScript 等奇怪東西。最簡單的就是直接顯示整個界面,個登陸之後取得 cookie 進行操作了。結論
總之先由簡單開始做起吧,整個工程看起來很碩大,不過很多事都只是難在起步上面。===
不過在這之前我得先補齊這個 blog 一直缺失的 某個功能 T^T
Sat Feb 06 2016 18:47:41 GMT+0000 (Coordinated Universal Time)
Last modified: Sun Apr 10 2022 10:11:31 GMT+0000 (Coordinated Universal Time)
Comments
No comments here.
Do you even comment?
website:
Not a valid website
Invalid email format
Please enter your email
*Name:
Please enter a name
Submit
抱歉,Google Recaptcha 服務被牆掉了,所以不能回覆了