062013-2

用戶體驗(yàn)設(shè)計(jì)答疑對話（半吊子和純外行）

［總結(jié)］：在用戶的視角來看，我們也希望他看到的都是最簡單最愉悅的一面。作為客戶培訓(xùn)師，你不需要知道產(chǎn)品數(shù)據(jù)在我們后臺是存儲在什么服務(wù)器的。用戶搜索產(chǎn)品時，也更加不需要了解一個檢索詞是經(jīng)過了多少詞解析判斷計(jì)算，跑了幾臺服務(wù)器，最終把結(jié)果呈現(xiàn)給他的。但是作為工作人員，我們得了解需要怎么做，才能夠把最簡單最愉悅的結(jié)果呈現(xiàn)出來。（Heidi注：如圖5所示）

P1030876

圖5：簡明網(wǎng)站產(chǎn)品建設(shè)流程圖

這個圖呈現(xiàn)的流程，依賴于多個部門的通力合作。從戰(zhàn)略層高瞻遠(yuǎn)矚的判斷、從產(chǎn)品經(jīng)理對于市場的分析以及功能、內(nèi)容的規(guī)劃、描述，到用戶體驗(yàn)團(tuán)隊(duì)，開發(fā)和測試團(tuán)隊(duì)的全力配合，而網(wǎng)站產(chǎn)生后，還要依賴于SEO、市場營銷、銷售和客服的工作。

成功的網(wǎng)站，一定是多個部門一起圍繞相同目標(biāo)運(yùn)作的結(jié)果，但是其中一個環(huán)節(jié)失敗，則可能會造成全盤皆輸。

本文雖然篇幅已經(jīng)很長，但是涉及到具體的流程、方法，都只能簡單帶過，希望大家要記住這是對話的場景，不要以偏概全哦。
你對他提出的問題，想如何回答呢？如果你有問題，質(zhì)疑，鼓勵……歡迎交流。

評論(0) 瀏覽(3918)

052013-2

工作的信息搜集及管理方法,如何從搜索引擎找東西？

藍(lán)藍(lán)設(shè)計(jì)的小編

圖1：信息搜集及整理術(shù)循環(huán)圖

本文經(jīng)授權(quán)刊載于《程序員》雜志2012年12月期刊。請勿轉(zhuǎn)載作為商業(yè)用途。

其他轉(zhuǎn)載請注明出處及保留原文。

關(guān)注我請點(diǎn)擊：http://weibo.com/heidixie

寫在前面

幾個月前，團(tuán)隊(duì)邀我做次內(nèi)部的分享，主題是如何有效搜索信息。這是因?yàn)槠綍r工作中，我經(jīng)常會分享一些專業(yè)學(xué)習(xí)文檔，而這些文檔的出現(xiàn)往往很及時，回應(yīng)一些我們自己項(xiàng)目的困惑，所以大家會好奇我如何及時找得到那么專業(yè)且對口的參考資料。

這些資料有些來自網(wǎng)絡(luò)搜索，有些卻是來自我的“個人資料庫”，它分門別類，容易檢索，所以很輕易就能夠翻出來示人。所以后來，這次分享便從“搜索術(shù)”，擴(kuò)大為如何獲取、整理各種信息的技能。

這原來我認(rèn)為是常識的東西，卻在簡單分享后得到好評。受到鼓勵之余，我也明白了并不是所有人都明白有效的信息搜集及整理有多么重要，也并不是所有人，都掌握了行之有效的方法和技巧。故整理成文，做拋磚引玉之用。

一.信息搜集及整理循環(huán)圖

如上圖1所示，我認(rèn)為“信息搜集及整理術(shù)”會包含三個關(guān)鍵階段：

