什麼是 Mockup？
其實我也不知道中文怎麼翻比較好， 原意是「模型（圖）」
互動設計師或PM Wireframe（線框建模）
視覺設計師 Mockup
幾乎沒有人做 Prototype（原型; 標準; 模範）
以設計廚房水槽來說
設計師 決定水龍頭樣式、位置
前端工程師 安裝水龍頭與水管
後端工程師 讓水管有水
倘若一切沒溝通配合好，就會形成如下圖的窘境！
其實都是因為分工 用來溝通，減少落差！
現在是講求專業分工的時代，善用每個人的專長，將一個專案發揮到極致，但中間的溝通就相當的重要，由於各自專長不同，所以容易形成溝通上的誤差及誤解。
建議專案開始進行時，一定要做好完整的規劃及討論，過程中，也需要彼此互相溝通協助，並免出現製作專案方向不對的錯誤發生。
同時，企劃人員要特別注意構想的專案，是否超出設計師及工程師的能力範圍，由於大多數的企劃人員沒有設計及程式的背景，在構想時，特別容易有異想天開的想法出現。
多數初學的網頁設計師，容易發生的錯誤，將網頁設計當作平面稿來設計，忽略的網頁所注重的互動性及使用者習慣。
同時，也很容易出現的一種問題，網頁設計完並沒有說明使用流程，也就是給程式設計師一個確切的流程圖，經常造成程式設計師搞不清楚網頁使用的方式及動向，經常會有自己腦中補腦分鏡圖卻分鏡錯誤的狀況發生。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
那些Mockup沒告訴你的事 （終於到主題了）
如果一個應用程式在設計時，可以在不修改應用程式的情況下，根據不同的使用者直接採用不同的語言、數字格式、日期格式等，這樣的設計考量稱為國際化（internationalization），簡稱 i18n（因為internationalization有18個字母）。
過去我們習慣用固定的圖片當按鈕底圖使用，但這是沒有彈性的，一旦內容超過圖片長度，一切都破功，這邊要考慮使用CSS3來編寫背景按鈕，加油！
這邊特別找了一個很棒的CSS3漸層工具產生器分享給大家
想必寫過網頁程式的朋友，都有過這方面的困擾吧？！
有時會因為使用瀏覽器不同，結果自己網頁的文字頭或尾被切斷！
line-height的中文是「行高」，簡單來說就是兩行文字中間的那段高度、距離。而行高測量的高度，是以文字的基線(baseline)為準，小時候有在外面補習英文的朋友，應該都曾經被教導要在格線上寫英文吧，而那條對準英文字母的線就是我們所說的基線。
想對這方面更深入了解，我這邊推薦 鑫空間 鑫生活
如同Photoshop擁有圖層堆疊的概念，網頁設計也擁有！
CSS中的的z-index屬性用於設置節點的堆疊順序，擁有更高堆疊順序的節點將顯示在堆疊順序較低的節點前面，這是我們對的z-index屬性普遍的認識。
與此同時，我們總是對堆疊順序捉摸不透，將z-index值的值設得很大也未必能將節點顯示在最前面。本文將通過一些例子對的z-index的使用方法進行分析，並且為各位帶入的z-index層級樹的概念。
想對這方面更深入了解，我這邊分享 Neoease
不管從事哪種行業的設計師，都應該要擁有的概念！
一致性是最強大的可用性原則之一。
這讓我想到一句話：「變化中求統一，統一中求變化。」
一位優秀的設計師，不僅只是擁有厲害的設計能力及技術，更要懂得了解人。
不可否認，這是大多數的設計師，容易犯的錯誤。
以樣式來說... CSS3已經不是未來，而是現在！
box-shadow, text-shadow, border-radius keyframe-animation
我們所待的這個產業日新月異，每天都不停地在進化變化中，我們必須隨時改良、學習，讓自己更進步，才有辦法在這個產業成為頂尖人士。
強烈推薦的網站！
這是一個很大的主題 誠心地建議看這段影片！
這方面，我提供一個網站給大家參考：
能在這裡學習到各種設計上要注意的地方。
一目了然？ Above the fold，考慮那些在第二屏的訊息Parallax scrolling 網頁設計有可能透過設計師和 前端工程師協力完成嗎？ 可以玩玩stellar.js
通常設計師容易為了讓自己設計的作品，解析度更高更美，卻忽略到網路讀取的速度及效能，這往往帶給使用者更多的困擾。
效能最大的敵人：http request效能有很多面向，在這裡只談圖片載入。 整包下載的時間與觀感： Pinterest的瀑布高度與lazyload。
螢幕大小？ Responsive Web Design (RWD) Media query?
網頁設計師可以不寫CSS但最好要懂 想想水龍頭的例子
沒有留言:
張貼留言