• 人人都是产品经理

    苏杰
    2013-04-26 14:12:06
    的啟蒙書是《贏在用戶:Web人物角色創建和應用實踐指南》。
    2013-04-26 14:17:23
    首先關註目標,任務其次:比用戶行為更重要的是行為背後的原因,多問問用戶為什麼這麼做。
    2013-04-26 14:17:04
    ▲鼓勵講故事:故事是最好的幫助設計師理解用戶的方法。
    2013-04-26 14:25:29
    學習統計學的知識,努力提高自己的水平。
    2013-04-26 14:35:50
    基於大用戶量比較合適,比如有一個按鈕不知道是放在頁面的左邊好,還是右邊好,而我們有10萬個用戶,那就先隨機挑選少量的用戶发布這個按鈕,1000個人放左邊,另外1000個人放右邊,然後過一段時間分析結果,再決定剩下的98%用戶該怎麼辦。很明顯,這也是讓用戶直接參與了設計,這樣低成本的方法讓很多傳統行業的同學羡慕不已
    2013-05-31 14:29:53
    刪除數據之前需要我確認,以免誤刪”,轉化分析以後,我們給出的產品需求可能是“數據回收站:刪除的數據進入回收站,如果是誤刪,用戶可以去回收站找回數據”
    2013-05-31 14:33:29
    分類:可以分為“新增功能、功能改進、體驗提升、Bug修复、內部需求”等
    2013-06-11 11:07:10
    按下面的公式估算出工作量:
    “工作量=(最樂觀+最悲觀+最可能)/3”

    “工作量=(最樂觀+最悲觀+最可能×4)/6”
    2013-06-11 11:11:22
    BRD:Business Requirements Document,商業需求文檔。這是產品生命周期中最早的文檔,其內容涉及市場分析、銷售策略、贏利預測等,通常是給大老板們演示的PPT,比較短小精煉,沒有產品細節,有點像創業者給投資人看的商業計划,主要為了获得認可,爭取資源
    2013-06-11 11:11:36
    MRD:Market Requirements Document,市場需求文檔。
    2013-07-24 05:54:36
    PRD:Product Requirements Document,產品需求文檔。PRD是對產品功能的進一步細化,是PD新人寫得最多的文檔,也就是我説的“需求開发”過程。文檔主要包含整體説明、用例文檔、產品Demo等,會對產品功能做具體描述,更多內容在下一節詳細講述。
    2013-07-29 15:23:27
    ▲狀態圖:State Diagram,表達系統里實體的狀態轉換,同樣也是貫穿多個用例的。如圖3-10所示描述的就是小明的狀態轉換。
    2013-06-14 19:01:55
    有人希望你寫得越詳細越好,而有人希望你交給他決定。後來我們漸漸總結出兩種做法。
    2013-07-21 16:11:56
    我們推崇每日“站立晨會”,會長小於20分钟,每個人只能説3個問題:昨天做了什麼?今天要做什麼?碰到什麼問題,打算如何解決,需要什麼幫助?
    2013-07-21 16:12:47
    我們的“冒煙測試”、“每日構建”就符合“尽早交付”的概念,可以讓需求方尽早看到最新的產品。
    2013-09-17 18:23:52
    我悄悄地告訴你,在現實中,也可能是因爲辦公區域沒有足夠的座位了。
    2013-09-17 18:33:52
    反饋:動作前的可預測、動作中的積极響應、動作後的可評估。比如網頁上的一個按鈕,我把鼠標移上去它的樣式有些改變,單擊以後馬上表現出被按下去的樣子,點擊完畢後告訴我後台的程序“正在查詢,請稍候”。
    容錯:一些貌似多餘的強制性設計,不可逆操作可以後悔。比如工業儀器上,設計師經常給一些重要的按鈕上加個蓋子,并且按下之後還需要再次確認。又如電腦USB接口的“防呆”設計,讓用戶只能從一個方向插入USB設備。對於錯誤的理解,我們要做到“用戶沒有錯,所有的錯都是設計的錯”。
    簡化:充分利用用戶已有的知識,利用心智模型,利用標準化,利用一切。比如現在各種軟件默認的复制、粘貼功能,圖標長得都很像,快捷鍵都是“Ctrl+C、Ctrl+V”
    2013-09-17 19:33:15
    接口人存在的價值
    接口人
    2013-09-17 19:37:50
    第一,在思維導圖上改畫出概念圖。用戶需求采集上來,我們或簡單轉化爲產品需求,或直接畫在一張思維導圖里。然後,開始整理這堆“亂七八糟”的東西,比如把各種需求做簡單的分類,把一些條目打上各種標記,把相關的需求連幾條線,寫一些註釋,就算完成最粗糙的概念圖了。
    第二,是找個會議室,用馬克筆在白板上畫出自己對將來產品概念的想法,完全不要受拘束,然後大家一起討論改進。這樣手繪的概念圖很酷,大家可以試試,畫完了拍下來,存到電腦上,有必要的話可以重新畫成更漂亮的電子版。
    2013-09-17 19:37:59
    產品與外界的關系
    2013-09-17 19:38:02
    產品內部的關系
    2013-09-17 21:21:14
    交互設計”之於“敏捷開发”,正如哲學里“對立統一”的概念,有點像楷書與草書,沒法評價哪個好哪個差,也許結合一下又出現了很贊的行書。
    2013-09-18 17:11:17
    但是在同一個產品中不統一的話,會給人不專業的感覺;導航菜單用詞的主謂、動賓結構不統一,經常看到同一個產品中同時出現主謂結構的“系統配置”和動賓結構的“管理客戶”等菜單;又如“保
    2013-09-20 12:59:35
    2009-2012年火力发電行業深度評估及市場調查研究发展分析報告》:紙介版7200元、EMAIL電子版7800元、兩個版本8000元。
    《2008年中國羊剪絨市場行情分析報告》:紙介版7900元、電子版8500、紙介版+電子版9000元。
    想一下,買最便宜的紙介版是不是很難受?買電子版吧,隨便打印一下也就有紙介版了。而雙版的價格遠遠低於前兩種版本的價格之和,考慮到產品特性,對於絕大多數不是
    2013-09-20 12:59:53
    一種是做功能區分,打細分市場,這個同學們都比較熟悉,比如筆記本的高中低端產品、手機的各種型號,不用多説。
    另一種是爲了促進銷售,利用消費者心理,純策略性地做出“炮灰版”,完全是和你玩虛的,常有手法如下。
    2013-09-20 13:19:17
    有價值觀(Value)作爲企業做事的最基本指導原則之後,我們就需要思考公司或產品的使命(Mission)和願景(Vision)。Mission是指“我們爲什麼而存在,要做什麼事情”,必須是一個持久的事實。而Vision是説“我們希望成爲什麼”,是完成Mission之後達到的境界,需要由組織內部的成員所制訂,借由團隊討論,获得組織一致的共識,形成大家願意全力以赴的未來方向。這些是我們做事的驅動力。
    2013-09-20 13:20:51
    一個常用方法叫做PEST分析,分別分析政治法律環境(Political Factors)、經濟人口環境(Economic Factors)、社會文化環境(Social Factors)、技術環境(Technological Factors)四個方面的機會和威脅,在這個層面上,根本不用去考慮具體的某個公司或產品,一些主要的細分因素如表5-1所示。
    2013-09-20 13:21:06
    我們知道經典的$APPEALS分析法,
    2013-10-12 21:26:17
    在現在的戰略規划報告里,SWOT分析應該算是一個眾所周知的工具。來自於麥肯錫咨詢公司的SWOT分析,包括分析企業的優勢(Strength)、劣勢(Weakness)、機會(Opportunity)和威脅(Threats)。

    多看筆記 來自多看閱讀 for iOS

    duokanbookid:40d9a4e625a611e2a3ca00163e0123ac 
  • 哭有多難,不哭才是最難的。

     

     

    深夜,聆聽熟悉的節奏,記憶中的詞語在心底穿梭。

    起伏,如同過去的事件一樣,因為過去了,所以才變得深刻。

     

     

    我們都不是可以在一起的人,只有那麼認識的機會。

    很難忘記過往發生的事情,每當深夜的時分,他總是在耳邊伴隨著音樂的節奏,在我心底中慢慢旋起。

    「糾結」。

     

     

    曲,第一個小節是在一個咖啡店之中,我第一次去,和好朋友第一次去。

    你在裡面,我在外面。

    看到我的模樣,聽見我的聲音。

    正如我今天一樣,只有存在記憶中的你,卻然無法對接上現在的你。

     

     

    疑惑中,為何能聽見男生的聲音。

    細緻的手指,握著咖啡的攪梆梆,自言自語。

    這就是,那天的你。

    我第一次看到你的模樣。

     

  • 推荐系统实践

    项亮
    2013-10-06 21:54:50
    向朋友咨詢
    2013-10-06 21:57:21
    電影的標題和海報。
    用戶反饋模塊——包括Play(播放)、評分和Not Interested(不感興趣)3種。
    推薦理由——因為用戶曾經喜歡過別的電影。
    2013-10-06 21:59:48
    。預測準確度是推薦系統領域的重要指標(沒有之一)。這
    2013-10-06 22:00:22
    所以,好的推薦系統不僅僅能夠準確預測用戶的行為,而且能夠擴展用戶的視野,幫助用戶发現那些他們可能會感興趣,但卻不那麼容易发現的東西
    2013-10-08 20:25:15
    他的基本意思就是,如果推薦結果和用戶的历史興趣不相似,但卻讓用戶覺得滿意,那麼就可以説推薦結果的驚喜度很高,而推薦的新穎性僅僅取決於用戶是否聽説過這個推薦結果。
    2013-10-08 20:26:16
    而增加推薦系統透明度的主要辦法是提供推薦解釋。只有讓用戶了解推薦系統的運行機制,讓用戶認同推薦系統的運行機制,才會提高用戶對推薦系統的信任度。
    2013-10-08 20:27:56
    推薦系統需要實時地更新推薦列表來滿足用戶新的行為變化
    2013-10-08 20:34:24
    基於用戶的協同過濾算法
    2013-10-08 20:41:17
    基於物品的協同過濾算法
    需要重新阅读

    多看筆記 來自多看閱讀 for iOS
    duokanbookid:ed873c9e323511e28a9300163e0123ac 
  • 我應該不會去寫這本書了。

    所以還是把大綱放出來給大家參考一下吧。 

    CSS3網頁框架大全

    【要求】

    (1)頁數在400-500頁。

    (2)全書案例都是一些炫彩的CSS框架,可以翻譯一些國外的。每張案例大概20頁。

    (3)第1章是CSS3的技術簡介,也別太多理論,以簡單案例為主。從第2章開始,每章是一個CSS3框架案例,先簡介下某框架,然后用此框架開發幾個網站模板,都要中文的。

    (4)全書的目錄標題要簡單,讀者一看就懂,不管讀者有沒有基礎都能看懂,這是關鍵。

    (5)提供開發過程中的疑難解答、調試問題、瀏覽器兼容技術,每章都有。

     

    【參考目錄】

    (1)目錄參考《HTML5游戲開發》一書

    http://product.china-pub.com/198661#ml

     

    本系列要出版的方向有HTML5+CSS3、CSS3、JavaScript組合案例、jQuery插件案例、HTML5移動應用案例、HTML5在線游戲案例、jQuery移動應用案例。

     

    您需要列大綱(確定寫作內容)--->寫10頁試試(根據出版規范寫作)--->出版社審批(提交作者表格和簡歷)--->簽訂合同

     

    一頁約 800 字, 包括圖片和代碼

     


    有用的link

     

     

       * http://www.gbin1.com/technology/html/2011111010handyhtml5css3frameworks/ 10个便利的HTML5/CSS3框架

       * http://www.iteye.com/news/20054  27 款经典的CSS 框架

       * http://www.webdeveloperjuice.com/2013/01/18/top-notch-css3-frameworks-worth-considering-for-website-design/ 8 Top Notch CSS3 Frameworks worth Considering for Website Design

       * http://webexpedition18.com/articles/responsive-css-frameworks/ 15 CSS Frameworks for Responsive Web Design

       * http://www.360doc.com/content/13/0110/01/21412_259269658.shtml

       * http://www.360doc.com/content/11/1126/12/8157240_167494521.shtml 

       * http://www.360doc.com/relevant/97354202_more.shtml 

     


    目錄

     

     

      1. 什麽是 CSS3

        1. CSS3 的定義

        2. 如何發展到 CSS3 版本并和過去版本的 CSS 比較

        3. CSS3 現在能做什麽

          1. 案例 A - iPad\iPhone 移動開發

          2. 案例 B - 和 HTML5 搭配開發「現代網站」

        4. 一些著名的 CSS 框架介紹

      2. 960Grid

      3. YUI 2: Grids CSS

      4. Blueprint 

      5. Twitter Bootstrap

        1. 簡介(Twitter 開發的,Twitter 亦基於 Bootstrap)

        2. 文檔

        3. 案例

        4. 擴展

          1. Bootswatch - 切換 Bootstrap UI 

      6. EZ-CSS (http://www.ez-css.org/)

      7. 高級的 CSS 開發技術

        1. LESS

          1. 簡介 LESS 如何使用

          2. Less Framework 4 http://lessframework.com/

        2. SASS

          1. 簡介 SASS 如何使用

        3. 對比分析 LESS 和 SASS 的優缺點

      8. 其他的一些 CSS 有益補充

        1. TYPO.CSS (CSS 中文排版)

        2. http://ethantw.net 的漢字標準格式

        3. Animate.css (CSS3 動畫庫)

        4. http://photon.attasi.com/ Photon CSS3 3D 光照引擎

        5. css3buttons https://github.com/michenriksen/css3buttons

      9. 使用 Javascript 來補充 CSS

        1. cssFX http://imsky.github.com/cssFx/ 自動添加prefix

      10. 有用的線上工具

        1. 

     

     

    待定是否介紹的框架

     

     

      1. thinkcss

     

     


    備註

    框架從 CSS3 的 css 文件集合開始介紹,到類似 Bootstrap 的多種集成框架,到 LESS、SASS 的編程式 CSS 開發介紹

    框架亦分 移動框架 和 桌面框架 兩個部份 , 最後介紹 自適應框架 .

     

     

      1. CSS Reset

      2. CSS 文件集合(動畫之類)

      3. 桌面框架(960gs\YUI\Bootstrap 等)

      4. 移動框架()

      5. 自適應框架

      6. LESS\SASS

     

     

    框架介紹方法

     

     

      1. 框架怎麼來

      2. 文檔 \ 技術支持

      3. 案例

     

  • 命名:

    pic

     

    圖標:

    pic

     

    下載規範文件:

  • 從 Mama 說起的前端優化

    Mama,是我一個興趣項目。

    網站截圖

    為什麼她需要前端優化呢?

    這是由於,在 1.1.4 版本中,她有一個新的功能「Line的表情」選擇。

    我一共下載了大約 800 個 LINE 的表情圖片,如果在舊的圖片添加方式上,我必須要如下操作 800 次才可以完成添加圖片。

    • 上傳圖片到 asset 目錄;
    • 添加一行 single.html 的代碼;
    • 修改 app.js 的代碼以確保顯示正確數量的文本輸入框;
    • 修改 photos.php 的代碼以確保位置正確;
    • 測試是否成功添加。

    如果我真的按照剛才的添加方法添加 800 的圖片,我不相信可以完成。所以,我決定重寫了 MAMA 的圖片添加方法。我做了什麼?

    • 新建了一個 output.php 的文件,用於檢查 pngs 的目錄內容。並且自動輸出 photos.json 文件以提供給 app.js 讀取。
    • app.js 讀取 photos.json 文件,自動創建對應的 HTML DOM 以顯示圖片。
    • 測試是否能夠正常工作。

    現在就變得很好,她終於可以不用手工修改代碼來實現添加圖片了。有一個簡單的腳本程序在維護。但是,這裡又引申出一個新的問題。圖片很多時候需要不同位置的輸入框,所以,我又給腳本作出修改,讓她能讀取一個對應的文件來自定義某些圖片。處理完圖片,其實,有些系列也就是有所不同的位置,如是,我給目錄也做出了基礎參數的支持。 image

    OK, very well. 一切看起來很好。
    如是,我就如此發佈了 1.1.4 的第一個版本。並且走去睡覺。

    解決 HTML DOM 性能

    在我睡醒之後,我總覺得伺服器訪問起來很緩慢,「添加分鏡」的功能需要等待大約 6 秒的加載時間,我在思考是不是一些什麼事情從而導致這個緩慢的問題。然而,我打開了 Safari 的「檢察元素」工具來分析這些載入時間的問題。

    image (我已經沒有當時的分析記錄的截圖了)

    然而,讓我驚訝的事情是,app.js 的腳本工作得很慢。特別它在請求 single.html 的時候,就有大約 6 秒的時間讓瀏覽器卡死。

    image

    如是,我開始思考這其中的原因。經過分析,我覺得這是讓 Javascript 做了太多的事情了,從 Ajax 獲得文本,到建立 HTML DOM,接著瀏覽器還要瞬間加載大約1000個圖片 。這一切,讓 Javascript 的性能遇到瓶頸了。

    第一步,我放棄了讓 Javascript 來自動建立 HTML DOM。我寫了另外一段代碼,使用 PHP 寫的。來完成 HTML DOM 的建立。

    image

    這樣的修改,「添加分鏡」這個功能就從 6 秒的等待時間,縮短到了 4 秒了。

    第二步,使用 LazyLoad 的辦法加載圖片。我繼續分析,我認為瞬間加載 1000 個圖片這個方法蠢死了。於是,我做出了少留修改,讓這1000個圖片使用 LazyLoad 的辦法載入。(上面的代碼片段已經包含了LazyLoad)

    第三步,過去的 Load 的辦法,我也修改為 get 的辦法image

    第四步,很理所當然地把所有的 PNG 文件都壓縮了一遍。

    很好,一切的速度的感覺回來了。

    現在,點擊「添加分鏡」按鈕只有大約 1 秒多的延遲,但是我暫時沒有辦法解決這個問題。除了還有這個問題,還有一個問題就是編輯窗口的圖片必須要等待小圖片的完整載入才可以開始載入。這個我相信是瀏覽器的下載線程導致的。

    這個筆記,關鍵在於有幾點:

    • 不要讓 Javascript 來處理 DOM 的事情(很慢)
    • 同時載入 N 個圖片是一個笨死的辦法
    • 能夠在服務器端完成,就不要在客戶端完成(能寫 PHP 就不要寫 Javascript)。
  • Safari 中文最佳化設定

    每天看著這麼多奇怪的中文字體的網站不難受嗎?

    不要讓自己難受了。

    使用 Safari 外掛這個腳本就可以糾正很多看起來不舒服的字體。

     

    Tips

    • Hiragino Kaku Gothic ProN 是我最愛的字體,但是他是一個日文字體,使用了 Hiragino Sans GB 在後補字。不喜歡請刪除「Hiragino Sans GB」字樣即可。
    • @font-face 系列用來是替換不美觀的字體。

     訪問 Github 以獲得此腳本。

     

     

  • 一些优雅的中文字体候选(图片):

     

    • 方正雅宋
    • 大明xxx

     

    浏览器兼容记录:

    • 12px 宋体是最通用的解决方法。
    • 当字体大小达到 17px 以上时候,将会开启ClearType以优化字体显示。
    • 将字体为 Segoe UI 时候,最合适于 Windows 的操作系统。
    • sans-senf 的字体标记也能表现不错,其使用 14px 时候也会启用 ClearType 优化。
    • 在 Chrome 下,最小字体为 12px 。

    picpic