UI設計師 – Mock up 是什麼？

28 3 月, 2017

首頁這張圖，就是我的個人網站模型圖，就是一張完整視覺圖模擬。 Mock up 網路上都有很多素材模板可以使用，主要呈現給給主管老闆甚至接案的客戶看的時候，視覺呈現的重要性，喜不喜歡這個版型通常在 Mock up 階段很重要。那我們今天來討論我所知道的 Mock up 吧。

視覺效果／模型　( Mock up )

如果要以素描來講的話，就是我們畫完遊戲人物素描之後，遊戲人物利用電腦的繪圖板開始著色，配上武器，場景選擇，甚至衣服整體，等等所有視覺表現。
舉例來說:就像我們要去看一場電影，那張貼在牆壁上面的海報就是Mockup。那麼電影預告,就是原型產品了。

>我做了一張流程圖片,左到右流程圖
 
通常在Photoshop中畫出一張Mock up，就是Wireframe確認過的的結構或框架，是一個確認的交付工作，具有不同的計劃和流程。模擬或comps，定義界面的視覺風格或配色方案等等。
Mockup由中到高保真，靜態，設計圖表示。所以，Mock up 是視覺設計草案，甚至是實際的視覺設計。
主要在呈現、配色方案，整體的架構，包含圖片、排版、等等以及網頁上元素等的視覺表現。
而這個畫完之後，Mock up就可以交付出去給前端，如CSS代碼，樣式，圖形等等。
Mockup需要注意些什麼?
– 表示信息的結構，可視化內容，並以靜態方式演示基本功能
– 鼓勵人們實際審視項目的視覺方面
-wireframe永遠不會是Mockup。
– Mock up可以被用來為Wireframe，所以如果要交出視覺圖要問清楚，是要wireframe的線框圖還是Mockup視覺圖(模型)。
通常海外工作如果是大陸的廠商的公司，他們說的圖片，Mockup(視覺圖)就是老大要看的圖，但是還在討論流程和細節的話，就是wireframe。我在台灣工作的後，發現很多人說那你圖做好了沒，但是其實他們並沒有深思考慮到產品呈現是需要一個步驟有個流程下來，就像種田一樣，稻米才會長出來，說這個圖好像不太適合，這邊在加個按鈕好了，阿！我覺得這邊再加一個位置放個動畫，我們昨天開會討論到，導覽在加個頁面好了，可以嗎？會不會麻煩？（拜託你是老闆。。。哪會麻煩）獎得很簡單，但是已經在做好視覺稿的時候再來改這些＂框架＂根本是本末倒置，所以我覺得做為一個ＵＩ，一定要讓自己的思緒清楚，在討論的時候提出自己的流程意見和想法，不要一昧的修圖，改位置又加一些額外按鍵，改框架，這樣子真的跟打雜的美工沒兩樣了，這是我喜歡的一話Take your time: If nothing else, taking UI/UX serious means change, and it won’t happen overnight. Plan for a step-by-step approach, in which you grow and learn.
 
 

其他文章
[UI容易犯的錯誤],字體規範,字體用戶體驗IOS,Androidy字體預設,UI自學！
[UI容易犯的錯誤]如何成為高級UI設計師,高級UI設計師一眼可以看出你的破綻,UI自學必看
UI設計師 – Mockup是什麼？UI設計師 – wireframe是什麼？可惡的菲律宾土匪文化，抢劫与小偷和恐怖的小孩
[菲律賓工作]第300天,菲律賓的生活紀錄,工作經驗紀錄
[海外工作]我來自台灣的UI/UX設計師,海外工作,使用者介面設計師經驗分享
[菲律賓工作]真實經驗敘述,海關扣留小房間的驚魂-遣返黑名單與保官問題處理(台灣人在菲工作必看)
[菲律賓工作]半年第一次回台~終於放假了~~~~超開心
[菲律賓工作]關於菲律賓的工作經驗談_薪水分析篇来菲律宾工作210天生活的生活点滴记录记录点滴记录

You May Also Like

[菲律賓工作] 菲律賓搭計程車 /的士/出租車教學安全上路 防騙攻略 在菲律賓叫車與交通工具

4 7 月, 2018

[菲律賓醫療] 菲律賓針灸治療 Foot Zone SPA Greenhills 在國外也可以看中醫吃中藥

1 8 月, 2018
[菲律賓租房] 菲律賓找房子 國外租房LAMUDI 看了20幾間房子 GREENBELT/LEGAZPI VILLAGE/EASTWOOD

[菲律賓租房] 菲律賓找房子 國外租房LAMUDI 看了20幾間房子 GREENBELT/LEGAZPI VILLAGE/EASTWOOD

27 7 月, 2018

0 Comments

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *