您現在的位置是:電腦技術吧?>? 組裝維修 ??>??一個完整的項目流程,什么是流程??>??正文詳情

一個完整的項目流程,什么是流程

申婉容2019-11-16 22:00:41 人圍觀
簡介項目全過程流程我收到一封郵件,里面有幾個關于設計過程和原型的問題。UI設計過程:線框-低保真原型-模型-高保真原型,這個過程對嗎?今天我們來討論一個完整的UI設計過程辦會流

收到一封 Mail,其中提到幾個關于設計流程和 Prototype 的問題。

UI設計流程:Wireframe-低保真Prototyple-Mockup-高保真Prototyple,這樣的流程是對的嗎?今天來聊聊一個完整的 UI 設計流程應該是怎樣的,收干貨!  根據上過課的學員響應、以及自身經驗,目前業界的情況大多是 UI 設計師收到「開工啦」的通知,然后就從 Wireframe 開始下手。

用戶怎么操作、有哪些功能、用戶和客戶的需求是什么往往靠 PM 簡單口述。

  Wireframe 為什么會長這樣?在 Wireframe 之前還有哪些事要做?  全部都靠通靈。

  所以執行項目期間都在改來改去,撐到最后一天總是可以結案就解脫了嘛,再開始下個改來改去的輪回。

  開發流程  基本上我自己在開發產品的流程大致上不會脫離這張圖太遠。

  User Story  Functional Map  Flow Chart  UI Flow  Wireframe  Mockup  Prototype  使用者要什么? 從需求中整理出功能 用戶怎么操作這些功能? 操作的過程需要哪些頁面? 頁面要放什么內容/組件?怎么被操作? 使用者看到的頁面長什么樣子?  各家有各家的作法,沒有標準或正確一定要這樣做的流程,但我在做自己的玩具時都會這樣干。

  有 UX 團隊的大公司會把上述流程拆的更細,還會做使用者研究之類;一人 UI/UX 通包的小型團隊這 7 項是最低一定要產出的文件,依個人想偷懶的慘痛經驗,再刪除精簡化就會在執行項目的過程中漏東漏西,之后補洞反而花更多時間和心力。

  1. User Story  功能怎么來的?從「使用者要什么」或「客戶預期使用者想要什么」開始。

  依用戶的身份不同,想要的功能也會不同,完成的任務不一樣嘛。

  比如「Blog」:  我是讀者,我要看到這位作者寫的所有文章。

  我是作者,我要撰寫并發布文章。

  我是平臺提供商,我要看到所有會員身份和繳費狀態。

  這三種身份對「Blog」這項產品的需求和預期完全不同。

  2. Functional Map  寫了 User Story,才會知道有哪些大小功能要做。

針對不同使用者的需求,從故事中挑出功能。

使用者的身份不同往往影響他們能使用的功能,整理歸納出共通和差異處。

  3. Flow Chart  當開發者知道使用者想要什么、也有了功能,才有辦法思考「用戶怎么操作功能完成他的任務或達到目的」。

  UI 設計師常說:「配合用戶的習慣與行為來設計操作流程」。

就是在這一階段規劃。

如果跳過 Flow Chart,只要產品功能復雜起來,你家的 RD 就會抱著頭哀嚎了。

  4. UI Flow  知道用戶會怎么操作一項功能時,才有辦法規劃操作動線。

UI Flow 指的是頁面與頁面之間的操作流程,用戶想完成任務會經過多少頁面之類。

  有另一位讀者傳訊問道,為什么我之前的文章說不要用圖片版的 UI Flow、要用文字版的呢?  首先,這是雞生蛋蛋生雞的問題。

如果這個項目從零開始,把 Flow Chart 規劃完后接著做 UI Flow,這時候哪來的圖片版可以串 Flow?連 Wireframe 都還沒開始畫哩!  第二,當你的產品頁面一多的時候也不用太多,20頁,用圖片串出一個 UI Flow ,這個 Flow 圖表尺寸有多大張?誰有那個心力在一張大圖上用手掌工具來回移動看頁面走向?  第三,很多人做圖片版的 UI Flow 時,線條連接的是「頁面」和「頁面」,這時候你也只知道「喔~這一頁的下一頁會到這里」,但你完全不會知道為什么會到這一頁。