搜索：“找信息”——用各種搜索渠道快速找到所需的精準(zhǔn)信息。
集成：“存信息”——簡單來說，就是把你找到的信息，定制成為個人資料庫，按照自定義的主題，分類存儲在自己很方便訪問的地方。
整理：“理信息”——信息單純集成而不加整理，時間長了就會雜亂不堪，所以才會出現(xiàn)很多人自己的硬盤資料庫已經(jīng)塞滿了，每當(dāng)需要什么資料的時候，還是需要去搜索。定期對所集成的信息進(jìn)行整理（歸類，去重，留精，加可供搜索的標(biāo)簽等等），能夠顯著提升信息搜索效率。

評論(1) 瀏覽(3890)

042013-2

如何寫一份交互說明文檔

藍(lán)藍(lán)設(shè)計(jì)的小編

離開交互圈已經(jīng)有段時間了。但由于博客還在，還是能夠偶爾收到一些郵件，上周有位同學(xué)問我：我在求職，我看到很多招聘說明上需要交互設(shè)計(jì)師編寫界面交互設(shè)計(jì)文檔 ，請問界面交互設(shè)計(jì)文檔是什么文檔？怎么編寫呢

這讓我想起來2009年自己在項(xiàng)目里也大力推行過交互說明文檔（在下文中，簡稱為DRD），格式倒沒什么限制，交互設(shè)計(jì)師自己寫到界面上也行，單獨(dú)文檔成文也行，總之就是讓交互設(shè)計(jì)師能夠?qū)⒔缑娉休d不了的信息通過文檔沉淀下來，降低項(xiàng)目里的溝通成本和風(fēng)險(xiǎn)。今天整理電腦，翻出以前的PPT，分享之。

這將涉及到幾個問題：

一. 什么是交互說明文檔（DRD）？

所謂DRD即是用來承載交互說明，并交付給前端、測試以及開發(fā)工程師參考的文檔。

在項(xiàng)目中，交互設(shè)計(jì)師的主要產(chǎn)出物可能依次是：site map，page flow，wireframes。有的大型項(xiàng)目前期，交互設(shè)計(jì)師有可能還會產(chǎn)出用戶需求分析文檔（與PD產(chǎn)出的市場需求文檔不一樣的是，URD更多側(cè)重于對目標(biāo)用戶的需求分析）。

DRD則很少有人專門撰寫。如果需要對交互設(shè)計(jì)進(jìn)行說明，聰明的交互設(shè)計(jì)師往往會直接標(biāo)注在線框圖里，或者在項(xiàng)目中不斷和前端工程師和開發(fā)工程師口口相傳，反復(fù)驗(yàn)收，不斷迭代修改來確保所有的交互設(shè)計(jì)意圖最終得以呈現(xiàn)。

二. 為什么要寫？

DRD非項(xiàng)目必需環(huán)節(jié)，一般情況下也不會為交互設(shè)計(jì)師專門留出相應(yīng)的時間預(yù)估。沒有這份文檔，項(xiàng)目也會繼續(xù)，但是可能項(xiàng)目會為此承擔(dān)不必要的溝通成本和時間成本。嚴(yán)重的話，項(xiàng)目的質(zhì)量也會受到影響。所以寫與不寫，交互設(shè)計(jì)師需要做把握，時間被統(tǒng)一包含在“線框圖”環(huán)節(jié)內(nèi)——如果你要寫，請?jiān)谠u估時預(yù)留1-2天的時間。

那么，結(jié)合我過去的經(jīng)歷，談一下此文檔的必要性。

下圖是一個產(chǎn)品開發(fā)項(xiàng)目基本的流程。

敏捷開發(fā)意味著很多不同角色的流程需要并行操作。如果等到產(chǎn)品經(jīng)理的FRD已經(jīng)全部敲定，交互設(shè)計(jì)師再開始去畫線框圖，固然會減少溝通成本和返工風(fēng)險(xiǎn)，但是同時意味著交互設(shè)計(jì)師的很多想法不被采納。如果產(chǎn)品經(jīng)理再強(qiáng)一些，他甚至?xí)贔RD里連原始的DEMO也一并繪制出來了，功能性的需求和界面交互的需求有時無法區(qū)分太清楚——比如他會在FRD里直接要求每頁條目40條，超過40條即分頁。而交互設(shè)計(jì)師可能會認(rèn)為像蘑菇街那樣不斷裝載出足夠長的頁面會更親和……所以，我們希望是和產(chǎn)品經(jīng)理同時開始工作，在術(shù)業(yè)有專攻的時候相互補(bǔ)充。

