• <blockquote id="ce2qy"><blockquote id="ce2qy"></blockquote></blockquote>
  • <nav id="ce2qy"></nav>
  • <menu id="ce2qy"></menu>
  • 騰訊設計師:如何讓你的設計稿做到95%還原? - 優設網 - UISDC

    騰訊設計師:如何讓你的設計稿做到95%還原?

    2019/06/06 45988評論 14

    視覺設計師作為展示產品最終形態的執行層,產品上線前走查視覺與交互還原是必經環節,而留給設計師走查修改的時間其實非常少,有時候為了配合產品上線時間,通常只能犧牲一些細節,在下一次迭代進行優化。為了每一次上線的產品都能夠得到更好地還原,這就需要設計師去了解開發到底是根據哪些規則還原我們的設計稿,以及在每一次制作和交付設計稿的時候,我們應如何設定好每一個細節的規則。

    開發:這里已經完全對齊了。

    視覺:看起來還沒完全對齊,我的圖也沒有切錯吧?

    開發:字體大小和間距都是按照視覺稿來的。

    視覺:這里間距偏差這么大,為什么不按照視覺稿?

    開發:視覺樣式好多,每個設計師的間距好像都不一樣。

    視覺:……

    我們經常會聽到身邊的設計師與開發小哥的一些對話,關于對齊、大小、間距等設計還原問題經常會討論很久,有時甚至會覺得,幾個像素的間距是不是沒有必要這么糾結。以我較常接觸的云產品官網為例,云產品官網體量龐大,單個頁面或信息模塊的樣式復用可高達上百個子產品頁面,此時第一個模塊設計的規范性、擴展性、復用性則變得尤為重要,所以為了讓設計方案更加合理,為了讓合作更加高效,這里總結一些設計經驗,與大家一起探討。

    本文將從以下三個方面,思考作為視覺設計師,應當如何讓設計更加合理有效:

    • 視覺處理(設計)
    • 設計邏輯(方法)
    • 交付走查(合作)

    視覺處理

    1. 字體結構

    網頁設計中,我們總避免不了與字體打交道,字體也是我們在設計中經常容易忽視的部分,而經常出錯的原因往往是因為我們對文字的理解不夠清晰。相比西文字體,中文字體結構復雜,字庫龐大,網頁的渲染效果會比西文字體艱難很多。

    但無論是中文還是西文,我們經常需要用到的無非是字體大小、字重、字色,還有就是經常被我們忽視的行高和行寬,我們從西文字體提取三個最主要的因素,即字高、行高、行寬。基于西文字體的結構轉換為中文,我們可以理解為,字高指的就是我們肉眼所能看到的字體的實際高度,而行高指的是字高+上邊距+下邊距,反過來說,行高減去字高除以 2 就能得到我們的上下邊距,行寬指的就是整個文本的寬度。

    舉一個圖文模塊的例子,圖(1)中我們肉眼所看到間距,在我們做標注時,看到的其實是圖(2)中的三個色塊,我們實際給到開發的標注,是色塊的尺寸和色塊之間的間距,以及詳細的文本屬性。

    2. 文字行寬

    關于行寬,以設計 banner 的標題及描述文字為例,定義行寬是為了讓文本在極限寬度的時候進行換行,再固定好配圖的尺寸,從而得到文本與配圖之間的間距,定義行寬、行數、字數,能夠更好地為運營人員規范輸出的文案,避免因字數過多或過少所造成的視覺不平衡。

    當我們處理無序列表時,四個短句文本,長短不一,同樣我們需要限制一行文本寬度,定義一行能承載的最多字數,以及跟產品確認可能出現的最多字數的情況,確認模塊設計的可行性,保證后續運營人員在替換文案的時候不會出錯。

    以上兩個例子都是我們設計文字經常出錯的地方,正確的定義規范,無論是交付開發或者其他下游,都能保證模塊設計的可擴展性及規范化,保證最終上線質量。

    3. 圖標視錯覺

    關于圖標,這里提到一個幾何學錯覺的概念,視覺上的大小、長度、面積、方向、角度等幾何構成,和實際上測得的數字有明顯差別的錯覺,稱為幾何學錯覺。人眼所接受的視覺平衡,往往不是設計軟件上精準的對齊,我們總是會通過調整間距、大小或角度來補齊一些負空間,讓畫面保持視覺平衡。

    以客戶案例的卡片樣式為例,客戶案例在 to B 產品中是必不可少的模塊,我們的客戶 logo 有的圓形,有的長方形,有的純文字,尺寸差距比較懸殊,這種情況下我們需要給他限制一個高度,在這個高度以內,再根據 logo 本身的體量來調整圖形的大小,處理好 logo 的視覺平衡,最后紅色區域是 logo 的實際尺寸,藍色區域則是我們實際給到開發的尺寸,從開發的角度來看其實就是占位符,而規范的作圖則是把占位符的透明度調整為 0,以占位符為實際有效作圖區。

    UI 設計中通常以「向右箭頭」來表示當前鏈接可跳轉,使用箭頭作圖時,當我們把箭頭和文字右對齊,箭頭其實會更加的往外突出,這時候我們會人為的往里邊推 1 至 2 像素,最后實際給到開發的也應該是紅框的尺寸,也就是 16×16 的占位圖尺寸。

    「按鈕」也是 UI 設計中常用的組件,當我們在按鈕里使用圖標加文字時,由于文字的體量更大,整體重心會往右偏,所以我們通常會認為讓圖標和文字整體往左偏移,使整體的視覺更加平衡,實際給到開發的,也是兩個不同等的邊距。

    設計邏輯

    1. 理性的設計

    在 iOS 和 Android 的設計規范中,都有提到過使用「8點柵格」的概念,即建議使用 8×8 的網格系統進行設計,我們都知道 0.5px 的渲染在屏幕上會變模糊,之所以使用 8 的倍數是因為市場上主流的屏幕都能被 8 整除,使用 8 點柵格能夠最大程度的讓我們所設計的內容樣式在屏幕上保持高清顯示,而在日常的網頁設計中,我其實更加傾向使用 4 點柵格系統。

    我們以下圖 4 組數列為例,大家可能都曾使用過上面三組藍色數列中的數值應用到設計中,或以 5 為倍數,或以 10 為倍數、或以偶數為設計邏輯,而實際上以 5 為倍數則會包含奇數,奇數會導致控件文字對不齊,當 5 的倍數和偶數同時使用時,則會出現類似 14、15、16 這種相差為 1 的相鄰數,這樣會導致我們的尺寸規范不好定義規則,難以形成邏輯,而使用 4 的倍數,他們的公差為 4,不會出現奇數,也不會出現相鄰數。

    我們再看看一些通用的尺寸定義,例如常見的 icon 設計尺寸都是以 4 為倍數。

    常見的網頁柵格及其所均分的卡片和間距,也都是 4 的倍數,如果我們的控件尺寸,圖標尺寸和間距都使用 4 的倍數來定義,那所有的信息模塊自然都能更好的相互適應,層層遞進的邏輯關系也會更加明顯。

    我們把 4 點柵格的設計邏輯套用到卡片設計上,第一眼我們可能比較難去評判兩者的好壞,但仔細看,我們就會發現第一個卡片的按鈕沒有水平對齊,相互之間的間距尺寸也是沒什么邏輯性。假如今天調整一個 8px 的間距,明天調一個 10px 的間距,設計師走查起來也很難發現有問題,對接的開發也難以有一個可以參考的規范標準。而相對的,以 4 為倍數,我們會發現所有的信息都會完美對齊,而且倍數為 4 的每個數值之間公差為 4,即使設計稿微調了 1px 我們都能很快發現,開發在還原設計稿時也會有一個衡量標準。

    網格設計在報紙、雜志、海報等平面設計領域中也是十分常見的設計手法,通過建立網格,考究每一個信息模塊在頁面中的擺放位置,大小占比,顏色占比,從而使得頁面信息保持秩序、均衡。

    使用 4 點柵格系統,通過理性、秩序、邏輯的設計方式賦予畫面秩序感以及閱讀體驗,而以 4 為倍數,每個數字之間都相差為 4,不會太大,也不會太小,同時保持著秩序,讓設計更加理性。對于團隊合作,設計師與開發也將更有默契,不必再為不清不楚的間距浪費時間。

    交付走查

    1. 有效切圖

    關于切圖,切圖之前應跟開發確定好輸出的格式和尺寸,確定應該用 SVG,一倍圖或是兩倍圖。SVG 體量小渲染質量好,單色使用時還能替換顏色,PNG 則通常用在實景圖,一倍圖和二倍圖則根據實際需要進行輸出。

    如果要做分層動畫,那我們就需要分層切圖,如果桌面端和手機端樣式差別較大,那我們需要和開發溝通好如何實現,是否需要特殊切圖,所有的特殊切圖和特殊樣式,我們都應該提前跟開發溝通好。

    2. 交互細節

    如果某個控件或信息模塊交互樣式較多,那我們可以有一個空白畫板來清晰地標注這些狀態和樣式,很多開發在還原過程中都是一手視覺稿一手交互稿,但視覺設計師作為展示產品最終形態的執行層,很多情況下,視覺階段依然會有很多需要跟交互和產品溝通修改的地方,所以為了避免遺漏修改點,視覺稿應該呈現最完整的設計細節,這樣也會很大程度上節省開發的時間,減少出錯的幾率。

    當頁面內容有一定的更新頻率,我們則需要標明視覺樣式規范,以及后續的運營規則,完整的收尾,可以避免產品經常過來尋求上線素材和規范。有些需要隔三個月或半年才上線的需求,清晰的標注也能幫助我們快速回憶起需求背景,讓我們在日常工作中保持頭腦清晰,有條不紊,這其實也是在給我們自己節省時間。

    3. 重構稿走查

    走查還原的時候,在 Chrome 瀏覽器的空白處右鍵點擊檢查,找到里面的 Computed 窗口,我們可以找到具體的文字、間距、投影等屬性,有時候一些比較細微的調整,我們可以雙擊具體的數值進行調整,調整到自己滿意之后再把具體的數值給到開發,這樣就不用在我們搖擺不定的情況下,造成雙方的困擾。

    最后,在預發布的時候,我們可以利用 SwitchHosts 的客戶端來配置開發環境進行體驗,保證最終上線的效果。

    歡迎關注作者的微信公眾號:「超煩蜘蛛俠」

    優設大課堂

    非特殊說明,本文版權歸原作者所有,轉載請注明出處
    本文地址:http://www.010btvly.com/tencent-design-reduction

    發表評論 加載中....

    評論加載中....

    uisdc

    評論區都快餓癟了,看看我期盼的小眼神...

    版式設計 交互設計師 界面設計 排版布局 設計師干貨 職場 優設專訪 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 用戶體驗設計 設計規范 海報設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

    您還沒有登錄

    優設啟用更安全省心的 微信掃碼登錄

    微信掃碼

    300萬設計師聚集地!優設網是極具人氣的設計師平臺
    2012年成立至今,一直專注于設計師的學習成長交流

    把好文章收藏到微信

    打開微信,掃碼分享
    學設計 優設網 在這里

    703彩票 毕节 | 烟台 | 龙岩 | 乌兰察布 | 厦门 | 临猗 | 正定 | 宁夏银川 | 常州 | 晋城 | 大兴安岭 | 单县 | 三门峡 | 宜宾 | 江苏苏州 | 喀什 | 泰兴 | 乌海 | 丽水 | 阜阳 | 广安 | 诸城 | 齐齐哈尔 | 无锡 | 泗洪 | 克拉玛依 | 泉州 | 涿州 | 大庆 | 平凉 | 诸暨 | 张家界 | 珠海 | 明港 | 临汾 | 大连 | 益阳 | 宜宾 | 濮阳 | 云南昆明 | 博尔塔拉 | 威海 | 娄底 | 慈溪 | 兴化 | 驻马店 | 广西南宁 | 海南海口 | 桂林 | 温岭 | 临夏 | 沧州 | 崇左 | 大连 | 昌都 | 洛阳 | 伊犁 | 瓦房店 | 吉林长春 | 潜江 | 衡水 | 长治 | 宁夏银川 | 白城 | 攀枝花 | 周口 | 曲靖 | 渭南 | 保山 | 陇南 | 德阳 | 邹平 | 新沂 | 娄底 | 黄南 | 包头 | 日土 | 天水 | 毕节 | 张家口 | 枣阳 | 淮南 | 茂名 | 海西 | 金坛 | 恩施 | 肇庆 | 象山 | 昌吉 | 荣成 | 那曲 | 海西 | 宁夏银川 | 巴彦淖尔市 | 阿克苏 | 醴陵 | 保定 | 赤峰 | 任丘 | 九江 | 三沙 | 宁国 | 南阳 | 柳州 | 灵宝 | 上饶 | 泰安 | 漯河 | 昌吉 | 姜堰 | 汕尾 | 阿拉尔 | 阿拉尔 |