<-- IE錯誤修正 --> Checklist Design 網頁開發者必備參考手冊,助於學習更好的設計方式 - RiS社群 | FileMaker 跨平台企業應用



快速發表主題
返回   RiS社群 | FileMaker 跨平台企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2019-05-30
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Checklist Design 網頁開發者必備參考手冊,助於學習更好的設計方式

Click the image to open in full size.

身為網頁開發者總會不斷重複一些類似的情境,例如協助其他公司製作網站的價目表、購物車、新手上路、網誌、招聘、聯繫頁面等等功能,可能不同公司對於內容的細節要求略有差異,但整體來說主軸不會相差太遠。舉例來說,部落格頁面需要有文章標題、縮圖、作者、內容和分享按鈕,非必要項目則有相關文章、訂閱、發佈日期和留言功能,那麼有沒有檢查清單可以讓開發者參照呢?



本文要推薦的「Checklist Design」是提供給網頁設計或開發者的參考資料,網站的作者最初在一家協助澳洲科技新創團隊製作網站和產品的公司,雖然累積不少工作經驗,但總在開發時遭遇一些小問題,不得不回頭找出以前做過的專案,於是他決定把這些資料集合起來,以便為下次開發做足準備。

Checklist Design 收錄一些開發者會用到的頁面和元件,每個頁面依照需求列出必要和非必要(可選用)的項目,也可用來檢查自己手邊開發的項目是否有達到這些功能。頁面裡會有相關資源或範本可以連結參考,不過不一定適用於每個情境,還是得回歸客戶需求面,但 Checklist Design 能讓我們在建立開發特定功能頁面時有個參考依據,而不用去找其他網站做為範本。

網站名稱:Checklist Design
網站鏈結:https://www.checklist.design/

使用教學

STEP 1

打開 Checklist Design 網站後有兩大項目:頁面和元件,頁面就是我們經常會瀏覽的網頁,像是登入頁、價格頁面、404 頁面、新手說明、聯絡、註冊頁、購物車、問與答、網誌文章和招聘頁面等等,而元件部分則有按鈕、文字欄位、導覽、搜尋和表格等項目,更多的內容仍在持續更新。

Click the image to open in full size.

從上方選單也可快速找到你想要瀏覽的頁面或元件詳細資訊。

Click the image to open in full size.

STEP 2

點選進入任一種頁面類型,會看到需要顯示於頁面上的各個項目,大家比較熟悉的網誌文章就會有標題、縮圖、作者介紹、內容、社群分享按鈕等等部分,每個項目有更多詳細說明(和小提示),網頁右側則有其他相關資源,例如一些設計範本、參考文章和鏈結。

Click the image to open in full size.

另一個大家比較會用到的是「聯絡」頁面,在聯絡頁面中建議放入和個人或品牌一致的視覺效果和內容、明確的聯絡方式和社交媒體帳號,此外,如果你還想放入更多資訊,Checklist Design 也建議可以細分聯絡方式(例如不同的窗口),提供方便前往的路徑提示,像是放入 Google Maps。

Click the image to open in full size.

整體來說,Checklist Design 確實是一個相當好的網頁開發參考資料,除了在設計頁面時可以參照,也能回頭檢視自己的網站有沒有符合這些要件,是不是有其他能夠改進的部份。

Checklist Design 更像是一本標準化的手冊,對於設計師來說或許會很有幫助。

Click the image to open in full size.

值得一試的三個理由:
  1. 提供網頁設計和開發者的參考資料
  2. 依照不同頁面和元件類型列出必要和選用項目
  3. 除了設計時可以參照,亦可回頭檢視自己的網站有無符合
喜歡 Checklist Design 網頁開發者必備參考手冊,助於學習更好的設計方式 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 LinkedIn 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
Studio Design:創作者的Instagram!以「設計」為主的相片分享平台(iOS App) wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2013-10-14 09:47 AM
Open Web Design - 下載免費的網頁設計模板! wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2009-01-14 08:44 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 04:01 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2019,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝明易資訊有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2