要點哪里、或是發生什么事所以跑到這里來?猜猜看啊~  要靠猜猜看才會看懂的文件看它(寫它)干嘛?不要浪費時間啊。

  文字版的 UI Flow 我拿來當「目錄」用,對照 Wireframe 的編號,找圖看細節的時候快。

  圖片版的 UI Flow 我會用在「優化」舊產品的操作時使用,連接線會從「組件到頁面」,而不是「頁面到頁面」,并在圖片和線條旁邊寫上文字說明,才會知道哪個步驟可以省略或修改得更易于使用。

  5. Wireframe  有畫 Wireframe 不代表工程師就看得懂這要干嘛,光看臉皺成一團的表情你也不知道他是踢到腳指還是吃到酸梅。

文字說明才是 Wireframe 的重點,包含觸發、回饋、狀態變化等等。

  一開網頁就自動出現廣告、還是開啟網頁后等個3秒才出現廣告?  廣告出現10秒自動消失,還是要按(X)按鈕?  網頁停止30秒沒有操作要不要出現廣告?  工程師只會照你寫的去做、不會照你想的去做。

工程師不是神也不是蛔蟲,他們是一般人,沒有他心通這種神力,溝通上肯定會有認知落差,所以話要講清楚,設計師的常識不等于工程師的知識。

  Flow Chart、UI Flow、Wireframe 這三份文件寫到一半發現什么東西漏掉回頭補上是正常現象,不可能一次到位。

  6. Mockup  視覺稿照 Grid 和 Guideline 做吧,之后還有切圖和標示文件要弄。

  好處是切圖和標示文件都有外掛工具可以代勞,甚至設計師只要顧好原始檔、切圖和標示文件都用 Avocode 或Zeplin 解決。

  壞處是,如果不太知道技術限制,做出來的東西工程師不能用就算了,他們還白挨設計師的罵。

  「為什么你做出來的東西和我畫的差了幾px?」  「拜托!RWD 不可能完全和你畫的一模一樣好不好?」  「是你能力不夠還是偷懶?我的圖畫得出來為什么你做不出來?」  「干」  7. Prototype  那位讀者問另外問了關于 Prototype 的問題:  高保真Prototyple是在切圖給RD之后制作,那做出來的用意是在RD程序還沒完成前再次確定操作上有無任何問題嗎?  那高保真Prototyple就是跟成品長的一樣還可以操作???  做 Prototype 的目的通常是測試和驗證,不管是給使用者操作看看、觀察使用者操作狀況做使用者測試;還是工程師套完程序上線前先測看看有沒有蟲或哪邊爆炸了。

所以它一定要可以被操作,不能被實際操作是要怎么測試?腦內補完?  Prototype 要可以被操作!  Prototype 要可以被操作!  Prototype 要可以被操作!  不能被操作的都不是 Prototype。

  Wireframe 可以做 Prototype,低保真原型。

  Mockup 可以做 Prototype,高保真原型。

  切圖叫工程師寫程序套版做一個,高保真原型。

  我自己大多做完 Mockup 后才會出 Prototype 測試。

  因為,Wireframe 做的低保真原型一般使用者看不懂也沒感覺,沒辦法做使用者測試 =_=  Wireframe 做的 Prototype 頂多內部測試吧,但內部測試常常不太準,工程師和設計師的思維和一般人不一樣,測一測重點常常歪掉  補充說明  另一位讀者看了本文后若有所感,傳訊跟我討論了下。

  今天也和老板談了是否要有 Functional Map 和 UI Flow 等等這些流程,讓我們在前面討論的時候就可以厘清,而不是在視覺稿才修改增減,他也直言我們沒有那么多時間無法照這樣流程,真的很無力  沒有那么多時間無法照這樣流程?當然啊,因為要把時間留在后面改來改去嘛~~~~~  時間總是要花的,看是花在前期規劃還是后期補洞而已。