同樣，開發(fā)工程師也希望及早介入需求，在FRD并未確認(rèn)的時候就了解需求，進(jìn)而將商業(yè)需求和功能需求轉(zhuǎn)化為開發(fā)工程師看得明白的開發(fā)需求清單（這個清單，大部分叫做UC，即USE CASE）,當(dāng)這份清單由工程師需求分析師——在過去，這個角色被叫簡稱為RA，但是目前已經(jīng)取消此專門的職位，而是由開發(fā)工程師代表擔(dān)綱此環(huán)節(jié)工作，為了便于描述，在此文里，我仍然將做這件事情的人稱為RA——交付給具體的執(zhí)行工程師后，執(zhí)行工程師基本上可以當(dāng)作一條條的checklist開始工作，而不必再思考商業(yè)邏輯和需求。同樣，測試工程師也需要編寫具體的文檔去指導(dǎo)很多測試人員在開發(fā)后測試，這也是基于UC和FRD去撰寫的。

評論(2) 瀏覽(4086)

032013-2

綠色系的質(zhì)感ui局部細(xì)節(jié)設(shè)計(jì)欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

評論(16) 瀏覽(3947)

022013-2

字體的排版設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

作為設(shè)計(jì)師的我們，每天都在與字體打交道，我們常常希望能很好的使用他們，為設(shè)計(jì)加油添彩。我們常常納悶，電腦里這么多的字體，要用哪一個？文字有這么多，怎樣排版才能表達(dá)內(nèi)心深處的思想？

常常說，藝術(shù)是相通的。將文字排版與音樂結(jié)合起來，用視覺化的音樂和文字排版相結(jié)合，會讓我們的字體排版更容易組合，更能體現(xiàn)我們的設(shè)計(jì)情感。

將普通的文字賦予音樂的藝術(shù)形式，將文字排版賦予聽覺的美感和視覺的美妙，更容易傳遞信息，表達(dá)其深層次的涵義。

當(dāng)音樂響起時，電腦播放器里變化雀躍的頻譜圖，音響喇叭發(fā)生震動產(chǎn)生的聲波，跳動的五線譜和樂器發(fā)生引起的變化圖(A-01)，都是我們體現(xiàn)情感的視覺化形式。

評論(11) 瀏覽(3667)

012013-2

黑色系的質(zhì)感ui局部細(xì)節(jié)設(shè)計(jì)欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

黑色系的質(zhì)感ui局部細(xì)節(jié)設(shè)計(jì)欣賞3

評論(0) 瀏覽(3674)

312013-1

《前沿視點(diǎn)》——2013年最值得關(guān)注的網(wǎng)頁設(shè)計(jì)流行趨勢

藍(lán)藍(lán)設(shè)計(jì)的小編

　在過去的幾年里，我們看到建設(shè)網(wǎng)站的方式發(fā)生了巨大的變化。隨著瀏覽器對 HTML5/CSS3 Web 標(biāo)準(zhǔn)的支持的不斷增強(qiáng)，越來越多的用戶已經(jīng)轉(zhuǎn)移到移動平臺。在設(shè)計(jì)界，有很多獨(dú)特的想法，每隔一段時間就發(fā)生變化！

　　在這篇文章中，我想介紹一些我們已經(jīng)看到正不斷變化的趨勢。其中，許多設(shè)計(jì)理念已經(jīng)存在了很長一段時間。但是，我認(rèn)為在2013年里，這些獨(dú)特的想法將會更加的蓬勃發(fā)展。網(wǎng)上提供了很多可以免費(fèi)下載的開源項(xiàng)目和用戶界面，這樣設(shè)計(jì)人員可以專注于自己的領(lǐng)域。