• <small id="q80we"><li id="q80we"></li></small>
  • <small id="q80we"><button id="q80we"></button></small>
    <small id="q80we"></small>
    <div id="q80we"></div>
  • <small id="q80we"><li id="q80we"></li></small>
  • <li id="q80we"></li>
    <div id="q80we"><li id="q80we"></li></div>
  • <li id="q80we"></li>
  • <div id="q80we"></div><div id="q80we"><li id="q80we"></li></div>

    在線客服

    電話①:189 6508 9135(張先生)
    電話②:134 0599 8886(何小姐)
    電話③:0591-83489135

    建站心得


    將設計執行到底—記Qzone項目組視覺設計標注的前前后后


    圖片

    像素誤差
    看自己設計好上線的網站,偶爾會發覺像素行間出現了彈性空間,總在不經意間蹦出一定的差距。有些頁面很難發現,比如活動類頁面,這類頁面多呈不規則造型,在設計上也更加靈活多變。但在portal類的頁面設計上,像導航、登錄框、行距等,幾個像素的誤差可能就會影響到用戶的感受。這時,像素誤差問題就很直觀了。

    面對不斷成長的用戶,Qzone的平臺、活動等不斷的推陳出新,新的視覺觀感、新的操作方式、新的體驗等等都在追求盡善盡美。但由于時間進度和對界面的不同理解,以及上線前開發聯調等原因,導致線上的頁面和設計稿對比,會出現幾個像素的誤差。這看似不起眼的像素誤差,可能導致用戶無法實現操作目標,增加用戶的操作成本,讓用戶沮喪,讓我們產品的體驗大打折扣。如何讓視覺設計師輸出的設計稿能更加準確無誤的展現在用戶面前,是一個問題。

    解決方法
    怎么更好的解決像素差的問題呢?ISD Webteam眾人一陣頭腦風暴過后得出了結論—標注。

    所謂“標注”,泛指標示距離的牌柱或特制的目標。對頁面設計稿進行標注,可以大大降低像素誤差,尤其適用于portal類產品。

    目前在Qzone項目組進行標注的內容包括:頁面行寬、間距、對齊等關鍵點的具體像素數值。為了易于識別,標注以圖標“I”為標示,使用紅色12號新宋體。

    效果如下:
    圖片
    圖片
    圖片

    圖片
    圖片
    圖片

    執行
    剛開始執行的時候覺得花的時間較多,不能充分的享受設計完成后的愉悅,而要面對增設標注這項“浩大”的工程,枯燥的放大,拉取標尺,移動水平線,填寫數據,還是難免覺得麻煩。也會不經意的疑惑,這樣真的能更利于制作和減小像素差嗎?

    反饋
    很快的收到了頁面重構同事的反饋:
    標注作為參考,約定,相比設計原型,更為精細;
    能更快捷地了解設計稿的意圖,減少了溝通成本;
    能節省更多重復的測量工作;
    增強了下游環節包括開發線對還原視覺稿的意識。

    反饋中也有很多改進建議,比如:更注重文本行間數值的標注,更多的關注間距、元素寬高、顏色值、邊框寬度、字體大小、文本段落行等的標注。這些建議,還需要我們在后續實際工作中來不斷優化了。

    圖片

    一些收獲
    第一:視覺設計師,會更加注意行高與間距,在視覺上能夠最精準還原到所設計的樣式以保證體驗順暢,強調設計還原與網頁的品質;更容易關注到視覺層次的設計,容易形成統一的視覺規范和品牌;
    第二:重構工程師,會更加可控和高效,方便重構工程師在最短時間內做出頁面及模板;也提高還原設計稿的意識,降低還原的難度;
    第三:引導開發線的同事對細節的重視;
    第四:將最完美的界面體驗呈現在用戶面前;

    隨著互聯網產品變化的速度越來越快,我們面對的設計工作也越來越復雜,這需要我們找到更多、更好的方法來提高效率,提升品質。

    “標注”,也許就是一次卓有成效的嘗試。


    相關文章

    首頁  電話  咨詢  頂部
    成人国产综合视频网,欧美日韩另类国产一区二区三区,人妻中文系列无码专区,一区二区三区人妻免费视频