說沒時間無法照流程的是根本沒流程可以照吧。

  想逼走員工、降低團隊士氣,盡量亂改沒關系,反正大家都知道亂改的那個人連自己要什么都不知道只好胡亂張嘴下指令。

版權聲明:本文由 申婉容 整理編輯。

原標題:一個完整的測試流程,一個完整的會議流程

轉載注明出處:http://www.dn9ww09s.icu/assemble/12963.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • xp怎么加入局域網,xp局域網設置

    xp怎么加入局域網,xp局域網設置 相關圖片w7和xp怎么創建局域網局域網可以幫助一個辦公室的多臺計算機實現更快的文件管理、應用軟件共享、打印機共享等功能。那么XP是如何建立局域網的呢?接下來,超人軟件將介紹如何為...

  • 透明度怎么設置,如何設置圖片透明度

    透明度怎么設置,如何設置圖片透明度 相關圖片qq自定義主題怎么設置透明度這個例子為您介紹了一些關于div的設置,例如border和transparency的編寫方法。對于不知道的人,請參考以下邊框:style=border stylqq空間透明度怎么設置...

  • playerunknown,更新playerunknown

    playerunknown,更新playerunknown 相關圖片playerunknown國際服由于絕地武士的生存,蒸汽平臺也被越來越多的人使用。但也有不少玩家反饋,在運行steam的過程中更新playerunkown時出現錯誤,導致游戲正常連接失敗。所以aplayerunknow...

  • ps邊框制作教程,手工邊框制作

    ps邊框制作教程,手工邊框制作 相關圖片ps簡單相框制作方法其效果如下:選擇一張圖片,用FW打開,在圖片上創建一個圖層,制作一個與圖片大小相同的矩形,用白色填充以添加效果。邊的具體設置如圖所示。注意這里的顏色...

  • 手機怎么看vcf文件,vcf手機文件查看器

    手機怎么看vcf文件,vcf手機文件查看器 相關圖片微信vcf文件怎么打開最近,許多合作伙伴報告說,他們在使用計算機的過程中發現了后綴為VCF的文件。那么VCF是什么文件?如何打開VCF文件?接下來,超人軟件編輯會介紹給大家,希望...

  • 加載loading,頁面進來加載loading

    加載loading,頁面進來加載loading 相關圖片網頁loading在我們的新設計教程中,我將向您展示如何創建純CSS3的加載動畫組件(不帶任何圖像)。我認為它可以減少你的項目的代碼量和你網站上額外圖片的負荷。我準備了三種不同類...

  • picsart一樣功能的軟件,picsart怎么用放大鏡

    picsart一樣功能的軟件,picsart怎么用放大鏡 相關圖片軟件怎么做我發現很多網友都在問picsart是什么樣的軟件,有什么用。Picsart是一種適用于Android平臺的視頻、音頻、圖像軟件,具有強大的功能。用戶可以使用pipicart軟件...

  • 設計師排版,排版設計師是做什么的

    設計師排版,排版設計師是做什么的 相關圖片排版設計師招聘閱讀筆記:工具不重要,工具不重要,工具也不重要。好 啊?有人說DW已經被淘汰很長一段時間了。我成功了,然后呢?我打算用那本紅色小冊子來談談。哈哈哈希望你...

  • xp升級到win7傻瓜教程,xp更新win7系統

    xp升級到win7傻瓜教程,xp更新win7系統 相關圖片戰網不是有效的win32隨著微軟的不斷發展,XP這一款老系統已經越來越不能對抗新型病毒的攻擊。那么xp怎么升級到win7呢?下面,超人軟件小編就為大家介紹一下Windows XP怎么升lol動態鏈接...

  • windows7不待機,win7保持不待機

    windows7不待機,win7保持不待機 相關圖片win7系統取消待機我相信很多win7的用戶和朋友都覺得電腦自動長時間待機很煩人。那么如何在沒有待機的情況下設置win7呢?接下來,超人軟件編輯器將介紹如何設置沒有自動睡眠的winw...

