• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        一款APP的設計稿從設計到切圖③-達內平面設計培訓

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2015-09-15 11:36

        本期只講標注的問題,頁面怎么標,標哪里,可能我涉及不到所有類型頁面,但舉一反五足夠了;切片輸出以及切片命名我們下期再說(如果有錯誤,請一定要及時幫我指出,我不想誤人子弟)。

        標注是重中之重,工程師能不能完整的還原設計稿,很大一部分取決于標注;如果不清楚你該怎么標,別怕丟人(我知道有些設計師,特別是剛接觸工作的設計師并不敢張嘴去問),一定要和工程師溝通!包括怎么標,怎么切。

        每個工程師實現效果的方法不同,我在這里所說的,是我的標注習慣,也就是我們工程師的開發習慣,但應該適用于大部分的設計師和工程師。

        不需要每一張效果圖都進行標注,你標注的頁面能保證工程師開發每個頁面的時候都能順利進行即可;當然,這要看跟你配合的工程師的習慣,比如我現在搭檔的兩位IOS工程師,一位要求我全都要標注,另一位要求我標注代表性頁面就好(記得標注之前一定要溝通清楚)。

        這里的標注軟件用的是我第一期推薦的PxCook(像素大廚),先標一個空白文檔,看看都需要什么吧

        一款APP的設計稿從設計到切圖③-<a style='color:blue' >達內</a><a style='color:blue' href='http://www.sdegwq.com/'>平面設計培訓</a>

        這里要說一句,PxCook雖然可以自動讀取顏色,但是還不能對PSD文檔里設置的透明度讀取,所以如果你用了透明色,推薦你用文字標注直接寫出來原色值以及透明度。

        基本上我并不使用PXCook里面的顏色標注工具,而是使用文字標注工具,因為要標識兩種色值,PxCook只能顯示一種色值。

        一般我的習慣是PS和標注軟件同時打開,因為有時候標注軟件并不能完全的把PSD文件里的東西標注出來,所以標注也要靈活運用,如果無法標注,就到PS里查看一下,然后再使用文字標注說明一下。

        如果你有更好的標注軟件,歡迎推薦給我以及更多人!

        標注顏色是使用16進制,還是RGB:

        都用得到,要看實現什么東西。索性把16進制和RGB都給標出來,也省的工程師一遍遍找了。

        建議標注顏色時,兩種色值表達都標上(16進制&RGB)。

        你需要標注的內容有:

        1.文字需要提供:字體大小(px),字體顏色;

        2.頂部標題欄的背景色值,透明度;

        3.標題欄下方以及Tab bar上方其實有一條分割線,需要提供色值;

        4.內容顯示區域的背景色(如果是全部頁面白色,那就和工程師說一句就好啦);

        5.底部Tab bar的背景色值。

        因為頁面的種類成千上萬,我想每種頁面都講一下,但是不現實,所以我希望可以舉一反三。

        下面的是一個比較普通的首頁頁面,但是基本上一款APP中應該標的元素都有了~

        一款APP的設計稿從設計到切圖③-達內平面設計培訓

        一般頁面你需要標注這些地方:

        所有元素統一距離屏幕最左24px(這種全局性的數據可以直接和工程師溝通,也可以標注,推薦標注出來)

        1.標題欄:背景色,標題欄文字大小,文字顏色(不再贅述);

        2.Banner:所有撐滿橫屏的大圖,不需要橫向尺寸,把高度標出了就可以了;

        3.菜單圖標:

        圖標的大小和圖標的可點擊區域不一定一致,也就是說,圖標可以很小,但是工程師可以把可點擊區域設置的很大,這樣標注     和切圖的時候就要注意,你標注的是可點擊區域的大小,切圖切的也是可點擊區域的大小,也就是用透明區域去補上。在設計     的時候就要考慮可點擊區域的范圍,比如X寶購物車頁面左側的小圈,可點擊區域要比實際小圈尺寸大很多。

        這種類型的圖標需要標注圖標點擊區域大小,圖標距離屏幕最左最右以及上下的距離。至于圖標的間距,因為有些時候可能       設計師不能完全做到1px不差,所以我基本不標,交給工程師,設置為等距離(還是要和你的搭檔溝通怎么去標注);

        4.模塊間隔:這個位置其實不是太重要,我習慣標注上這里,麻煩能少則少。

        5.圖片+文字:這個應該比較常見,只標注一個單位(圖+文)就可以了。

        圖片需要標注寬高,因為工程師要設置圖片區域,從后臺調取,可以這么說,軟件里除了橫屏撐滿的圖,基本上所有的圖片都要標注寬高。

        圖片距離上下左右的距離,文字大小顏色,這里的文字其實算兩個控件,標題文字以及說明文字,需要單獨標出。

        Tab Bar:

        這個位置其實比較特殊,你可以單獨標注圖標大小+文字大小;還可以圖標文字算作一個控件,整個切出來;

        我們工程師的習慣是用整個的,也就是圖標+文字算作一個ICON,所以我基本不怎么標注單獨的圖標(這里可以和你的搭檔去溝通一下,看他是什么開發習慣)。

        關于列表頁類型的標注問題

        一款APP的設計稿從設計到切圖③-達內平面設計培訓

        普通的列表有兩種方法(去問你的搭檔,他喜歡用什么方法):

        1.標出行高,行內元素居中;

        2.標出行內元素,元素上下間距,確定行高;

        每種元素的位置如何確定:

        通常標注的都是元素距離屏幕最左側的距離,比如上圖的圖標元素距離左側24px,文字元素距離左側100px。

        標注這個東西沒有固定的方法,工程師的開發習慣不同,標注方法還不同呢。

        該怎么標注雖然可以在網上找到方法,但那不一定適合你,一定和自己的搭檔勤溝通,方法是死的,人是活的……

        所有的頁面其實都差不多,標文字,標圖片,標間距,標區域;

        這一期的東西,我希望可以舉一反三的去運用,總歸就是那點東西,練習著標注半天就能熟練了……

        有不明白的地方或者不懂的地方,即時留言,我們好共同談討一下……

        我把用到的模板,以及切圖工具還有安裝環境都上傳了,喜歡就下載用用看吧,下期我講切圖,PxCook切圖很方便的……

        我可能講的不是很全面,也可能不怎么系統,能幫到你一點就是一點吧……

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:一款APP的設計稿從設計到切圖②-達內平面設計培訓
        下一篇:達內UI培訓PS基礎教程-30-關于圖層面積與可視區域

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>