<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          做好國際化體驗設計,你應該知道的事

          ui設計分享達人





          章節一:為什么要堅持國際化設計?



          堅持走國際化設計的背景

          出海早已成為中國互聯網公司的不二選擇。相比在國內廝殺,國外有更多的人口/政策/資源紅利。并且因為互聯網的可復制模式,使得成熟的經驗可以快速運用到國外,從而搶占先機。而做好國際化的本質就是【做好每個地區的本地化設計】,想用一套國際化的標準去用在全世界的各個地區取得成功是非常困難的

          那有什么好的方法和理論能夠讓設計提前著落,為業務帶來一線用戶信息和設計價值呢?接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計,讓自己的設計價值有理可依


          *以下內容與公司無關,更多的是基于筆者國際化工作經驗的復盤,如有錯誤,歡迎指正(Salute~)



          寫在前面

          首先我們要知道,一套通用的設計標準很難在多個國家吃的開,從而拿到用戶信任

          我們先來看個案例,這個是日本UBER司機端和日本滴滴司機端對比

          最明顯的區別在于,滴滴國際化在日本業務和Global業務這塊,司機端采用的是移動端(global)+平板端(日本),而UBER則是一套方案解決全球問題,可能有些人會問,一套設計不是成本更低,效率更高么,為什么非要制作兩套。這就要從決策成本的角度去考慮問題,而日本市場相對于滴滴其他地區市場有著完全不同的因素,涉及到了資本,使用場景,市場地位,用戶畫像等多方因素決定,這時的【成本與效率】已經無法排在做與不做的第一位了,接下來我們通過兩張照片來看下日本司機的接駕場景

          通過照片我們是否發現日本司機的畫像其實和全世界其他的出租車司機都不太一樣?是不是明顯發現他們的年紀相對的更大一些?會穿制服佩戴白手套? 那年紀更大是不是意味著司機的視力會相對于中年人有所下降,白手套是否會影響他操作屏幕交互,那針對這么不同用戶群體是否需要單獨設計呢?最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢?


          那我再來舉兩個例子來看看,我們來看看針對日本本地化做的特殊設計細節在哪些方面?



          案例一:針對司機群體老齡化設計———大屏幕設計:

          日本屬于老齡化國家,司機平均年齡更是在50歲以上,高齡人群的視力相比于青年處于退化階段,因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情,UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計,更大的屏幕降低了司機誤操作可能性的同時,也能將字體放大,盡可能讓司機方便識別



          案例二:針對日本司機人文的設計———語音接單

          “日本服務業發達,體現在服務的細節。出租車司機出于對客戶的尊重,都會戴上白手套。但是在帶著手套的時候,司機很難去點擊屏幕進行操作,而且在行車過程中,觸碰屏幕本來就是不合規的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為,于是開發了語音接單的功能??紤]到司機群體的年紀特征,我們選用了在日本相對普及又好識別的“了解しました(りょかいしました)”進行快速語音接單,在新版本上線后,司機可以通過屏中屏的方式去學習語音接單功能,只有他完全掌握這個功能才會為他完全展現,如果司機因為自身原因無法很好地說出那句話,我們依舊會為他保留按鈕輸入的方式”------國際化業務中的本地化設計


          (圖片來自于SUXA文章《國際化業務中的本地化設計》-呂誠)




          國際化設計的思維框架

          通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區的本地化設計】

          怎么樣讓國際化的設計有法可依,我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景,那一個場景由哪幾個方面組成,簡單來說是由【業務】+【用戶】組成,這并不難理解,我們作為產品設計師,首先是背靠業務,解決公司的商業訴求,給業務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中,我們會將商業訴求和用戶價值進行一個有效的結合,從而滿足雙方,但是還不夠,因為一個場景還依賴客觀的條件,比如時間和空間維度,最終也會影響整體的質量,我們將所有的因素通過包含關系展示出來

          接下來我們往細的方向進行拆解,【業務】根據公司行業,階段的不同以及基礎能力的不同,呈現的點也不盡相同。最核心的點在于當前所屬階段,是1.0階段力求生存下來,還是說2.0和競品之間產生差異化,還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同,對于1.0階段來說,更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭,通過差異化(殺手級)的功能形態獲取更多的搖擺用戶

          不同的賽道,業務不同,打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢?我們先來列舉些具象的特征:

          【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成,但是光有畫像基礎并不精確,因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯網模式下,用戶體驗的提高必須得考慮各地區【硬件的水平以及當地的網絡狀況】,最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里,獲得用戶認可,特別是在20年后,疫情的爆發導致設計師無法到前線進行真實有效的實地探測,那么加強合作以及對齊目標,為業務拿結果將是重中之重,接下來,我將對于每個影響【用戶】的因子進行舉例講解








          章節二:如何快速了解你服務的用戶



          做任何的設計都離不開用戶畫像,而做國際化設計一定也繞不開-霍夫斯泰德文化維度理論

          可能你知道,在給拉美客戶做單的時候他們會要求你的界面顏色亮麗,看起來更加奔放,而在給亞洲客戶做單的時候則會相反,整體看起來更加約束。但是你能清楚的知道背后的原因么?如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像,去支撐你的設計。答案是有的,他就是【霍夫斯泰德文化維度理論】


          霍夫斯泰德文化維度理論(Hofstede's cultural dimensions theory)是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環境下人們共同擁有的心理程序,能將一群人與其他人區分開來。通過研究,他將不同文化間的差異歸納為5個基本的文化價值觀維度


          百科連接:霍夫斯泰德理論詳情 (<-點擊快速查看)

          完全不懂的可以看看上面的鏈接,我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度

          了解完霍夫斯泰德理論以后我們該如何去使用呢?我們先從拉美用戶和日本用戶的差異對比開始

          通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】,差值比例達到了46和44.

          接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例,去理解背后的原因



          男性化與女性化(Masculinity versus Femininity)

          日本是個生性好斗競爭意識強烈的民族。在日本企業中工作狂是他們男性氣質的一種表現;而日本男主外女主內,62%的女性在第一個孩子之后選擇辭職,也是男性氣質的另一表現.

          在日本想要成為一個出租車司機,就要在5年之內不能有任何違規,某些地方還會有特殊的考試,這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后,才能被評為A級或者AA級別的出租車,雖然這僅僅只是一張小貼紙,但是他也代表著一個出租車司機的榮譽。在這一方面,也體現日本社會的男性氣質的確定性。

          相比較日本,巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心,也是其社會的核心價值觀。對于一個家庭而言,家人共同用餐的時間是非常重要的,還有星期天的燒烤活動,能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事,甚至無法聯系上他們:)



          長期取向與短期取向(Long-term versus Short-term)

          日本人將生命視為一個非常短暫的時刻,所以調查發現日本人普遍相信宿命論,他們鼓勵節儉和現代教育的努力,作為為未來做準備的一種方式。

          巴西相較于日本經濟落后,人民的收入水平普遍不高,很多司機收入僅僅能夠維持一家的支出,很難有結余,在巴西工資會按照周維度支付,以保證一家人的生活開支能夠承擔。

          針對巴西的情況我們做了適合當地政策和環境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡,允許司機隨時提現且提現速度遠遠大于了當地的其他銀行(48小時),那這種優勢在收入較低的司機群體當中就會發揮很大的優勢。在3.0的改版中,我們將錢包打造長了本地生活平臺,我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為,原本需要走到線下便利店的服務被我們搬到了線上,更是大大的方便了使用99卡的群體。未來呢,我們將加大加多權益,達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值,同時我們也給業務帶來了價值,更多的綁卡滲透率為我們后續的推廣和矩陣式的打法提供了導流的入口

          (99與當地銀行合作的線上本地生活功能-99Pay)



          不確定性的規避(Uncertainty Avoidance)

          日本地處自然災害頻發地帶,沒有豐富的自然資源,生存條件不太好,所以日本人有很強的危機意識,學會了為任何不確定的情況做好預防措施,對待事情也希望有明確性

          而巴西雖然處于平原,沒有自然災害,但是因為社會安全因素,整個社會對于社恐事件還是有較強烈的危機意識,所以司機會更加關注接送流程中是否會前往不安全地區,以及乘客的質量

          (日本司機的真實駕駛場景)


          費用收取的正確與否也是服務體驗優秀的表現,日本司機會用計步器進行計價,如果涉及到了其他的費用則會使用單獨的計算器進行精確計算,這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執,那從這個環節來看,司機為了規避【計算錯誤的可能】而預備了計算器,減少了差體驗的可能


          在巴西,滴滴如果對司機派單如果過遠會或者是危險地區會進行提示,允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護,那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師,是不是意味著可以把危險地區的派單做的更加醒目,讓司機能夠更快識別,更快決策,而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強,讓司乘都能更加快捷第一時間選擇自助服務









          章節三:繞不開的硬邊界



          法律法規的約束

          每個國家的發展階段不同,對于隱私重視程度不同,因此針對不同地區的海外市場,作為業務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規方案,這一點格外需要注意,不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的,因此在空投其他國家之前需要了解是否立法關于隱私相關的法律,如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用

          LGPD和GPDR風控合規

          簡單來說就是要做到信息安全,保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣,各種權限,各種信息默認保留和上傳。但是隨著各國的重視,個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD,在歐洲有GPDR


          GDPR 是(The European General Data Protection Regulation )的縮寫,即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過,在?2018?年?5?月開始強制實施的規定。

          GDPR 意義在于推動強制執行隱私條例,規定了企業在對用戶的數據收集、存儲、保護和使用時新的標準;另一方面,對于自身的數據,也給予了用戶更大處理權。也就是說在18年生效之后,如果再有歐洲任何公司App不對用戶的數據進行合規處理,擅自收集信息就將會受到嚴懲



          智能硬件的普及度以及新舊

          硬件的普及率以及新舊差異也同樣影響著本地化設計,通過調研和外界公布的數據我們得知,在拉美高端手機的占比遠遠低于發達國家。因此在給發達地區做設計的時候可以考慮更多體驗上的拓展,但是在給發展中國家做設計的時候則需要進行小屏幕最小尺寸的適配,這樣做是為了最好的進行向下兼容,從而保證所有用戶都能夠使用。同樣,如果你在給發展中國家做設計,那么復雜的動效和高清晰解析的大圖最好是不要去做的

          (網上后臺數據展示截圖)



          當地的網絡環境和下載速度及物流環境

          拉美國家,基建水平滯后,網絡下載的速率波動較大,且存在不穩定的情況,以及流量費用的價格差異。因此某些設計手法在較發達國家能帶來體驗但是在發展中國家可能會是災難


          舉個例子,司機端的歷史列表如果存在400條記錄,如果司機有訴求想刷新查看更多的訂單,是一次性下拉刷新展示全部好呢?還是一次性展示50條好呢?還是一次性展示20條呢?


          答案是一次性展示20條是最穩妥的選擇,因為網絡的不穩定性,一次性加載太多數據會導致過長時間,而網絡不穩定極有可能導致下載失敗,并且一次性下載太多數據可能并不符合司機查詢的最初訴求,反而浪費司機的寶貴流量,最終會引擎流量消耗過快引發進線,這里的決策是損失一些用戶的體驗去保障司機的收入,但是在拉美因為手機的性能/網速的穩定且快速/套餐足夠便宜,因此我們可以嘗試使用一次性加載全部的數據,這樣能讓體驗感受更好

          (99信用卡的申請權益展示/激活流程頁面)


          再舉個例子,拉美物流相對沒那么發達,且因為政治/經濟局勢的不穩定性,導致物流包裹存在無法送達的情況,如果收件人不知曉當前的狀態而超出了等待的預期,那么他就會進線詢問。那在這個場景我們有什么更好的辦法?是否可以透傳更多的包裹進度方便收件人查看,再者再將用戶導流到客服自助而非進線?這樣的好處一來體驗的鏈路完善了,讓司機可以找到自助的出口,二是方便我們可以更好的了解哪些地區收到郵寄的折損率最大?從而探索新的業務,發現新的機會點








          章節四:生活習慣和歷史文化遺留帶來的本地化策略



          收入/支出方式占比反映了一個群體的現狀

          聊這個話題前我們先將選擇的范圍進行收縮,聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出,難有結余。這也導致司機會選擇雙開(同時使用UBER接單或者其他競品)或者進行其他賺錢的方法,如果整個群體都是這樣的情況下,那么司機的忠誠度(這里指的忠誠度不是貶義詞,而是每周的出車時長)必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題


          我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類,基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類,物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么,我們是不是可以豐富收入以外的獎勵形式,提供活動獎勵或者權益的折扣,又或者嘗試下小額貸款,那這些是不是可以給用戶帶來價值點呢?


          精神層面我們是不是也有發揮的空間,對于補貼,往往是有限的。那如何做到持續長期刺激司機群體?如果一個乘客對于司機進行了表揚和小費的激勵,是不是可以給司機帶來更大的信心去服務好乘客,那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵,讓司機存在足夠的擁有感和成就感,讓司機群體也能感受到平臺對他們的看重。如果勛章可以,那等級是不是也是成就之一呢?



          現金與線上支付普及與思考

          不同的國家線上和現金的支付比例大不相同,這里受經濟環境和政治環境影響較大。總的來說習慣了線上支付的習慣后就很難回到現金支付的環境,因為確實更加方便便利。一個國家大量使用現金支付的情況下,往往是互聯網公司能做的發力點和藍海。核心做法是通過核心業務導流到錢包模塊,在與當地的銀行和機構進行合作,增加卡和賬戶的滲透率。然后通過做權益和服務,滿足用戶的生活訴求,從而達到場景獨占。最終將會讓公司的業務矩陣從單核的核心業務到核心業務+本地生活




          文字的適配/i18n翻譯的本地化(不同地區/國家語言精準翻譯,拒絕里語/文字長度折行問題)

          這里我們需要提到一個概念,i18n(其來源是英文單詞 internationalization的首末字符i和n,18為中間的字符數)是“國際化”的簡稱。在資訊領域,國際化(i18n)指讓產品(出版物,軟件,硬件等)無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說,在不修改內部代碼的情況下,能根據不同語言及地區顯示相應的界面。 在全球化的時代,國際化尤為重要,因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n(“本地化”的簡稱)


          了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺,所有的本地化設計在經過研發代碼實現后,都會進過他們去對文案進行翻譯校對,最終變成當地人可以理解的話術落地到界面上,從而進行本地化的空投,但是這里面往往存在一個適配優化的問題。大家知道英文的單詞平均長度要長于漢字,而西語和葡語是英文的1.25倍到1.5倍之間,而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯,還需要把控字符長度,避免折行和省略問題


          我們來看下下面這個例子


          (不嚴謹的快速翻譯,只是為了更方便的展示不同文化下的文字長度)


          不同國家的語言不同,文字也不同,則會存在單詞,句子長度/行高的差異。如果一個產品在初期沒有做好適配的話,到后期替換當地語言的時候極有可能出現文字溢出的問題,這也是為什么在做海外設計的時候最好拿當地的語言進行設計,能初篩出一些細小的問題 ,避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題



          中東國家客戶的產品需要注意適配

          如果你服務中東客戶,務必需要呈現出當地的閱讀排版方式(尊重本地化設計)具體的適配細節這里就不過多說了,網上搜索【RTL適配方法】即可

          (Material Design中的RTL適配)



          縮寫是否合適(日期/業內專屬名詞)- 時間格式/貨幣符號/聯系方式/地址等

          格式也是做國際化中一個非常常見且體現專業度的地方,不同國家的時間展示方式不同,會影響用戶的閱讀,舉個例子“03/08/2019”,如果在A國理解是2019年3月8號,在其他國家復用是會存在理解成2019年8月3號的,更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通,保障閱讀的習慣和當地一致,那貨幣符號/地址等也應該遵守當地的習慣去展示,通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認,將格式記錄下來,最后與研發根據上線的國家展示不同的格式

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:大寶蛋

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          toB設計系統 - 在平平淡淡中開花結果

          ui設計分享達人

          年少時,經常聽到身邊的同事聊一些名詞概念,羨慕之余猶豫羞于提問,導致我經常會陷入其中無法自拔,痛苦不已;過了這么多年,大多數概念都隨著工作的原因慢慢被理解和消化,或逐漸消失或不再提及。但唯獨,“設計系統”這個詞陰魂不散,反反復復的出現在我的面前,特別是在面試這個場景下,幾乎每一場都會有這個詞被提到。

          也可能是每個候選人的認知不同,對設計系統的理解略有不同,有的朋友會認為設計系統是玄學,大話一套套的,根本沒卵用;也有的朋友會把設計系統和設計規范劃了等號。其實怎么理解跟輸出環境有很大的關系,不同的產品在不同的階段一定程度上對設計系統的依賴是有一定偏向性的,這就會導致設計師的認知偏差;

          也源于最近做B端稍微多一些,不如今天就以toB產品為例來嘮嘮我認知下的設計系統是什么以及如何幫助設計落地執行的。


          理論上來講,設計系統分為兩個大部分,一部分是指導思想,另一部分是實際產出;前者去指導后者執行,二者的關系像極了競技運動中的教練安排的“戰術”和球員場上的“執行動作”,如果用一張圖來表示,大概就是這么個事:

          通過上面這張圖不難發現其實設計規范也就僅僅是系統中的一部分而已, 核心在設計語言的定義上,這是一個復雜的推理過程,需要對業務和設計同時有很深的理解,牽扯到很多虛虛實實結合的部分,我試圖總結了一些平時的思考來重點說一說這幾個模塊。


          1. 語言構成

          需要強調的是,要設計一套“設計語言”,首先需要聚焦到“語言”這個詞上,通常我們認知里的語言無非是一套溝通方式,因為我們對他習以為常,所以并沒有更進一步的了解,我試圖去查了下語言的來源,以及為什么世界上會出現這么多語言之類的問題,搜過出來的結果很多很復雜,但概括來說就是支撐一套語言的核心分為“語言特性”以及“語言構成”這兩大部分。

          第一塊,詞匯:ta的作用是讓你表達出想法,就好比如果你跟我一樣English is not good的情況下,還嘚嘚瑟瑟的出國游玩,一定也經歷過用“蹦單詞+比劃”的方式去問路、點菜吧,典型的通過word的方式傳遞信息。

          另一趴,語法,ta會讓你更順暢的表達出自己的想法,通過對詞匯的重組和編排,信息傳遞的有效性被大大增加,你可以通過“主動賓”來陳述觀點或表達疑問,盡可能的豐富此刻你的所思所想。就像上面的例子,按照語法規則稍微調整一下,看起來就順暢多的多了~

          那么如果映射到設計上,顯而易見,組件庫對應詞匯,交互流程對應語法;所以你會發現當我們不斷迭代產品的時候,我們無非就是想把產品當做一件事情講清楚罷了。

          但需要注意的是,設計師喜歡用更多的組件去表達想法這個事本無可厚非,但千萬別過于執著,因為很多“組件”針對性極強,通用和復用的價值不高,這就像我們經常聽到的網絡詞匯一樣,一旦過了生命周期,這些詞就像成了過眼云煙,大概率不會再有用處。所以針對這種情況(之前的文章也有提到過),我建議要在組件的分類上下功夫,建立不同類型的分類幫助你應對不同的場景,也可以有效的避免組件庫的肥胖癥:

          再就是當一套組件被創造出來,ta需要遵循一定的規則形成一個完整的頁面,跟我們造句幾乎一模一樣;所以這個時候充當語法的交互流程就至關重要?,F實情況下,往往交互形態是千變萬化的,經常性的會因為業務場景的不同創造一些流程出來;但如果是基于語言的背景下,我們需要盡可能的抽練一些標準化的規則形成語法,我們稱之為“設計模式”

          這段鬼話理解起來太麻煩了,我試著翻一下大概就是:“為了避免重復造輪子,就搞了幾個通用的流程,以保證產品開發流程的效能問題”,嗯,就這么個意思...
          以material design為例,官方給出了給出了很多規則,我仔細看了看,重新編組和分類了下:

          我從中挑了搜索這個比較通用的模式來簡單講下;拋開組件的“點”思維,需要我們定義的是“信息交互”的“線性”流程,我試著把其中的每個環節提煉了出來,抽練了一個流程出來:

          通過上圖也許你會發現“模式”注重的是流程節點的體驗感知(用戶跟產品交互的一來一往),并注重封裝成標準化方案。另外有一點,我把整個搜索的過程分為了2個個小線程——輸入行為和消費行為,這是為了以后團隊協作更好的理解這條模式的運作方式,以及之后的拓展,舉個例子:產品經理決定加一個歷史搜索(就是顯示用戶過往的搜索結果),這個時候設計師就可以把這個功能當做一個拓展包,直接扔到這個主干里來:

          綜上, 模式最重要的起點和終點(可以理解成為目標和結果),那么中間的過程就是可以被隨意定制和改變的,這也是模式的靈活性。

          另外,toB CRM鼻祖salesforce在自己的設計網站上公布了他們的設計模式,給出了一些特定的場景下的解決方案,不過寫的相對更偏組件流程一些:

          總的來說呢, 設計模式在互聯網設計的發展上,一定程度把交互設計師的價值充分利用了,因為ta的存在,讓設計系統不再是UI設計師的專屬,更不是幾個顏色和字號就可以被定調的,ta的作用一直都是幫助一款產品在成為優秀產品的道路上,傳遞出更“別具一格”且“優雅”的信息;

          PS . 插個有的沒的的小話題,一個很好玩的事,如果你細心琢磨的話,也許會發現其實組件本身也是帶有一定的潛在交互,這種交互不需要你特意安插,天生就有,就好比一個按鈕擺在那,在沒有任何引導的情況下,正常人也知道點一點。所以映射到語言里,語法貌似并不是必要的(當然ta的存在是為了設計系統更完整,產品更好),比如這個爛大街的梗:

          這種現象是著名的“貝葉斯理論”,利用相關信息總結出未知信息,也就是說我們的大腦是可以通過殘缺的信息來補足未知的信息的,人類的大腦真的是奇奇妙妙啊~


          2. 語言特性

          相比構成,特性這個就好理解多了,相當于設計原則這類的,我們需要通過一定的規則約束對語言有一個明確的指向;比如現代漢語就具備適應性、開放性兩大特征。

          同樣的,設計系統在被不斷使用和執行的路上需要有明確的引導,一方面幫助現有產品應對迭代的需求,另一方面保證組件、模式的不斷擴容滿足各種適應性場景,與之匹配的就是“設計原則”了。

          但不得不說,作為面試官我個人不是很喜歡作品集里描述設計原則的時候就3個詞:“簡潔”“高效”“清晰”。并不是討厭這三個詞,而是當我追問候選人為什么是這三個的時候,我得到的回復基本是Material Design(或其他大廠的設計系統)就是這么寫的亦或是其他很蒼白的回答,這無疑是暴露了對設計系統的認知殘缺,是一個非常掉分的互動過程。其實,當google、IBM、salesforce在對外宣講他們的設計原則的時候,也許就只有兩個字“清晰”,但背后或許有非常多的思考,甚至超乎你我的想象。

          但...異乎尋常的是,AntDesign 的設計原則寫的很"深奧",憑我的功力真的看不出背后的東西,也不知道如何指導設計(也許他們是在探索設計哲學吧哈哈哈哈):

          在我設計過B端產品里,我更希望盡可能的把 設計原則按照不同角色視角的方式去劃分,舉個例子:
          假設現在我們正在為一款工具類SaaS系統做設計(0-1階段),這個時候最好確定一個方向來綜合考慮業務訴求、產品訴求、設計訴求和最重要的用戶訴求(這基本包含了從生產到實用這條流程線上的所有角色),ta們分別承載著不同角色的不同期望,互相成就又彼此制約;所以需要從4個角色的不同角度分別提取訴求:

          當我們對上述各方訴求梳理清楚后,首先要精準的概括和整理這些內容的權重和占比(需要注意的是,雖然允許多個原則存在,但也要有一定的側重和比例,這種做法在順暢的環節上不會有所建樹,但在多個原則沖突的情況下為了保全大局,順應占比最大的原則是相對穩妥的選擇,一定程度上可以幫助設計師規避掉不必要的糾結或撕逼的過程);再然后基于當下的情況產出相應的原則,形成整套設計系統的王炸:

          但在實際操作中,高度整合后的設計原則雖然指明了方向,但缺失了可衡量性,這就會導致“認知偏差”的情況,因為每個人對圖例中的“高效”或“靈活”理解不同,會對同一個事物有不同的理解,就跟“小馬過河”這個典故一樣,小松鼠覺著水很深,小馬卻覺著也就那樣;也正是基于此,需要設計師們在此基礎上拆分明確的細則,幫助整個團隊建立統一認知:

          到這一步基本上設計系統就被定了調了,我們可以明確對一個設計進行評判和衡量,以“清晰”為例,我們有個B端產品里面有個表單填寫的頁面,需要用戶提供一些個信息,前兩天,團隊一個設計師做了個方案是把表單新開tab,但產品覺著不夠清晰,反而覺著蒙版的形式更清晰。他就很疑惑,明明信息獲得了更好的展示咋就不清晰了?

          說到底,是我們在做設計定義的時候,對“清晰”的認知就是偏薄的,這個案例里面顯然第一個方案對信息的展示更加充分明了,但在這個場景下“清晰”并不僅僅指的是信息呈現,產品經理希望用戶透過浮層能確認當前處在哪一步(或哪個頁面)也同樣是一個維度;從這個case里,你會發現,定義一個原則真的不僅僅是搬運一個名詞這么簡單,所有的原則和特性必須遵循易于操作且合理,這樣才是一條合格且優秀的原則。

          ps . Salesforce的Lightning設計系統是我最喜歡的design system之一,原因很多,其中很重要的一條是因為他們真的是把“美”作為一個很重要的原則

          嗯~nice,非常符合設計師的三觀,也很真實,很實在哈哈哈哈~


          唉媽...啰嗦了一大頓,終于講到了設計規范了,作為設計系統的中樞,設計規范承接了指導思想和設計落地兩者,更像一本說明書,我挑了個點重點說一下(前面費了太多口舌了,實在是沒有力氣再寫下去了哈哈哈哈);

          色彩體系的定制往往是重災區,最常見的做法是把顏色用色塊的方式一字排開,一排叫做品牌色,一排叫做輔助色,還有一排是灰度:

          這種定義存在很大的風險,就跟菜譜只告訴你需要哪些食材,不告訴你配比一樣,做出來的菜大概率是一塌糊涂,難以下咽。所以如果你正在建設一套團隊協作級別的設計規范,務必要把“協作”當做最重要的事,用比例的方式來告訴你的隊友他們應該怎么做:

          同理,其他的模塊,比如字號,間距,圖標,我都建議盡可能的“場景化”,讓設計規范有一定的代入感,這樣會大大提高設計的效能和品質。


          拋出這個問題,是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點;我個人是很難以認同這個的,對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合,需要調動整個團隊的想象力和創造力,最終達到一個統一共識才有可能被實施和執行;其次,創造力并不全是設計個btn或者彈窗,真正能展示創造力的是像樂高一樣,通過零件(組件)拼裝成各種各樣的令人嘆為觀止的創意,那才是我理解的創造力

          另外從系統性思維上講,如果在不考慮資源的情況下,我倒是挺支持每一位設計師都自己去設計一套設計系統,因為在我們平時看來,2/3年經驗的設計師和10年的設計師他們的產出物或許不會差太多,但對設計觀架構的能力千差萬別,前者依賴感覺和直覺素養做事,后者更靠縝密的邏輯和推理來做事;我更喜歡后者多一些,并不是因為他們講起自己作品的時候聽起來多么高大上,而是因為依據推理方法可以時刻保持輸出的穩定性。

          如果你了解NBA的話,你一定知道美職籃里天賦最高的運動員 - 麥迪,他有過35秒13分驚為天人之作,把心理素質和身體極限展示的淋漓盡致,但就整個職業生涯來說,并不算特別突出,對比同時代的科比來說,他的個人/團隊成就都還顯得差點意思;天賦不算頂級的科比通過不斷的自我訓練和戰術研究能夠保持20年的穩定輸出,贏得了5個總冠軍戒指,成為了我們這一代球迷心目中的“神”。

          我無意詆毀這兩大巨星,也無意內卷,只是想說,做事,終究不能托付給“天賦”和“靈感”,勤奮和努力在一定程度上也許可以幫你飛到更高。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:負能量補給站

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          產品設計細節剖析

          ui設計分享達人

          前言


          在設計領域,相較于平淡無奇毫無重點的界面設計,其具有良好視覺層次結構的設計更受用戶青睞。在設計過程中可能會糾結于各種可能性,比如是讓文字變大還是變小,或者增加(或減少)元素周圍的留白,顏色是該深一點還是淺一點等。其實不管何種呈現方式,設計出美觀、高效和可用的UI界面需花費很長的時間,需經過反復的修改,最終才能打磨出令用戶滿意的產品,在滿足公司戰略及功能需求的情況下,其修改和優化還可以從細節上入手。





          2021 | 第03篇分享目錄(031~045


          031.「支付寶」避免超額消費的花唄鬧鐘

          032.「滴滴出行」關懷模式-老年人的出行福利

          033.「愛奇藝」搜索分類-讓結果更精準

          034.「美團」突出折扣金額-引起用戶貪便宜心理

          035.「餓了么」訂單備注提示-為防疫工作貢獻一份力量

          036.「快手」不打斷視頻播放的評論功能

          037.「微博」行為預判-有效提高評論的完成效率

          038.「淘寶」搜索結果-你試過長按商品卡片嗎?

          039.「boss直聘」雙重toast彈窗-快速感知頁面類型/內容

          040.「餓了么」店鋪營銷文案-看“我”就把“我”吃掉

          041.「微信」你使用過圖片備注嗎?

          042.「即刻」排版設置-幫你緩解視覺疲勞

          043.「拼多多」通過搜索關鍵詞建立情感鏈接

          044.「微信讀書」替身書架-幫你瞞天過海

          045.「網易云音樂」視頻歌單-邊聽邊看更便捷





          031.「支付寶」避免超額消費的花唄鬧鐘


          產品體驗:

          在支付寶花唄的消費鬧鐘功能里,可設置每個月的消費限額,當花唄支付使用超額后,會收到對應的消息提醒。

          設計思考:

          隨著互聯網的迅速發展,人們生活水平提高的同時、消費水平也越來越高。各種消費信貸產品如雨后春筍一樣冒出來。花唄自出現后就深受人們的喜愛,首先是便捷的支付方式;其次花唄的申請門檻比較低,不論是學生,還是無業游民或其他沒有穩定收入的,只要芝麻信用分達到650分以上就能開通,在擁有額度后,就可以在支持花唄支付的平臺提前預支消費,到次月再還款,因此花唄的便利性就完全體現出來了。但總是有一部分用戶在每月出賬單需要還款時才發現,消費的額度遠遠高于自己的收入,甚至無力償還。

          花唄新推出的消費鬧鐘功能,對于花錢沒節制的用戶來說,真的特別好用。在消費鬧鐘里設置提醒金額,點擊確定設置即可,當使用金額超過用戶設置的金額,將會收到提醒消息。此功能既可以減少用戶超額花費的可能性,也能有效避免用戶因無力償還賬單而給平臺帶來的經濟損失,可謂是一舉兩得。





          032.「滴滴出行」關懷模式-老年人的出行福利


          產品體驗:

          在滴滴出行的設置中開啟關懷模式,系統會將字體放大且展示功能極簡的打車模式頁面,方便老年人使用;

          設計思考:

          滴滴出行主要面對的是年輕用戶群體,因涉及到支付寶、地圖等線上線下功能的結合,操作流程復雜且使用起來學習成本較高。在當前移動互聯網時代下,老年人如何能真切感受到現代智能科技所帶來的便捷、人文關懷和尊重,是如今的移動平臺所要解決的問題。

          滴滴出行的關懷模式,就是專為方便老年人出行而推出的。老年用戶在APP設置中心開啟后,可快速進行一鍵下單操作流程。關懷模式支持大號字體顯示,能提前設置五個常用地址,方便在下單時進行一鍵操作,簡化了下單流程及刪減了部分頁面內容。不管是大號字體還是精簡流程,都便于視力不好的老年用戶叫車出行,不僅有效降低了在線叫車操作的復雜程度,也能緩解老年用戶在叫車過程中出現的不確定性和焦慮感,提升了出行效率。





          033.「愛奇藝」搜索分類-讓結果更精準


          產品體驗:

          在愛奇藝使用搜索時,展開搜索框前面的類型,可選擇全網、圖搜劇和詞搜劇,以更精確的匹配搜索結果。

          設計思考:

          很多設計師認為搜索很簡單,設計一個搜索框加搜索圖標放在主頁頂部就搞定 了,然而并非如此,需要站在用戶的角度考慮搜索前、搜索中、搜索后各個階段的用戶體驗。搜索作為一個功能入口,除了簡單的呈現及引導方式之外,搜索結果也是也是非常重要的,用戶的搜索操作不是目的,結果的精準度及視覺傳達才是重點。大部分搜索的呈現就是提供搜索框,用戶一上場就開始碼字,然后在海量的搜索結果中去找到自己想要的內容。然而用戶并沒有什么耐心,不管是花大把的時間查找結果還是不停的更換關鍵詞重來,都有可以讓其失去耐性,轉而扭頭就走,導致平臺的用戶流失。

          愛奇藝APP在搜索功能中進行了分類,比起常見的全局搜索其結果更加精準,通過全網、圖搜或詞搜類型改變搜索范圍,便于用戶在最短的時間內找到自己想要的結果。可以想象,當我們在百度查找需要的內容時,面對幾萬乃至幾十萬的結果匹配時,翻過幾頁后,要么放棄、要么換掉關鍵詞。愛奇藝的分類型搜索縮小了查找范圍,降低用戶的時間成本,還能提高對用戶的信任度,以增加其使用粘性。





          034.「美團」突出折扣金額-引起用戶貪便宜心理


          產品體驗:

          在美團的酒店列表價格區域,除了有劃掉的原價和優惠之后的價格外,還特別突出展示了優惠的實際金額,非常顯眼,以彰顯其優惠的力度。

          設計思考:

          商家們都知道,定價策略是營銷中一個十分關鍵的組成部分,是影響交易成敗的關鍵因素,但也難以確定,既要考慮成本的補償,又要考慮消費者對價格的接受能力??v然如此,當商家們把最低的價格擺在消費者面前時,才發現“理想很豐滿,現實卻骨感”,總是有那么一群人在感性的消費,即使碰到折扣后的價格依然過高,但只要優惠力度夠大,就感覺夠刺激,常規剁手。

          一路走來才發現,唯有套路得人心,例如:拼多多的砍價,砍到手后低價購買,算是平臺補償的免費宣傳費;美團的高額滿減,是在提高原價數倍之后才有的折扣;線下商家撤離前的虧本清貨,可能是被選剩下的瑕疵產品......。在這些案例中,如果商家直接把折扣后的實際價格擺在那里,部分用戶根本不屑一顧。

          美團的酒店列表,在價格區域除了常規的原價、現價之外,還突出展示已減金額,拋開現價不說,如果優惠的金額給力,足以引起用戶的注意。這是企業慣用的利益引誘手段,屢試不爽, 通過下單就讓利的方式來促進商品的轉化,引起用戶的貪便宜心理,只要優惠的數值夠高,就能引起用戶的注意力和消費欲望,將用戶的思維轉換至優惠力度方面,而忽略市場價格及性價比,會誤以為商家優惠的金額即自己賺到的錯覺,促使用戶下單完成轉化。





          035.「餓了么」訂單備注提示-為防疫工作貢獻一份力量


          產品體驗:

          在餓了么確認訂單頁面,為了有效的控制疫情傳播,頂部會提示“為了減少接觸,降低風險,請修改下方備注”,進入備注頁面,輸入框的占位符和快捷輸入都優先展示避免接觸取餐的方法參考。

          設計思考:

          疫情爆發期間可謂是人心惶惶,經過所有人長時間的有效配合及預防,終于得到了緩解。疫情控制之后,人們對病毒的防范意識有所增加,通過自律做到盡量減少與他人的接觸,但在忙到的生活和工作下,很多情況總是不可避免,比如病毒防范意識降低而造成無意識的接觸、工作中的外賣取餐和寄收快遞,都會造成額外的接觸。

          在餓了么APP上訂餐下單時,系統會給予明顯的免接觸防疫提醒,在訂單的備注中優先展示免接觸取餐方式參考,如掛門把手、放門口等,給病毒防范意識降低的用戶敲響了警鐘,提醒用戶盡量使用無接觸方式取餐,不僅能降低病毒在人與人之間的相互傳播,還為防疫工作貢獻了一份力量。





          036.「快手」不打斷視頻播放的評論功能


          產品體驗:

          在快手觀看短視頻,打開評論,頁面從底部彈出,視頻繼續以播放狀態等比例縮小置頂,編輯評論不影響播放。

          設計思考:

          當我們在線上看到一件事物,有互動需求和強烈的表達需求時,此時評論功能不僅能滿足用戶需求,還能增加參與感,對增加用戶黏性大有作用。評論作為一個重要級的功能存在,在需要時會打斷用戶的當前瀏覽或操作,通過跳轉頁面或彈窗來幫助用戶解決互動需求,跟原本的頁面是一個上下級的關系。

          在快手APP看短視頻,無論是編輯還是瀏覽評論都可以齊頭并進。觸發評論后,頁面從底部向上彈出,視頻的頁面占比范圍會以播放狀態等比例縮小并置頂,類似我們在看電影時的橫屏和豎屏,視頻觀看及評論兩不誤。這種交互方式在滿足用戶下一個需求時,并不中斷上一步的需求,避免原本看視頻的思路被打斷,有助于用戶跟隨視頻播放的思路即興發揮評論,這也是一個容易設計師被忽視的好功能。





          037.「微博」行為預判-有效提高評論的完成效率


          產品體驗:

          當我們在微博列表中的某條信息處停留5秒并無任何操作時,此條微博下方會自動彈出評論框,系統通過行為預判感知用戶對該內容感興趣,引導用戶去發表自己的想法。

          設計思考:

          評論在很多應用中都有著舉足輕重的作用,尤其像微博這樣的大型并開放式的信息平臺,更有著弘揚先進的思想和精神,揭露和抨擊腐敗現象及不正之風,對各種不良現象形成強大的輿論壓力,實現有效的監督。即便是網絡水軍、鍵盤俠(惡意重傷除外,畢竟大部分用戶還是理性的“噴子”),當風聲一邊倒時,都會逐漸走向真理化。在我們所接觸的應用中,評論操作的方式都是通過用戶的手動觸發。

          微博編輯評論除了用戶手動觸發之外,其還有一種非常人性化的系統感知觸發。當用戶在列表中的停留5秒且沒有任何操作時,系統通過行為預判感知用戶可能對這條信息感興趣,即自動彈出評論框,引導用戶操作,能增加產品跟用戶之間的交流互動。微博的行為預判是引導用戶、縮短用戶行為路徑的有效設計手段,在用戶沒有作出行動觸發的情況下進行理解用戶可能會出現的操作行為,減少冗余步驟,簡化操作流程,運用最少的路徑和行為來達成用戶目標,有效提高評論的完成效率。





          038.「淘寶」搜索結果-你試過長按商品卡片嗎?


          產品體驗:

          在淘寶的商品搜索結果里列表,長按某個商品卡片區域,會彈出該商品多種類型的tab,有相似、同款、同品牌和同店,便于用戶更精準快速找到自己需要的商品。

          設計思考:

          對于有目標需求但不是特別明確的用戶來說,關鍵詞搜索無疑是最好用的一個功能,當面對海量的搜索結果,可能會眼花繚亂,找到喜歡的商品時,要么銷售量太低、要么價格過高,反正總有有那么一方面自己不滿意,不得已,只能把當前商品的精準關鍵詞經過搜索框再來一遍。

          在淘寶APP就無需這么麻煩。商品的搜索結果列表有個隱藏的功能,只需長按商品卡片區域,就會彈出相似款、同款、同品牌、同店鋪的類型tab欄,方便用戶能夠快速根據自身需求篩選比價,可免去不必要的麻煩操作,節省大量時間,如果你還未使用過此隱藏的交互功能,就趕緊試一試吧。





          039.「boss直聘」雙重toast彈窗-快速感知頁面類型/內容


          產品體驗:

          boss直聘頂部的職位tab在切換成功后,除了除了有職位更新toast提示外,屏幕中間還會通過toast彈窗提示當前頁面職位類型,并突出顯示。

          設計思考:

          關于toast彈窗樣式及出現的場景,猶如市場上的大白菜,所見過多的不能再多了。例如某個步驟操作成功、tab切換頁面、下拉刷新等,是一種輕量級的反饋,以小彈框的形式出現,一般出現1到2秒會自動消失,且可以出現在屏幕上中下任意位置。對于設計師來說,在頁面上增加toast的作用,就是將操作的結果直接反饋給用戶。

          Boss直聘APP在tab欄成功切換頁面后,除了有清晰反饋操作結果“推薦職位已更新”之外,還在屏幕中間用另一個更加顯眼的toast彈出明確職位信息。其實用戶在切換tab欄時,此操作行為不僅僅是切換頁面,所對應的類型才是首當其沖,當明確類型無誤后才會將思維轉向內容,職位彈窗在屏幕中心提示,占據有利地形,除了讓用戶清楚當前頁面交互狀態之外,還能快速感知類型是否為自己所需。另外還有防錯作用,避免用戶操作失誤后,在自己還不清楚的情況下去瀏覽內容而浪費大量的時間。





          040.「餓了么」店鋪營銷文案-看“我”就把“我”吃掉


          產品體驗:

          餓了么的外賣店鋪列表及推薦商品下方都有極具誘惑性的廣告文案,一句話概括味道、服務、優質推薦等。

          設計思考:

          今天吃什么?隨便;那吃肯德基吧?不好,太油膩了;那到底吃什么?隨便......。這應該是最標準的選擇性困難綜合癥晚期,尤其是給女朋友點外賣,你會發現原來“隨便”就是天大的謊言,表面上看似什么都可以,實則什么都不可以。

          餓了么每個店鋪下方都使用了一句簡短的文案概括菜品的味道、店鋪服務或招牌推薦等,在文案中結合用戶較為關心的利益點抓住眼球,引導目標進入店鋪,從而瀏覽店鋪的內容。店鋪廣告是商家可以進行內容營銷的重要場所之一,可充分利用文案向用戶進行宣導,讓其感受到店鋪的用心之處,增強用戶體驗,優質的文案不僅能帶給用戶驚喜,還有一種神秘色彩,用戶可能會抱著試一次心理想法,從而形成轉化。

          另外對于吃什么、難以選擇的用戶,平臺可以通過文案的吸引,增強用戶的占有欲望,讓其快速做出決策,避免在選擇的時候難以抉擇,即便做出決定后仍然疑慮其它的選擇是不是更好,從而導致時間的浪費,精神上的焦慮。





          041.「微信」你使用過圖片備注嗎?


          產品體驗:

          微信好友昵稱除文字備注外,還可以使用圖片備注,保存成功后即可在設置備注頁面描述區域看到此前備注的圖片,好友信息也增加了描述入口。

          設計思考:

          當我們的微信好友過多或因好友隨時改變昵稱的原因,而經常找不到,我們就會隨手備注一個昵稱或標簽,以便需要時方便查找,但針對當面即時添加的好友,就算使用的昵稱備注,可依然沒有印象怎么辦?

          其實微信的備注功能比我們想象的要強大,除了昵稱備注外,還可以使用圖片備注。當我們因工作接觸的人較多需要添加好友時,短時間是沒有辦法把所有好友的個人信息都記熟,這時候圖片備注就能助我們一臂之力了,另外還可以直接把客戶的名片作為圖片備注,將單個好友的信息集合,實現一功能多用。對于記性不好或短時間內添加好友較多的用戶非常實用。





          042.「即刻」排版設置-幫你緩解視覺疲勞


          產品體驗:

          在即刻APP的排版設置里,開啟“中文標點擠壓”和“段間距”,文本內容會自動減小中文符號后面的間距,且段與段之間也會增加留白,提高視覺舒適度。

          設計思考:

          我們在看文章或電子書時,都有過這樣感覺,當篇幅較大時,到了一定時間,就會產生視覺疲勞或專注度減弱的情況。視覺疲勞的強弱程度,用戶除了自行調整外,平臺還能通過設計手段提升用戶體驗來緩解,常見的網絡文章會在不同位置穿插圖片來減輕用戶的視覺壓力,其電子書也會通過短篇幅的翻頁來緩解視覺疲勞。

          在即刻APP的系統設置中,可通過排版設置提升瀏覽體驗。開啟中文標點擠壓,文本將自動減小中文標點符號后的空白區域,避免間隔太大造成脫節,去掉不必要的空白,還能為內容節省空間,畢竟內容才是產品最重要的部分,所以不要沒理由的去掉特地為它預留空間,“擠擠總還是有的”;其次開啟段間距,即段與段之間視覺更加明顯,第一反應就能感覺出這是兩段內容(段落的結尾如果跟上一樣最后平齊,傻傻分不清是銜接上一段還是新的一段),讓用戶瀏覽文本內容的思維更清晰且減少思考,提升節奏和視覺平衡感。





          043.「拼多多」通過搜索關鍵詞建立情感鏈接


          產品體驗:

          在拼多多搜索“生日蛋糕”時,商品搜索結果呈現的同時,會有滿屏的蛋糕表情落下,以示祝福。

          設計思考:

          商品搜索框,顧名思義就是搜索商品使用,用戶需要查找某個商品時,輸入關鍵詞,系統通過后臺數據對關鍵詞進行匹配,然后按照特定是順序呈現出來,旨在滿足用戶的搜索需求而生。

          拼多多搜索功能除了滿足用戶的基本需求外,還增加了一個小細節,搜索部分特定的關鍵詞,結果頁會使用趣味化的微動效。比如,在搜索“生日蛋糕”后,會有滿屏的蛋糕表情落下,給予用戶生日祝福,通過營造情感氛圍,獲得用戶的認可,跟用戶建立情感鏈接以鼓勵繼續下一步操作。同時平臺用趣味的微動效生日祝福通過情感、人性化的交互方式更受人用戶青睞,可以讓用戶感到心情愉悅,進一步增加用戶的信任度及粘性。





          044.「微信讀書」替身書架-幫你瞞天過海


          產品體驗:

          使用微信讀書,如果自己所看的書籍不想別其他人知道,或者想假裝自己在看某個領域的書籍,可在隱私設置中開啟替身書架,既可以保護隱私,還可以滿足面子心理。

          設計思考:

          有人說,線上看書的效果沒有看紙質書籍的效果好,其實并非全部如此,主要因人而異,比如線上看書可以有效利用碎片化時間、不分場景等,不管是線上還是線下,都沒有明確的界定,只要能堅持就好,堅持是一件很不容易的事情,比如很多用戶喜歡把自己在看書這件事告訴所有的朋友,利用營造人設以追求自己的面子心理,通過好友的夸贊轉化為自己堅持下去的動力。

          微信的替身書架就可以滿足用戶的多種需求,通過隱私可以設置一個“分身”來代替真實書架,開啟后,替身書架將代替真實書架顯示在個人資料中,除了隱藏自己真正閱讀的書籍,保護閱讀隱私,讓自己不被“視奸”外,還可以滿足用戶的面子(裝X)需求,滿足用戶想要被看到的一面,利用替身書架經營自己人設的需求,比如最近在讀的書籍類型、領域等,通過“造假”的方式滿足自己的虛榮心,來獲得他人的認同感。替身書架一定程度上可以通過裂變手段把獲取的新增用戶轉化為活躍用戶,同時滿足了用戶保護隱私和營造人設的需求,一舉兩得。





          045.「網易云音樂」視頻歌單-邊聽邊看更便捷


          產品體驗:

          在網易云音樂聽聽歌時,如果遇到喜歡的視頻,也可以收藏到視頻歌單了,從我的-收藏和贊入口進去就能看到。

          設計思考:

          一直以來,歌單是網易云音樂的核心功能,網易云音樂也是唯一一個將歌單作為核心架構的音樂產品,當我們碰到一首非常喜歡曲時,可能也會鐘情于該歌曲的MV,邊看邊聽似乎能更好的融入歌曲的“靈魂”中,如果我們需要再次播放該MV,就要從這首歌曲處找到相應的入口。

          網易云音樂8.0版本最新推出了視頻歌單功能,延續了用戶喜歡的“歌單”模式,根據自己喜歡的歌單主題,將MV,視頻、mlog內容聚合在一起,做出一個好聽、好看,好玩的視頻歌單,讓音樂動起來,省去了以往每次找視頻的一系列繁瑣操作,優化路徑,讓邊聽邊唱的體驗更加便捷。





          結語:


          設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來,加強自己的記憶,不僅能提升自己的語言組織和總結能力,也為日后輸出優秀的作品當鋪墊,對自己的能力提升以及未來的職業發展帶來便利。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:大漠飛鷹CYSJ

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




          10個讓用戶一眼就愛上的設計心理學知識

          ui設計分享達人

          一個優秀的設計不僅要解決正確的問題,同時也是給用戶創造積極的情感。在過去,實體產品可以通過人類的五感來創造情感體驗,但對于如今的數字化產品來說,這似乎很難達到,因為只是在屏幕上進行枯燥的交互來獲取服務。


          所以,數字化產品設計師們需要更深入的理解每種類型的情感,以及創造它們的心理學原則。


          根據唐.諾曼(Don Norman)的研究,人們對一個物體產生情感有三個層次:本能、行為和反思。


          undefined

          • 本能層: “用戶想要的感覺是什么”

          • 行為層: “用戶想要做什么”

          • 反思層: “用戶想成為什么樣的人”


          在第一層,用戶將通過視覺和與產品的交互設計中產生情緒。因此,這是UI設計師擅長發揮的地方。除了美學和基本的平面設計原則外,下面是我在工作中經常應用到設計中的心理學原則。


          格式塔原理


          相似律

          人類的眼睛傾向于將相似的元素連接成一個組,而大腦會認為這些元素都有相同的目的。 


          undefined


          因此,在設計具有相同功能和內容的界面元素時,就應該要保持一致性。(彩云注:這也是為什么要保持一致性的理論解釋)


          應用場景: 導航、控件、卡片、banner、內容、分頁


          連續律

          人眼會將連續的元素視為一組。這一定律與對稱性和相似性非常相關,通過在一個序列上設計相似和重復的元素,我們可以將用戶的視線引導到我們想要的方向,它能使得閱讀信息更加連貫和清晰。

           

          undefined


          一點點的切割是在暗示用戶,這里還有更多的內容等待你去查看。


          應用場景: 菜單、列表、排序、輪播、服務進度


          封閉律

          當看到一幅不完整的圖像時,大腦會依賴之前的經驗進行填充。 


          undefined


          這是圖形和logo設計中常用的規則,但是在產品設計中,我們也經常把它用在圖標和Loading設計中。


          應用: 圖標、loading、數據可視化


          相近律

          這是UI設計中的一個基本規則,因為人眼會將任何相鄰元素視為一個組。 


          undefined


          在設計的時候,我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內容組,然后使用小空間來分隔大內容組中的小內容組。


          應用場景: 導航、控件、卡片、banner、內容、分頁


          對稱律

          我們的大腦喜歡看到對稱和平衡的東西。它是所有設計領域中使用最頻繁、最安全的法則。它幫助我們創造一種穩定和秩序的感覺。 


          undefined


          當設計需要簡單和諧可視化的產品時,我經常使用對稱律。當用戶需要關注重要的事情時,它也能讓他們感到更舒服。缺點是,如果過度使用,產品會變得乏味和單調。通常,我用標題或CTA按鈕來更好地強調和號召行動,打破畫面的單調格局。(彩云注:CTA是call to action的縮寫,中文通常翻譯為行為號召??梢岳斫鉃橐龑в脩酎c擊的行為都算是行為號召)


          應用場景:控件,banner,強調內容,產品顯示,清單,導航。


          背景分割

          這個定律是關于人眼傾向于注意脫離背景或組合的事物。 


          undefined


          我使用這個規則引導用戶的眼睛看到重要信息。它通常是一個卡片設計與一個輕投影在背景之上的層。此外,構建整體也是應用這一規則的一種方式。


          應用場景:卡片、內容、列表、服務、摘要


          共同命運法則

          在同一方向上移動的元素被認為比固定的元素或在另一個方向上移動的元素更相關。這個規則應用幫助我們建立組和狀態之間的關系。 


          undefined


          在制作動畫時,我經常更明確地使用這個規則。然而,我們仍然可以適用于許多不同的因素。


          應用場景:導航/下拉菜單,折疊,手風琴,工具提示,產品滑塊,視差滾動和指示器。


          2. 焦點原則


          當我們看東西時,我們的眼睛傾向于首先關注最突出的元素。理解這種行為將幫助我們在設計中創建一個“錨點”,從而推動用戶查看我們的場景之后的內容。


          undefined

          應用場景:內容、落地頁、價格、產品頁、banner 


          3. 雷斯多夫效應


          (彩云注:維基百科解釋為指個人對學習材料或所見所聞的資訊,容易記住最特殊的部分的現象。例如:有一些參考書將重要的資料,以不同顏色或特殊的字體標示出來,就是利用雷斯多夫效應來加深讀者的印象。)


          這也被稱為隔離效應,它表明人們傾向于注意并記住與其他部分不同的部分。這條規則很容易與焦點定律混淆。不同的是,應用此規則的元素通常是獨立的,沒有為用戶導航更多信息的額外功能。 


          undefined

          應用場景:定價表、促銷banner、不同會員介紹 


          4. 本能反應


          基于現實世界打造的視覺體驗。比如,當我們看一個視頻,每個高潮笑話時都有旁白跟著一起笑時,我們會更容易發笑(彩云注:想想《快樂大本營》)。用戶會喜歡我們的設計,如果它讓他們感覺良好和舒適。


          (彩云注:這個理論的意思是說盡可能讓用戶產生沉浸感,把產品用到真實的環境上,比如大家平時使用的手機樣機,把設計的界面放到這些樣機中就能夠給人直觀的感受到應用后的效果,也是這個理論的運用)。 


          undefined

          應用場景:產品配圖、插圖、攝影 


          5. 色彩心理學


          有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學海報就足夠了(彩云注:感興趣的可以自行翻譯研究下)。


          undefined


          此外,我們不要忘記從早期到現在一直在廣泛使用的顏色,這些顏色的使用更符合用戶習慣:

          紅色:錯誤

          綠色:成功

          藍色:進行中

          黃色:警告


          6. 形狀心理學


          undefined


          就像顏色一樣,人類的潛意識對不同的形狀也有不同的反應。例如:

          圓形、橢圓形:傳遞積極的信息,通常與社區或關系有關。

          方形和三角形:帶有強烈的信息,通常與力量和穩定聯系在一起。

          豎線:代表強度、力量或攻擊性。

          橫線:表示平靜、相等、安靜。


          7. 雙碼理論


          這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外,人類是視覺動物,我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設計的有效性,我們不應該去掉解釋性的文字。


          (彩云注:根據這個理論,在做作品集時,就應該盡可能的多用視覺化語言,文字作為輔助,對于視覺設計師來說,能用圖表達的就盡量減少文字的比重。) 


          undefined


           一個很明顯的例子就是導航欄。大多數新的應用或具有復雜功能的應用都同時設計了圖標和文字標簽。 


          undefined



          8. 并行設計


          人類的眼睛傾向于看到平行因素比其他因素更相關。我經常使用這一原則對同一屏幕內的兩組不同內容進行分類。最容易看到的例子可能是Facebook messenger界面,當帖子并排排列時,消息是平行的。 


          undefined


          9. 共同區域


          這一原則類似于格式塔原則中的相似定律,但它并不是完全相似。共同區域原則是通過我們使用分隔線、形狀或顏色的方式創建的。 


          undefined


          如果一個界面需要用戶滾動更多來查看內容,我們應該有一些方法來更清楚地劃分它,而不僅僅是使用間距。


          應用場景:列表清單、信息流

           

          10.掃描圖形


          根據NNGroup UXPin等組織或團體的各種研究,兩種最常用的掃描模式是“F”和“Z”。

          • F的使用最為廣泛,尤其是對于內容量大的網站。

          • Z用于不太注重文本的網站,通常強調在最后的號召行動。

          一旦我們理解了如何使用這些模式,我們就可以選擇布局并有效地安排元素來實現我們的設計目標。 


          總結


          第一印象是最令人難忘的,積極的體驗可以在用戶和產品之間創造持久的關系。如果能讓用戶在一開始就喜歡上我們的設計,就能為我們的產品創造了一個很好的優勢。

          (彩云注:這些都是非?;A的理論,但基礎的厚度才是決定后期發展高度,我現在越來越能體會到這一點了,也希望大家能重視并加強基礎的學習。) 

           藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:彩云Sky

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          淺談圖表編輯系統的構建

          ui設計分享達人

          undefined


          一、項目背景


          RayData作為一個系列的可視化工具,內容資產作為基礎的構成發揮著重要的作用,在日益更新迭代的過程中,會發現每條產品線對圖表組件的需求都很繁重,無法避免地重復開發。通過開發通用型組件可以一定程度的解決問題,但是存在靈活性差,組件庫維護困難等問題,而且內部產品圖表庫各自獨立,缺乏統一的設計語言。



          通過對類似競品的調研,發現圖表做為承載數據信息的組件,本身只是工具,它的使用體驗優劣還往往取決于業務需求、數據類型、圖表本身的視覺效果接受度等因素。而且圖表類型的豐富和靈活程度,使用的框架及響應時間,商業或免費和開源狀態也都是評判標準之一。

          無論是小而美的個人項目還是大數據可視交互管理系統,項目生命周期的前四分之三階段,進行的緩慢糾結,充斥著大量需求變更,新想法的臨時加入。當多個項目同時展開,圖表組件效果是否靈活多變、復用性的高低對制作人員生產力、客戶方耐力、項目最終達成時雙方的消耗力有極大考驗。



          通過對類似競品的調研,發現常見的可視化圖表庫都存在自身的局限性,體量大,功能冗余,更新緩慢。最終促成了我們從兩個維度入手,提煉關鍵詞,簡化并轉化成圖表庫系統的功能點。




          二、設計方案


          圖表存在很多分類方式,基于形狀命名、作者命名、抽象概念命名和數據結構命名等。

          為了更好的幫助使用者快速定位,我們簡化了圖表大分類,依據人對形狀輪廓最初的感知,調動直觀的感受來進行分類和命名。


          整個圖表庫的設計層包含顯性和隱性的兩種,顯性的規范面向用戶,隱性的規范面向開發。
          通過調研常見的工具類產品,結合對產品易用性的理解,我們把產品的顏色方案提出來單獨定義一個全局的顏色方案,以便一套配色貫穿整個項目使用,然后對通用的設置和個性化設置分開設計。



          可視化的組合來源有四種:視覺暗示、坐標系、標尺以及背景信息。
          其中視覺暗示是比較重要的組成,以直角坐標系結構為例,對大分類下的參數進行深入挖掘。




          1. 通用設置


           - 對圖表表現形式的考慮


          從設計的角度出發,我們希望賦予圖表樣式更多的可能性,開放高度自定義的調節參數。


           - 數據強調的表達


          通常用戶在初次瀏覽圖表時會把注意力放在圖形的差異化上,比如突出的顏色、突出的圖形,但并沒有及時將所有的數值聯系起來,之后才會進行比較,然后再看整體、分布和多變量關系。在顏色和屬性系統中單獨設置最大值、最小值的顏色和樣式,可以使得圖表展示信息的信息維度更高一層。



          2. 顏色配置方案

          數據可視化是基于物理世界反饋的信息,通過用各種視覺變量(例如圖形、顏色、維度)把數據進行編碼、再現的過程。
          色彩是數據可視化中濫用和忽視最嚴重的變量之一,也是所有視覺變量中最富于變化的一種。


           - 顏色方案的細粒度覆蓋


          信息圖表除圖形外感官最明顯的就是顏色,為了能夠達到圖表設計的高度自定義,色彩的搭配、自定義的程度,每個圖元都有對應的顏色設置。


           - 對圖表質感的考慮


          從設計的角度出發,嘗試在顏色系統中加入陰影、發光、全局陰影等結構,進一步還原設計的圖形處理習慣,豐富圖表的表達。


           - 預置顏色方案


          可視化項目的配色一般來源于實際需求和3D場景效果的搭配,通常是不能預判配色的。
          在這種情況下如果需要幫助項目的快速搭建,預置方案就要做到覆蓋面廣,適應性強,控制取色范圍,由此提出以下原則。




          3. 參數方案


           - 布局方式


          制定規范時候我們確定了默認的布局方式,綜合實際使用,以柱狀圖為例,寬度滑塊的最大對應100%寬度,圖形撐滿,更貼近使用者的直覺,另外考慮到多端融合,涉及到一些放大預覽的功能,默認選用百分比布局更合理。

           - 數據文本位置


          在實際配置圖表時候,圖形和文字的位置關系千變萬化,為了應對這種情況我們引入了文字基線位置和相對位置作為位置參照。使用中配合偏移量調節基本能覆蓋所有的情況。


           - 圖表代碼


          為了應對項目靈活配置的需求,我們把圖表編輯和Config參數結合,可視化控制生成的圖表Config參數,直接導出到項目使用。



          4. 交互適配優化


           - 不同終端hover交互效果


           - 不同終端預覽交互效果




          5. 動效規范


          除了勻速動畫,為了達成更自然的動態效果,引入緩入緩出速度曲線,同時為了達成更豐富的表達,增加了一條簡潔的回彈曲線

          undefined


          動效是圖表數據表達的一個重要構成,針對圖表的動效,通過總結圖元的運動方式,結合Material Design的一些處理方式,整理了一套圖表元素動效規范集合。

          undefined


          三、設計執行


          1. 編輯效果演示


          針對缺乏靜態數據等真實數據源,檢驗生成圖表的視覺效果的問題,我們為用戶提供了指定范圍隨機數生成功能,可以快速生成與應用項目數據相類似的效果。
          顏色配置方案能在同一項目中起到控制整個顏色風格的作用,可以快速應用到圖表上。

          2. 圖表自定義調節項



          圖表庫在項目中的應用

           藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:RayData實驗室

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          實戰經驗!如何做好網頁后臺的表單和表格設計?

          周周


          一個完整的后臺,由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成,下面跟大家分享后臺中的表格和表單的設計細節。

          當接到一個全新的網頁后臺項目時,首先確定設計風格,然后考慮這個后臺尺寸是做居中固定式,還是全屏響應式。全屏響應式的網頁設計,除非有規定,否則你可以選擇任意主流尺寸作為基尺寸來設計網頁。當然,不管選擇什么尺寸,都得基于做好一個后臺而開展工作。

          如何定義一個后臺是好的?領導說好,用戶說好,你自己也覺得好,那應該就是好的。大部分情況下產品已經定制好了每個功能模塊,UI上只需要對著原型加以美化,如果你是這樣做的,那么做出的東西一定會讓人覺得有問題但是又不知道問題在哪里,總是想讓你改。

          跟產品經理好好溝通,他們只是把功能模塊設計出來而已,并沒有設計這些模塊如何呈現,如何操作,如何結合,如何分類等等。交互上在后臺設計很重要,如果有專業的交互設計師,這些可以交給他們,畢竟,交互設計的收入比UI要高。然而在很多中小企業,產品原型直接給到設計是很常見的。當缺少專業的交互設計時,不要讓產品覺得我們只是按照他們的原型做美化,那跟美工有什么區別,不是看不起美工,美工的全程是美術設計工程師,很高大上的職稱,但是大家還是不太愿意這樣被稱呼吧,可能覺得頭銜套太大壓力會很大吧。事實上,UI本來就應該具備基本的交互技能。

          風格選定是很客觀的,需要經過產品經理/領導確認,如果他們很相信你的實力,你得說出足夠充分的理由,為什么要選擇這種風格,而并不只是看起來更高大上或只是個人喜歡。

          本人對后臺網頁設計的風格理解,大致可以分為三類:純白背景風,輕淡背景風,深色背景風。在后臺開始設計之前,你最好先選定其中一種風格,因為后面的所有元件的設計,都得基于這個風格來設計。剛剛好,在早些時間就已經發布了一個后臺的三種風格界面設計的作品,大家可以看出每個模塊的搭配和區分:

          純白背景風:線框/輕淡色(灰)背景(文字一般采用黑色)

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          輕淡背景風:純白色塊背景(文字一般采用黑色)

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          深色背景風:帶有透明度的純色背景(文字一般采用白色)

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          設計過程是很主觀的,所有設計參數都取決于設計師,但是要嚴格按照設計規范,并且讓所有設計看起來和用起來都是合適的。

          全屏響應式+輕淡色背景風是目前很主流的設計,也是很保守和安全的設計。對于輕淡色的HSB色值,可參考:H:0-360;S:0-5;B:90-97,當然沒有絕對大部分情況用的淺灰是最多的,如H0;S0;B93-95。

          以下將依據這個設計風格做例子展示。

          一個完整的后臺,由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成,我把這些稱為元件。這里主要分享的是構成后臺中的模塊和元件設計中的細節。下面重點跟大家分享表格和表單的設計。

          你應清楚的是

          為了避免在設計后臺時一個人在YY,請保持左跟產品溝通,右跟前端溝通,這點非常重要?;蛟S很多朋友在接到項目的時候不知道從何做起,會在網上尋找一些相關素材,然后會看到很多很炫的風格樣式,像是各種各樣的數據/圖形展示,各種各樣的統計曲線圖,還有各種各樣的展示動效,真想拖到自己要設計的后臺。

          如果合適當然可以,然而,很多情況下,統計分析一類的圖表設計,產品已經有很多現成套用的模板,你可以做的很炫,但前端不一定會按照UI效果圖來制作。從技術上來說,沒有前端實現不了的效果,你真的不必懷疑前端的實力。所以,保持設計跟前端的良好溝通,更能提高工作的質量和效率,并且,很多時候口頭/文字描述如何展示,是淡入淡出,還是彈出等等,前端是能理解的。通常地,做動效只是產品的一種展示,而并不是產品的本身,就當自己練手做動畫吧。

          簡潔又靈活的表格

          一個典型的表格(table)包含標題(表頭單元格th),內容(標準單元格td),通常都是一行行(tr)展示。設計時,應該將標題和內容區分,比如標題文字加粗/顏色加深/字號加大,或標題背景加深。因選擇淡灰背景風,一般用白色塊區分的原則,表格設計也盡量不使用線框,然而一行行的標準單元格如果都是白色的就不便于預覽,因此可以隔一行給背景設置比主背景更淡的背景。標題和內容一般有兩種對齊方式,居中對齊,居左對齊,整個站的列表只選擇一種對齊方式保持一致性。為了更簡潔顯示,我們還可以把每一列的間隔線去掉,但并不意味著間隔不存在。每一列的文字都不要貼邊,給前端標記間距(內間距padding)值,告訴前端鼠標點擊表頭單元格的空白地方仍然可以拖動該列的寬度,拖動寬度時保持每一列的最小寬度并且標題仍然完全展示。

          我們都遇到過這樣頭痛的問題,當列表字段太多,一屏無法完全展示,這時應該怎么做?給表格設計一個左右滑動的滾動條?如果內容真的太多并且已經確定,這也未嘗不是一種辦法,但是,重新設計過表格的字段或許會更好,這個時候應該跟產品好好溝通了。有以下方法:

          • 減少不必要的文字(如下圖中表頭的“全選”去掉)。
          • 縮略內容或者用…省略后面內容,鼠標經過出現更多內容(如時間可以縮略后面的時分,鼠標經過出現具體時間)。
          • 將不重要的列表隱藏,表頭右邊設計一個>>按鈕,點擊跳到隱藏的列表,點擊以后表頭左邊出現一個<<返回默認表格的狀態。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          因為每個列表的寬度是可以拖動的,我們不能決定其固定的寬度,但每一行的高度可以設置一個值,建議所有元件的高度、寬度、間距的數值參數都設置為偶數。

          如果列表的數據很多,一般都會設計page控件,但是也有一些列表會設計點擊加載更多,或者直接滑動滾動條加載更多。另外一種情況更常見,即設計固定高度的列表,一頁最多展示5/10/20…條數據,不管多少條,它的高度都是相對固定的。然而有時候數據太少只有一兩條,這個時候仍然要固定默認最多展示條數的高度,如圖:

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          那么問題來了,在響應式設計當中,可沒有什么參數是固定的值,一般都是用百分比來設置。因為默認顯示的數據條數在任何寬度的情況下仍然保持不變,因此當列表寬度縮小時,內容出現換行會增加高度而拉高整個列表的高度。值得注意的是,當其中一條數據的內容有出現換行而又有其他數據沒有出現換行的時候,每一行的高度都應該按出現換行的且最高的高度保持一致,并且內容仍然保持垂直居中顯示。另外,當前端做成這種響應式的列表時,一般不再讓鼠標拖動列的寬度了。

          同一組數據的不同寬度顯示

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當寬度拖到第三種情況,按鈕也出現了換行,那每一行的高度都應該按照這個高度保持一致,即使有一些數據只有一個按鈕/地址并沒有出現換行,如圖:

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當然,如果你不想讓內容出現換行,就可以用上面說的那三種方法來實現了。

          不要再說為什么別人做的表格那么高大上,明明自己做的效果圖還挺好看,為什么實現出來卻那么丑,當你了解這里面的各種參數和邏輯,并且很好的跟前端溝通,參照以上規則,不管再復雜的列表都可以做的得心應手并且得以實現。

          整齊并帶有交互功能的表單

          在后臺設計中,表單出現的頻率并不低于表格,甚至可以說幾乎所有類型的網頁都會出現。比如登錄注冊、信息錄入、搜索、選擇器等等。常見的表單有輸入框、普通按鈕、開關按鈕、單選框、復選框、下拉菜單。

          一個輸入框,通常有標簽名稱label、提示信息placeholder(輸入信息后提示文字消失)、初始值value(需手動刪除)。如果是必填表單,在適當位置(標簽的前后,輸入框后)加上紅色*號(或其他符號)。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          一些有字數規定的輸入框,可以增加一個剩余字段提示

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          事實上,在設計表單之前,我們就要先對表單的標簽進行優化,標簽字段盡可能的簡約。每個組的表單,標簽都必須是對齊的,輸入框/選擇框也應是對齊的。當這個組的表單的標簽字數較少并且較對應時,可以采用左對齊的方式,并且最長標簽的名稱離輸入框有margin值。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          另一種情況,也是更經常遇到的情況,當一組表單的標簽很多時,某些標簽字段不能更好的簡化,標簽的字段都不對應,這個時候可以采用右對齊的方式,這種方式更靈活。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當一組表單的標簽太多時,請跟產品溝通并對其進行分類。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          有些表單是有邏輯/順序的,比如地區的選擇、出生年月與生肖/星座的對應等等。例如,在選擇省份之前,市區是不可操作的,在UI上做灰度顯示不可操作。除了灰度代表不可操作,透明度也可以起到同樣作用,這種方式也可以運用在按鈕上。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          帶有識別功能的輸入框:

          當輸入有誤時,盡量避免彈出框提示,可以直接對輸入框設計不同的狀態顯示默認狀態、選中狀態、錯誤狀態、成功狀態。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          通過以上方式設計的一組信息錄入型的表單設計,如圖:

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          表單的設計可以單獨出一篇更詳細的文章,還有篩選/選擇器一類的表單,這里就不一一描述了。

          友好舒適的彈窗

          彈窗在后臺的出現頻率非常高,其強度一般分為三種,弱彈窗、強彈窗、重彈窗。字面上已經很好理解,輕彈窗,一般鼠標經過的時候即可出現而不用點擊,比如提示說明,顯示更多信息,鼠標移過后立即消失,它不會影響下一層(當前頁面內容)頁面的視覺效果和操作,因此這個彈窗通常會設計一個浮動帶有陰影效果的框。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          而強彈窗則是一個對話框,它暗示你必須對這個對話框進行操作后才可以離開,如確認信息、錯誤提示信息。而重彈窗更像是一個新的頁面,比如彈出的列表,詳情,表單等。這兩種彈窗通常是點擊某一個按鈕/經過某一個操作觸發的。這兩種彈窗一般會對下一層頁面的視覺做蒙版處理,比如加上一定透明的黑色/白色,給下一層頁面的內容做模糊濾鏡等等。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當然,這三種彈窗式可以結合的,針對不同場景使用不同的彈窗設計這點非常重要,這直接關系到用戶體驗效果。你是否可曾遇到過使用一款產品時,動不動就彈窗,并且需要去點某一個按鈕才可以關閉。

          任何一種場景在設計上都可以得以解決,什么情況下使用什么彈窗設計,或者有時候必須使用強彈窗,但是又不想讓用戶操作關閉,我們可以設計幾秒后自動關閉,或者點擊彈窗以外的區域直接關閉。

          彈窗還有兩種主要的表現形式,一種是頂部有關閉按鈕,另外一種是直接點擊確認按鈕或者讀秒關閉。在保持規范性的同時,盡量避免按鈕功能的重復,比如一個提示信息必須讓用戶點擊確認按鈕才可以關閉,那么就使用沒有頂部關閉按鈕的設計。對于重彈窗,一般都會采用頂部有關閉按鈕的設計。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          彈窗并不是后臺的專利,它在移動端更高頻率的出現,例如活動頁面的彈窗,趣味性就顯得更重要了。

          總結:

          這篇文章主要跟大家分享的是,當開始網頁后臺項目設計的時候,保持跟產品和前端的良好溝通。確定風格后開始設計,并分享了3個主要的點:

          • 制作靈活又簡潔的表格
          • 設計整齊并帶有交互功能的表單
          • 選擇友好舒適的彈窗

          后臺還有其他元件設計,歡迎大家共同探討。




          文章來源:優設網    推薦:程遠


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          超多案例!B 端后臺類產品的圖表設計思路及方法

          周周

          隨著大數據的興起,數據價值的不斷挖掘,圖表作為數據呈現與分析的有效手段,正扮演著越來越重要的角色。我們在進行 B 端平臺設計時也在思考:如何讓圖表清晰的傳達信息,同時帶來美觀的視覺感受。

          為了達到清晰傳達和視覺美觀的目標,我們結合實際項目,進行大量探索及思考,梳理總結了一套適用于 B 端后臺類產品的圖表設計思路及方法,涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          圖表視覺層級

          圖表能夠承載大量數據信息,同時視覺元素較多,如果只是憑借設計師的審美喜好進行視覺設計,沒有整體信息讀取考量,可能會導致重要信息未能凸顯,降低用戶讀取效率。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          為清晰傳達信息,進一步提升讀取效率,我們采用元素重要程度與視覺強度相綁定的方法。依據元素重要程度,將圖表元素分為三類,分別為“底層元素”、“中層元素”和“頂層元素”,并依據不同視覺強度分別設計三類元素。底層元素最弱,頂層元素最強。通過這種方法,梳理圖表元素的前后關系,能夠清晰把握元素視覺層次,保證信息傳遞效率。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          1. 底層元素設計

          在各類圖表中,我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺干擾,最大程度突出主圖形,底層元素全部使用淺灰色進行設計。我們發現,當元素與背景顏色的明度對比在 1.2:1 時,人眼較難看到元素;當對比度在 2.0:1 時,視覺強度過強,易吸引用戶注意力。通過元素視覺強度的調研及視覺嘗試,最終確定元素與背景對比度在 1.6:1 左右,視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀,只在需要查看時可以被發現。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          2. 中層元素設計

          中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素,是圖表中表達數據的關鍵元素。與底層元素相比,中層元素采用更低明度與更高飽和度的數據色來表現,使元素從頁面中凸顯出來,保證可讀性。同時在樣式上適當加入漸變、描邊等樣式,豐富視覺層次,帶來美觀的視覺感受。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          3. 頂層元素設計

          我們把頂層元素定義為圖表高亮信息,內容包括懸停樣式、懸停后的詳細數據說明等。在設計上為保證視覺樣式突出,使用深灰色、強調色等強對比度樣式,并輔以動畫、投影等手法保證明顯的視覺強調效果,保證頂層信息最有效的傳達給用戶。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          4. 最終效果

          通過層級梳理,并綁定元素重要程度和視覺強度的方法,設計后圖表主次信息均按重要程度進行對應視覺強度的展示,讓用戶能夠在第一時間接收到最重要的信息,提升信息讀取效率。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          圖表排版設計

          圖表排版是指各元素在圖表中的尺寸及布局等,對于 B 端后臺類產品來說,不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規范保證用戶的使用體驗?我們經過大量討論推敲,梳理出一套針對 B 端后臺類產品的排版規則,力求保證用戶圖表的使用體驗。

          1. 圖表尺寸

          圖表尺寸指圖表整體長寬高。在項目中我們發現不同尺寸的圖表對數據展現效果影響巨大,例如巨量數據的圖表擠在名片大小的區域例顯示,這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環視”、“詳情分析”三類典型場景,并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸,針對不同尺寸優化圖表的信息展示密度,以達到高效讀取信息的目的。

          “迷你圖”尺寸最小,舍棄了 Y 軸等不必要信息,利用小面積展示最關鍵的圖表信息,并控制數據密度,保證信息高效讀取。

          “中號圖表”尺寸受限,限制坐標軸刻度數量和數據的密度,例如曲線圖數據點不高于每 4 像素 1 個數據點,Y 軸坐標刻度不超過 5 個,以確保信息密度不過載,這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。

          “大號圖表”尺寸最大,不限制數據信息密度,給予最全最詳細的展示,這類尺寸通常用在數據詳情頁等詳細分析場景中。

          最后考慮到多圖表混合排列時,餅圖、地圖等大面積填色圖表,相較折線圖等描邊型圖表,視覺感受更加膨脹。我們縮小了填色類圖表的實際高度,保證多種圖表混合排列時,視覺感受的均衡。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          超多案例!B 端后臺類產品的圖表設計思路及方法

          2. 坐標軸

          坐標軸在圖表中出現的頻率較高,那么坐標軸常見的設計問題有哪些呢?

          第一是橫縱坐標軸的刻度出現過密情況。

          如果坐標軸所承載的是連續數據(連續數據指可量化的,連續不斷的,在區間內可任意取值的數據,如時間、金額、人數等),設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據(離散數據指不可量化的,無關聯的,不可在區間內任意取值的數據,如分類、軟件版本、省份等),可采取增加坐標軸縮放功能解決。

          第二個常見問題是刻度的說明文字過長。

          如果是 X 軸(橫軸)文字過長,除了在可控范圍內減少刻度,還可采取文字傾斜 45°~90°的辦法(如文字全部為中文,可用豎排代替傾斜 90°),緩解信息過密看不清的情況。

          如果是 Y 軸(縱軸)文字過長,需聯合研發一起調整數據的單位,比如把“元”調整為“百萬元”。

          如果不能調整,那就要根據所使用的圖表庫有針對性調整。例如常用的 Echarts 圖表、D3 圖表等開源圖表庫,需要提前預估刻度文字長度并預留出來,否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是 AntV 等可自適應的圖表庫,則不必提前處理,圖表庫會自動按刻度長度進行整體調整。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          3. 圖例

          圖例作為圖表中不可或缺的部分,在各類圖表庫中位置不盡相同,由于不同圖表樣式差異很大,圖例的位置需整體考慮并適當布局擺放,但在同一產品或頁面內,過于隨意的擺放圖例,會導致頁面統一性較差,同時增加用戶的瀏覽成本。我們團隊所負責的 B 端商業產品矩陣,作為面向用戶的產品集合,產品間聯系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題,我們基于業務特點,針對 B 端商業產品矩陣制定了圖例布局指導原則。

          我們以提升屏幕信息密度為目標,分析不同場景的頁面排布,制定了頂部和右側兩種較為寬松的指導原則,供設計師在沒有明確的更優方案時選用。

          當圖表是左右兩端對齊的類型,例如折線圖、柱狀圖時,建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統一排布,減少占用空間。當圖表本身左右都有空余空間時,例如餅圖,建議將圖例放置于圖表的右側。也能夠節省頁面的空間。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          數據色板設計

          色板作為常見的數據表達手段,能夠利用不同顏色明確體現分類信息、數值高度、狀態信息等。但目前市面上鮮有專業用途圖表的配色工具。我們經過大量探索嘗試,梳理總結出圖表色彩的兩個關鍵維度:辨識度與統一性。既需要顏色間突出強烈可清晰辨別,又需要顏色整體能形成統一風格,以達到清晰傳遞和美觀的目標。如何平衡辨識度與統一性,是我們遇到的難題。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          1. 辨識度

          辨識度在圖表中有兩方面:顏色與頁面底色的辨識度,各顏色之間的辨識度。對于第一種,我們采用控制顏色的明亮程度來確保色彩辨識度,尤其對于黃色、青色等本身較亮的顏色,降低顏色的明度,確保在淺色背景下顏色可辨識。

          對于第二種也就是各顏色之間的辨識度,通過實驗發現單純的顏色色相變化,例如紅色與橙色的區分,人眼不容易分辨。所以采用了色相變化+明度變化的方法,即深紅色與亮橙色,深藍色與亮紫色等,這樣用戶能在第一眼就明確分辨,保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標中,運用歐幾里得距離公式測算顏色間的距離長短,來衡量各顏色間色差數值。顏色間距離越遠代表色差越大,利用數據輔助衡量辨識效果。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          2. 統一性

          色彩統一性的作用在于確保圖表整體風格一致,色彩搭配舒適,從而帶來美觀、統一的視覺感受。為達目的,我們首先提煉商業產品設計風格為明亮、強對比,其次把設計風格轉化為色彩數值。經過實驗,把顏色明度限制在 50%-70%,把飽和度限制在 75%-85%,并在區間內不斷波動。這樣既保證了色彩視覺感受的統一,各顏色間又能夠有清晰的辨識度。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          3. 顏色量化與工具

          量化顏色,將色彩轉化為數值,利用數值來驗證設計師的「感覺」,能夠保證方案合理性,保證設計質量。但通過嘗試,我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料,我們最終決定以小眾的 HCL 色彩模式來衡量色彩。其中 H 表示色相、C 表示飽和度、L 表示明度。HCL 區別于傳統的 RGB 或 HSB 模式,它能夠將人眼對顏色的感知精確的量化為數值,例如黃色相比藍色明度更高,都能如實的反饋到數值上。也由于此特性,HCL 模式在誕生距今不到 20 年間,已被一些先鋒設計師用于數據可視化的呈現中。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          但是 HCL 作為小眾色彩模式,目前設計軟件鮮有支持,造成了 HCL 色彩不直觀、不方便調色等的問題。為解決此問題,我們已初步完成智能配色程序,只需輸入品牌色,就能自動生成圖表色版,并在風格上與品牌色匹配,達到整體色彩的統一。我們也將一套調配好的色板及 HCL 實用小工具附在文末,幫助大家直觀的查看和使用 HCL 模式顏色。

          結語

          數據價值就像不為人知的寶藏,隱藏在一條條枯燥晦澀的數據背后。而圖表則是開啟寶藏的鑰匙,是發掘數據價值的強有力武器。通過對圖表的不斷探索優化,我們希望能夠最大化數據的價值。通過圖表,讓數據最直觀的展現;通過圖表,讓其背后的規律浮出水面被人探知;通過圖表,讓 B 端不再有難懂的數據。

          附:色板及 HCL 工具

          超多案例!B 端后臺類產品的圖表設計思路及方法


          文章來源:優設網    作者:百度MEUX


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          數據可視化設計必修課(一):圖表篇

          周周


          圖表是數據可視化中最常用的一種表現形式,一定要吃透它。

          隨著互聯網數字化越來越完善,數據可視化這個詞的使用頻率也越來越高,而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是后臺設計,都離不開圖表的使用。然而關于圖表類相關的資料太零碎了,不成體系,對于初學者非常不友好,本篇文章我從圖表的祖輩開始,把它都給挖了出來,希望對你有幫助。

          什么是圖表

          圖表的定義:可直觀展示統計信息的屬性,對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構,是一種很好的將對象屬性數據直觀、形象地可視化的手段。

          英文叫法:Chart。

          用戶對圖形的敏感程度遠遠大于文字,所以產品就需要把數據信息可視化,用簡單的圖形表示出更多的信息量,而圖表是數據可視化中最常用的表現形式。

          接下來我們來介紹圖表的具體構成及元素解析。

          圖表的構成

          圖表是由:標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成,每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內容即可。

          數據可視化設計必修課(一):圖表篇

          圖表元素解析

          1. 標題

          顧名思義,標題就是圖表的名字,標題是必不可少的元素。標題的內容一定要言簡意賅,不要太長,能兩個字寫清楚絕對不用三個字。

          標題的常用位置有 3 個:左上角、頂部居中、底部居中。

          數據可視化設計必修課(一):圖表篇

          一般情況下,標題字號 / 色值要突出一些,用戶第一眼看到 chart 的時候,要清晰的看到這個圖表是做什么的。

          特殊情況下,如果需要對標題有額外解釋的話,兩種展現形式:

          • 增加提示圖標;
          • 增加提示語。

          數據可視化設計必修課(一):圖表篇

          2. 圖例

          圖例的組成

          顏色、名稱、數值、單位。

          數據可視化設計必修課(一):圖表篇

          圖例的展現形式

          圓形、開關、矩形、鼓包線、實線、虛線。

          數據可視化設計必修課(一):圖表篇

          圖例的位置

          從左至右、從上至下。

          數據可視化設計必修課(一):圖表篇

          圖例的作用

          • 標識出每個顏色所代表的的類別;
          • 開啟 / 隱藏數據顯示;
          • 圖例顯示的數值一般為當前值。

          圖例的顏色選擇

          同一組圖例中,不要出現相近的顏色,否則在圖表顯示中分不清彼此。

          數據可視化設計必修課(一):圖表篇

          產品使用中,要規范圖例顏色使用,一般分為兩種:

          • 常用的圖例顏色(顏色本身代表著行業中的某種含義),此類顏色需要是固定色值,無論哪個 chart 中,都是這個顏色;
          • 無特殊含義的圖例,可以規范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色,圖例整齊劃一。

          圖例過多時如何展示

          • 如果圖例可整合前提下,展示主要圖例 / top n 圖例,其他的圖例做整合,增加個詳情頁來展示完整的;
          • 如果圖例不可整合/省略,則需要給出足夠的展示空間。

          共用圖例

          如果多個 chart 的圖例一樣,可進行合并,減少冗余圖例。

          數據可視化設計必修課(一):圖表篇

          圖例省略

          如果 chart 中只有一個圖例的話,可省略。

          數據可視化設計必修課(一):圖表篇

          圖例名稱限制

          根據不同使用場景,為了更好的展示效果,要給圖例名稱設置一個最大值,超過最大值后省略展示。

          數據可視化設計必修課(一):圖表篇

          3. 坐標軸

          坐標軸分為 X 軸和 Y 軸,常規情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。

          數據可視化設計必修課(一):圖表篇

          刻度值代表的意義

          • 時間點:12:00;
          • 時間段:周一、周二。

          數據可視化設計必修課(一):圖表篇

          坐標軸使用規則

          是否帶單位:

          • 如果刻度值的含義明確的情況下,可以不用帶單位,比如:2018、2019、2020…;
          • 如果刻度值含義有歧義的情況下,必須加上單位(具體是統一一個位置加單位,還是每個刻度值上加單位,則需要根據場景來判斷)。

          數據可視化設計必修課(一):圖表篇

          對齊方式(常用,但非必須):

          • X 軸:居中對齊;
          • Y 軸:右對齊。

          數據可視化設計必修課(一):圖表篇

          刻度值過多時如何顯示:

          • 可選擇規律性省略刻度名稱;
          • 傾斜文字以顯示更多的文案。

          數據可視化設計必修課(一):圖表篇

          刻度值的選用一定要是同一個規律,禁止同距離的刻度值代表不同數據。

          刻度點的樣式使用規則:

          刻度的線朝外。

          數據可視化設計必修課(一):圖表篇

          4. 數據展示

          數據的展示是 chart 中最為明顯的地方,可以說如果只顯示一個元素的話,就是他了。

          數據展示的使用規則:

          • 邊界要清晰,不可虛化;
          • 多個數據同時顯示的時候,要保證每個數據都能清晰的看到,可以采用透明度來保證所有數據的顯示。

          5. 網格線

          網格線的作用

          呼應坐標軸,美觀度。

          網格線的使用規則

          • 線的顏色要弱化,不要喧賓奪主;

          數據可視化設計必修課(一):圖表篇

          網格線使用實線居多,盡量不用虛線。

          使用場景

          橫、縱、橫縱結合、無網格線。

          數據可視化設計必修課(一):圖表篇

          6. 提示信息

          通常情況下,提示信息用來標識出 chart 中重要點的數據信息,需要注意的是:重要信息盡量簡化,信息量不要太大,言簡意賅就好。

          數據可視化設計必修課(一):圖表篇

          7. 水位線

          根據不同產品的使用場景,有的時候會用到閾值,當達到某個閾值后,就會觸發某種聯動。這個時候就需要有個水位線了,它起到警示的作用。

          形式有兩種,實線和虛線,顏色的選取則取決于產品的警告級別。

          水位線可以是一個,也可以是多個,視情況而定。

          8. 時間軸

          時間軸可以靈活地調節刻度值的上下限,從而更精確的看到自己想看的數據。

          時間軸的功能及限制沒有不是很復雜,所以就不過多解釋了,需要用的話就用。

          圖表使用建議

          1. 折線圖 line

          定義

          折線圖可以顯示隨時間(根據常用比例設置)而變化的連續數據,因此非常適用于顯示在相等時間間隔下數據的趨勢。折線圖是通過線條的波動來表示數據的波動,主要體現的是數據隨著時間的推移而變動的圖表。

          數據可視化設計必修課(一):圖表篇

          使用場景

          常用于觀察一段時間內數據波動的浮動變化,比如:一天內內存的使用情況。

          使用建議

          Y 軸刻度值選擇要合理,當前顯示的數據波動要最大化的顯示;

          數據可視化設計必修課(一):圖表篇

          重要節點可以單獨做重點標注;

          數據可視化設計必修課(一):圖表篇

          數據拐點要平滑,不要太鋒利。

          2. 面積圖 area

          定義

          面積圖和折線圖比較類似,區別在于面積圖把數據區域做了個面積劃分,讓數據的顯示更加清晰。

          數據可視化設計必修課(一):圖表篇

          使用場景

          面積圖展示盡量不要超過 3 個圖例,否則數據多的情況下,數據的展示會特別亂,影響觀看。

          使用建議

          面積區域要和折線的顏色用統一色系,不要換色系;

          數據可視化設計必修課(一):圖表篇

          面積區域一般要比折線顏色淺一些,這樣視覺上更加讓人舒適;

          數據可視化設計必修課(一):圖表篇

          如果多條數據情況下也用面積圖的話,面積區域盡量使用透明度,否則有的數據會被遮擋看不到。

          數據可視化設計必修課(一):圖表篇

          3. 柱狀圖 bar

           定義

          柱形圖,又稱長條圖、柱狀統計圖。用來比較兩個或以上的價值(不同時間或者不同條件),只有一個變量,通常利用于較小的數據集分析。

          數據可視化設計必修課(一):圖表篇

          使用場景

          • 柱狀圖分為橫向和縱向兩種展現形式;
          • 用于在同一維度下不同數據的對比,用柱狀圖更能清晰的對比出數據的差異化。

          使用建議

          柱狀圖的厚度不要是固定值,要做成自適應來應對不同尺寸的分辨率顯示;

          數據可視化設計必修課(一):圖表篇

          厚度與間距的對比要合理設計;

          數據可視化設計必修課(一):圖表篇

          可使用小圓角,千萬不要用大圓角,太丑了……

          數據可視化設計必修課(一):圖表篇

          如果想要強調某個柱子的話,可以進行顏色區分,但是柱子顏色不要超過 2 個(同一維度下);

          數據可視化設計必修課(一):圖表篇

          如果想要在柱子上顯示數值的話,使用建議(下面的順序為推薦順序):

          • hover 的時候出現數值;
          • 數值默認在柱子上顯示;
          • 數值在柱子頂部 / 右側顯示。

          4. 餅圖 pie

          定義

          餅圖僅排列在工作表的一列或一行中的數據,它是有一個總和數據,方面查看每個類別分別占總數據的百分比的一種圖表。

          數據可視化設計必修課(一):圖表篇

          使用場景

          • 常用于做總結、年度匯報等;
          • 所有數據相加必須是 100% 才可用。

          使用建議

          • 每個數據要使用單獨的顏色來表示,不要有相同顏色;
          • 餅圖中不能有負值;
          • 圖例數量沒有限制,但是如果遇到可以合并的圖例,可以進行合并;
          • 餅圖的開始點為 0/12 點位置。

          數據可視化設計必修課(一):圖表篇

          5. 環形圖

          定義

          環形圖是由兩個不同大小的圓疊在一起,切割中心部分得到的一種圖形。

          數據可視化設計必修課(一):圖表篇

          使用場景

          • 環形圖有一個獨有的特點,就是可以在中心圓的位置突出某一項指標的數值。
          • 它常用于做數據的監控,監控某一類指標是否正常。

          使用建議

          • 環形圖的開始點為 0/12 點位置;
          • 環的粗細要合理,不要太粗和太細;

          數據可視化設計必修課(一):圖表篇

          環形圖的兩個圓要從中心對齊。

          數據可視化設計必修課(一):圖表篇

          6. 堆疊面積圖

          定義

          堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。

          數據可視化設計必修課(一):圖表篇

          使用場景

          常用于不同資源中流量 / 容量的使用。

          使用建議

          • 不要有重復的顏色;
          • 盡可能的把數據量按大小的順序,由下至上的堆疊。

          7. 堆疊柱狀圖

          定義

          堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。

          數據可視化設計必修課(一):圖表篇

          使用場景

          常用于不同維度下相同幾個指標的展示。

          使用建議

          • 不要有重復的顏色;
          • 按重要等級由下至上排序。

          8. 非常用圖表

          上面介紹了常用的圖表的使用建議,但是圖表類型遠遠不止于此,還有很多非常用的圖表類型,這次我先給大家列出來,如果大家感興趣的話,我后面再寫一期冷門圖表的使用建議:

          雷達圖,散點圖,K 線圖,盒須圖,熱力圖,旭日圖,桑基圖,樹圖,漏斗圖,儀表盤。

          數據可視化設計必修課(一):圖表篇

          常用的圖表開源網站

          1. echartsecharts

          網站鏈接:https://echarts.apache.org/zh/index.html

          數據可視化設計必修課(一):圖表篇

          2. highcharts

          網站鏈接:https://www.highcharts.com.cn/

          數據可視化設計必修課(一):圖表篇

          3. antv

          網站鏈接:https://antv-g2.gitee.io/zh/examples/gallery

          數據可視化設計必修課(一):圖表篇

          總結

          Chart 是數據可視化必修課中最重要的模塊之一,不可忽略。只有了解每個 chart 的定義及使用場景,才能在產品中用到最合適的那一個。



          文章來源:優設網    作者:Luck gg


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          熱門的手機用戶輸入設計模式

          ui設計分享達人

          對于任何手機應用程序,如果沒有來自用戶的一些初始和正在進行的輸入,就不會發生任何事情。因此,手機產品設計師、開發人員和產品經理必須了解允許用戶這樣做的最佳方式。

          雖然手機應用程序以及使用它們的用戶通常是獨一無二的,但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。


          用戶輸入設計的6個目標


          在我們深入研究模式之前,了解用戶輸入設計的六個主要目標是很重要的:

          1. 選擇合適的輸入和資料登錄方法

          2. 減少輸入量

          3. 設計有吸引力的數據輸入屏幕

          4. 使用驗證檢查來減少輸入錯誤

          5. 設計所需的輸入文檔

          6. 制定有效的輸入控制


          模式的概述


          在記住以上設計目標的前提下,下面是我們在將本文中詳細介紹的設計模式的概述,在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:

          1.智能鍵盤
          2.默認值&自動完成
          3.立即沉浸(或“惰性注冊”)
          4.操作欄
          5.社交賬號登錄
          6.巨大按鈕
          7.滑動操作
          8.通知
          9.顯性控件
          10.可擴展輸入
          11.撤銷


          1.智能鍵盤


          Facebook記事本,Android聯系人


          問題
          用戶希望快速輸入信息。


          解決方案
          當用戶點擊應用程序中允許輸入信息的部分時,給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕,或者多走一步來訪問鍵盤。這不僅方便了用戶,而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段,這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。


          例如,在地址簿或撥號器中輸入電話號碼時,用戶不需要完整的鍵盤。當他們點擊這些字段時,數字小鍵盤就會彈出,而不是整個鍵盤,這樣就減少了不必要的按鈕,簡化了操作過程。類似地,點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤,其中“/”和“。com”按鈕顯示在空格鍵旁邊,而不是符號鍵后面。通過連接到系統提供的這些智能鍵盤類型,你的UI可以根據用戶當前嘗試的操作進行調整。


          2.默認值&自動完成

          Skype, Flightboard


          問題
          用戶希望快速完成操作。


          解決方案
          通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示,預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配,比如在谷歌Play Store搜索中,通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發生之前預測問題方面特別有用。例如,Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看,這是有意義的,因為他們不習慣定期輸入這些信息,但在這種情況下,這種匹配很重要,因為Skype是一個國際電話應用程序。


          另一種實現方法是保存用戶輸入的最后一項,并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如,Flightboard在搜索框下面列出了以前使用過的位置,以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式,在搜索方向時自動輸入用戶當前位置,為用戶節省幾次點擊,因為這是最常見的情況。


          3.立即沉浸(或“惰性注冊”)

          Wunderlist


          問題
          用戶希望在注冊之前先嘗試一下。


          解決方案
          越來越多的應用程序允許用戶在任何事情發生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。


          記住,他們一次只能做一件事,而且測試每個新產品的時間有限。隨著應用程序的日益專業化,在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情,而且會降低甚至是適合的訪問者的注冊率。在積極的方面,通過讓他們立即體驗你的產品,他們更有可能被吸引,因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好,因為它向用戶展示而非告訴他們應用程序如何工作。


          對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說,允許延遲注冊是沒有意義的,但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下,注冊會帶來一些額外的好處,比如在Wunderlist中進行跨設備同步,或者在Houzz中創建一本想法書,這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意,但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。


          4.操作欄

          Facebook Paper, Behance


          問題
          用戶希望快速訪問常用的操作。


          解決方案
          從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用,如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航,產生了更簡單的應用程序視圖,用戶可以專注于一級和二級操作,而不是二級導航。常見的操作有:在應用程序中搜索、共享和創建新內容。這個存留的菜單可以幫助用戶熟悉UI,還可以通過專注于與用戶相關的重要操作清除一些混亂。


          5.社交賬號登錄

          undefined

          Beats Music, Flipboard


          問題
          用戶需要一種更簡單的注冊和登錄方式。


          解決方案
          整合社交賬號登錄方法,允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合,同時,你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商,根據平臺和目標受眾的不同,你可以在你的應用程序中提供所有這些或其中之一,而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時,會自動填充數據), 同時,通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息,讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX,因此這種模式正在成為一種期望。


          6.巨大按鈕

          Tinder, Shazam


          問題
          用戶希望立即知道他們可以采取哪些操作。


          解決方案
          理想的觸屏點擊目標大小可能是72 px,但是一些應用程序,像Tinder,也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置,無論你在做什么,你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值,因為在這些應用程序中,用戶需要執行的操作非常有限,因此更有理由讓他們在各種情境中更容易地執行這些操作。例如,Shazam是用來看電視或聽音樂的,它實際上只做一件事。對于試圖在這種分心狀態下進行多任務處理的用戶來說,巨大的按鈕是一個巨大的改進。


          7.滑動操作

          Carousel


          問題
          用戶希望關注特定的內容。


          解決方案
          允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如,谷歌中的“卡片”現在可以在你不需要的時候被滑走,以清理雜物;類似地,Tinder中的配置文件可以向左或向右滑動,以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里,滑動手勢被用于一項操作,而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式,比如Carousel,它可以讓你通過將照片滑動到一邊來瀏覽多張照片,也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作,允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發現新菜單的方式來讓你發現新動作。向左滑動一個secret代表你喜歡它。


          8.通知

          LinkedIn, Facebook


          問題
          用戶希望了解他們應該瀏覽的新活動或操作。


          解決方案
          通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如,在標簽上放置一個計數徽章是由iOS推廣開來的,但現在這也可以在許多其他應用程序中看到,如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做,但它在時間軸圖標的頂部還有一個小點,以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點,當新聞推送中出現新條目時,它會彈出一個小窗口。


          9.顯性控件

          Secret


          問題
          用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。


          解決方案
          清理雜物,讓用戶只在需要時才發現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外,從而節省一些寶貴的空間。例如,Secret使用手勢而不是可視控件。向右滑動,就會出現一個動作菜單,這是我們前面介紹過的折疊模式的簡化版。在創建內容時,用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案,或者在使用圖片時,可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰,你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像,就會出現一個按鈕,用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。


          Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換,只要你選擇了你想要的乘車類型,就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式,每當我在做五件事的同時還想搭個便車,同時還要確保Uber不會用峰時價格來騙我的時候,它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。


          10.可擴展輸入

          YouTube


          問題
          用戶希望關注內容,而不是犧牲屏幕空間給控件。


          解決方案
          設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如,YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節省屏幕空間,當用戶點擊這個圖標時,它就會展開成一個搜索欄。


          11.撤銷

          Gmail, Chrome


          問題
          用戶希望在沒有中斷(例如:確認)的情況下快速地執行操作,但是可以選擇恢復意外操作。


          解決方案
          為用戶提供一個簡單的方法來撤銷他們的操作,而不只是要求他們事先確認。在某些情況下,某個操作可能會導致不方便或數據丟失,例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說,撤銷功能也很強大,他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續操作,就能更好地控制局面。在解釋將要發生的事情時,確認彈出窗口可能很有用,但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下,最好是讓開,同時提供一個安全網絡,以防出現錯誤。


          獲取用戶的輸入
          時刻記錄你應該從用戶那里獲得輸入的位置,他們是否曾經查看過這些輸入區域,他們使用這些輸入控件的頻率,他們從哪里來,又從哪里進入應用程序(即用戶流),等等。不斷地重新安排、重新排序、調整大小和調整這些控件,直到你獲得更多所需的操作。當然,當用戶能夠提供輸入時,要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。

          文章來源:站酷  作者:馬克筆設計留學

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          Web產品的適配設計選型

          ui設計分享達人

          開篇


          • 寬度單位我是用百分比還是px?還是rem?區別是什么?

          • 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素?瀏覽器窗口大小和設備大小和分辨率大小區是什么區別?

          • 什么是響應式網站,自適應又是什么?兩者有何區別和聯系?

          • 百分比寬度布局和流式布局和前者的關系是什么?

          • 既然響應式這么流行,為何淘寶、京東等沒有去做,而是單獨開發了一個移動端版?這里面有那些坑需要避開?



          歷史長廊


          在早期,硬件設備落后,網頁使用的是絕對靜態布局為主,絕對固定寬度的布局被稱為是靜態布局(StaticLayout),也有叫固定布局(Fixed Layout)。


          后隨時代變遷,技術發展。因瀏覽器的增多,開發者們忙于兼容各種瀏覽器。在這個期間,實際已經有了針對各設備適配的解決方案,只是未成為主流,這種新布局方式叫自適應布局(Adaptive Web Design,簡稱AWD)。

          在當時,大多指的就是寬度自適應布局。在這種新思想下,又出現了兩派的具體解決方案:百分比寬度布局和流體式布局(Fluid Layout)。


          在當時,大家都還沒有響應式布局的概念,但此時出現了一個新的詞--漸進增強。漸進增強出現后,另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子:gmail和qqmail。這兩個都是百分比寬度布局,都屬于自適應布局,但有區別。


          qqmail就是css hack的完美體現,你用任何一個瀏覽器,幾乎可以看到同一個樣子的郵箱,為的是用戶體驗統一。gmail則使用了漸進增強,你的瀏覽器越新越強,你看到的效果就越好,為的是用戶體驗增強。再后來,Google發布了Android,移動互聯網爆發,html5標準發布。


          互聯網大戰從PC打到了手機。手機雖然屏幕變小了,但是卻提供了更豐富的功能,用戶要求不斷提高,網站更加看重的是用戶體驗了,所以,谷歌式的漸進增強被廣泛認可,結合自適應的思想,出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。


          描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備。



          現如今,為何需要考慮多設備的兼顧呢,依然是因為時代發展與生活方式的變遷:

          • 即便是PC或Mac用戶,有查顯示只有一半的人會將瀏覽器全屏顯示,而剩下的一般人使用多大的瀏覽器,很難預知;

          • 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加,“主流設備”的概念正在消失;

          • 屏幕分辨率正飛速發展,同一張圖片在不同設備上看起來,大小可能天差地別。

            結合自身產品用戶訪問瀏覽器分辨率

          • 鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。

          因此我們需要在了解基本布局方式的特征下,選擇適合自身產品的布局實現方式。


          布局方式對比


          靜態式、自適應、流體式、響應式布局,A+R混合布局的特點對比如下


          靜態式布局:

          窗口縮小后內容被遮擋時,拖動滾動條顯示布局。不管在哪種設備,哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。



          自適應布局:

          用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。


          分別為不同的屏幕分辨率設備設計不同的樣式布局,相當于多個靜態布局組成的一個系列合集,每個靜態布局對應一個屏幕分辨率范圍,頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小,當可視窗口改變時,不會出現橫向滾動條,UI,圖片,文字會自動縮放,元素內容、布局、交互方式基本不變。



          彈性布局:

          以百分比作為頁面的基本單位,可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度,并能完美利用有效空間展現最佳效果。



          流體式布局:

          屬于自適應的一個子集,也是通過百分比自動適配設備屏幕分辨率和可視窗口大小,不同于百分比自適應的是隨著窗口大小的改變,頁面的布局會發生小的變化,可以進行適配調整,這個正好與自適應相補。



          響應式布局:

          如果從廣義上講,響應式布局實際上就是更好、更機智、更靈活的去實現自適應,他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性(如寬高)的變化。


          頁面的設計和開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和刪格、布局、圖片、css media query的使用等。


          狹義上講,響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。



          A+R混合模型布局

          R和A上的區別

          當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。


          他們之間主要的區別是DOM結構,當采用響應式思維開發時,HTML代碼在各種情況下都會一樣(除非你用JS移除某些DOM節點),而在自適應開發中我們可能會有不一樣的代碼結構和體驗。


          R采用流體+斷點,在斷點之間,頁面依然會隨窗口大小自動縮放(通過fluid grid),直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始(通常采用mobile first策略),所以舊的網站要做RWD很可能要完全重建。


          A只在針對幾種分辨率(如320,480,760,960,1200,1600px)進行優化,在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站(desktop version)而對于更小的分辨率做針對性的優化(適應),減小重構的成本。



          兩種設計思維都是有效的,需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計,例如通過自適應開發來構建定制化體驗。


          兩種方法各有利弊,但是如果同時使用它們到底會得到什么呢?A+R模型結合了基于單個主要臨界點的自適應和響應式方法。


          混合式布局就是為不同終端設備的屏幕分辨率定義布局(適配各種尺寸的PC、手機、穿戴設備等等),在每個布局中,頁面元素隨著窗口調整而自動適配,混合了百分比、像素為基本單位的組合方式??梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。



          自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低,但拓展性比較差;而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。


          很多時候,單一方式的布局響應無法滿足理想效果,需要結合多種組合方式,但原則上盡可能是保持簡單輕巧,而且同一斷點內(發生布局改變的臨界點稱之為斷點,后面內容會講到)保持統一邏輯。


          否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式,非等分的多欄結構布局則需要采用混合布局的實現方式。


          選型

          如何考慮實踐過程中的判斷呢。一是看應用場景,二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類?,F在的CSS框架基本都具備響應性。


          但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上,識別UA,渲染不同版本的模板,組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。

          當各個版本間的差異很大時,維護成本很可能會大到無法接受。即便分開做,架構上也要調整,后端服務化,應用層app化。


          根據不同公司的技術特點,調整的成本也難講是否可行。對于大型站,分開做更清晰,同時用響應式組件解決復用、功能同步的問題。總之,根據場景響應式可以從各種層面,各種粒度上做。這是現代web開發的特點。


          建議開發一套響應式電腦網站(過渡到平板端,不過渡到手機端)和開發一套響應式手機端網站(過渡到平板端以下的尺寸,不過渡到平板端)響應式布局有可能造成冗余的代碼較多,對研發的要求也更高,比如如何更好地讓圖片,適配,UI動畫自適應各種布局。


          大站還是要考慮數據計算和承載的問題,會對桌面和移動端輸出不同數據,減輕壓力。



          實踐與技巧

          首先,我們需要了解幾種分辨率的差別。


          ps:原生應用可查詢橫縱兩個方向的像素密度,通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率


          以一個SaaS類后臺產品為例,對于基本流量來自Web端網頁的產品而言,需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況,數據來源百度統計,如圖所示:



          如上所述,選擇適配方式時,設計目標為:區分web與pad端可共享的設計布局大于手機端,且產品規劃上web端為主流量來源,pad端屬于短期兼顧。考慮技術維護成本與開發成本的平衡,于是判斷需要選擇A+R模式來完成產品的跨端設計。


          自適應(A)方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點,根據全局統計信息定義,我們會得到一些相似處:

          • 左側的可視區代表整個屏幕小于960px時的具體布局和內容

          • 右側的可視區代表整個屏幕大于等于960px時的另一種布局



          在使用響應式(R)技術時,我們可以利用主要臨界點創建兩個互不相同的體驗情景,每種體驗里,我們都可以在可用空間內定義二級臨界點去調整布局。



          通過結合自適應和響應的方法,我們得到A+R模型。利用自適應技術,我們將致力于體驗和功能,作出兩種不同的情景設計。使用響應式組件,我們可以處理上下文內的UI組件和布局。



          這種設計方法要求設計師真正了解他們想要提供的體驗,以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的,你的產品將具有很強的靈活性,但同時也很復雜。


          因為你要處理不同的代碼庫和環境(非強制性),Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站,則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。


          其他輔助手段


          刪格

          柵格系統可以幫助我們設計,但卻不能保證我們的設計。它有多種可能的用途,并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言,這是一項十分有效的輔助手段。


          1. 列和槽(Columns and Gutters)列(Column)用于對齊內容。其中的槽(Gutter)是指相鄰列之間的空間,把控頁面留白,有助于分隔內容。



          2. 頁面邊距(Side Margins)頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值,這些值決定了每個屏幕尺寸的最小呼吸空間。



          3,用于組成柵格的列數稱為列結構。8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分,將內容排列在4-4-4或3-3-3-3大小的文本框中,也有部分設計系統采用來24列的形式,如Ant-D

          4,斷點是指屏幕尺寸的特定范圍,列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內,布局會根據可用的屏幕尺寸重新調整,以獲得最佳的布局視圖。


          如果較小的屏幕有足夠的可用空間容納內容,則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示,該列將垂直放置圖文內容。

          5,網格規則,列跟槽的寬度是以網格作為基本單位來做增減,所以應該先定義好柵格的原子單位,“網紅款”8點網格指的是設計頁面時,也應該遵循8點規律。值得注意的是,列跟槽的值盡量取8的倍數,但不是非得是8的倍數。


          產品中各類元素應該遵循這個倍數原則(圖標、組件大小等),不同的設計系統根據自身需求,設定這個規則。例如在Material Design中使用的是2X網格。

          6.流體柵格與混合刪格

          流體柵格有不同寬度的列,固定的槽和固定的邊距。流體柵格有靈活的內容寬度,根據屏幕大小變化在流體柵格中,列可以增長或收縮以適應可用空間。


          混合柵格既有不同的寬度,也有固定寬度。在現代布局中,一些元素超出了網格邊緣,與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。


          如果內容寬度大于可用的屏幕尺寸,那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格,以充分適應內容。

          結語


          設計需在技術方案前介入,根據你的產品特點,進行設計方案評估,可借助的手段有刪格,網格規則等,設計斷點規則時,需關注設備的常見系統分辨率。


          移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量,這些差別是可以通過響應式設計來解決的。事實上,你可以認為如果一種設計不能兼顧兩種平臺的主要差別,就不能算是合格的響應式設計。


          但是,如果確實想要處理好平臺間的所有差異,我們就回到了原點:進行兩種不同的設計或者使用A+R的模型,在尋求合適的過程中,關注技術的革新。


          A與B不是硬幣的正反面,它們為了解決同一個問題而生,是同一種思想的延伸。

          文章來源:站酷 作者:酷家樂

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合