熱評文章

  • 此windows7副本不是正版,windows7副本不是正版

    此windows7副本不是正版,windows7副本不是正版 相關圖片已激活此windows副本尊敬的windows系統用戶,您在使用本機過程中是否遇到過此windows副本不是正版的情況。如果此windows副本不是正版的,會有什么問題?如果此windo7601副本不是正版...

  • ps修復眼睛一大一小,ps人像雙下巴怎么處理

    ps修復眼睛一大一小,ps人像雙下巴怎么處理 相關圖片ps如何處理下巴贅肉我想你們在平時拍照的過程中遇到了被雙下巴拍到的困境。那么PS怎么擺脫雙下巴呢?現在,超人軟件編輯將介紹PS如何擺脫雙下巴。來看看PS怎么去雙下巴?ps怎么瘦...

  • 表格中怎樣拆分單元格,單元格中的內容怎么拆分

    表格中怎樣拆分單元格,單元格中的內容怎么拆分 相關圖片wps中的拆分單元格在哪里今天,我將介紹如何在Dreamweaver中拆分單元格來拆分單元格,首先將光標移到要拆分的單元格上,單擊屬性窗口中的“拆分單元格”按鈕,在彈出的窗口中填寫要...

  • 火狐瀏覽器最好的翻譯插件,火狐瀏覽器一鍵自動翻譯

    火狐瀏覽器最好的翻譯插件,火狐瀏覽器一鍵自動翻譯 相關圖片火狐瀏覽器手機版翻譯我相信當你使用Firefox瀏覽器瀏覽互聯網時,你會被外來詞的全屏所困擾。那么Firefox如何翻譯網頁呢?接下來,超人軟件編輯器將介紹如何翻譯火狐的網頁,如果火...

  • 如何去掉桌面圖標的藍底,桌面圖標的字藍底怎樣去掉

    如何去掉桌面圖標的藍底,桌面圖標的字藍底怎樣去掉 相關圖片桌面藍底圖標無法去掉少數人的電腦桌面圖標是藍色背景,這對美觀有很大影響。如果你看別人的圖標,就不會是這樣了。如何刪除桌面圖標的藍色背景?實際上,這是在桌面設置中打...

  • 旋轉花朵視頻教程,旋轉玫瑰花

    旋轉花朵視頻教程,旋轉玫瑰花 相關圖片旋轉花折紙教程想法:1。用于。。。在語句中遍歷整個主場景中的所有對象(根);2。找到它們(如根[k]),并為它們的不同方法指定不同的函數;步驟1:在主場景中放置多個電影剪輯...

  • itunes下載教程,電腦怎么下載itunes

    itunes下載教程,電腦怎么下載itunes 相關圖片蘋果軟件下載ITunes是蘋果用戶管理其電腦上的iPhone、iPad和其他設備的軟件。那么如何同步從iTunes下載的軟件呢?現在,超人軟件編輯器將解釋如何將軟件與手機同apple itunes官方下載...

  • 火隕石,火隕石圖片

    火隕石,火隕石圖片 相關圖片頑火輝石隕石的特征使用隕石背景創建一個飛行火焰1。整體形狀A。圓形,復制一個備用B。筆工具勾出尾部形狀C。選擇兩個矢量圖形,修改-組合路徑-并集2。模糊處理和顏色調整A.高斯...

  • 迅雷組隊是什么意思,迅雷組隊加速效果

    迅雷組隊是什么意思,迅雷組隊加速效果 相關圖片組隊下載有什么用團隊加速是迅雷的一大特色。用戶可以通過此功能與其他小型合作伙伴一起下載資源,這將變得更快。那么迅雷隊如何加速呢?迅雷隊加速有用嗎?我不怎么說。下一...

  • 如何讓朋友圈文字不隱藏,朋友圈怎么不隱藏文字

    如何讓朋友圈文字不隱藏,朋友圈怎么不隱藏文字 相關圖片朋友圈如何隱藏純文字H1標簽對于提高SEO關鍵詞排名的作用一定是站長知道的,但是H1標簽會使文本變大,有時會在網頁上出現不合適的地方。讓我們分享CSS的隱藏文本方法讓我們以網絡...

關注微信

变脸官网查询