طراحی را یادبگیرید از: Google – شاید قسمت اول

اگر با قانون KISS آشنا نیستید٬ پیشنهاد می‌کنم این مطلب را بخوانید.

به خودم و شما قول داده‌ام که مطالبی در باره‌ی نحوه‌ی طراحی رابط کاربری(UI) چند سایت مهم و مشهور بنویسم تا با دقت بیشتری به جزئیات طراحی ظاهری و برنامه‌نویسی بنگریم و بیشتر به آنها توجه کنیم. آن سایت هایی که دوست دارم درباره‌ی‌شان بنویسم گوگل٬ فیس‌بوک٬ دلیشس و GMail هستند و شاید سایت‌های دیگری هم به آنها اضافه شوند.

همچنین ضرب‌المثل معروف «لقمان را گفتند: ادب از که آموختی؟ گفت از بی‌ادبان» را در نظر می‌گیریم و نگاهی نو به طراحی‌های برخی سایت‌های مشهور ایران(دولت) خواهیم انداخت تا ادب را از بی‌ادبان بیاموزیم!

  1. آنچه ارزشمند است «وقت» شماست

    هنگامی که توسط گوگل در «وب» دنبال مطلبی می‌گردید٬ به احتمال زیاد فقط دنبال متن نمی‌گردید٬ نمایش چند نتیجه از تصاویر و فیلم‌ها شما را در رسیدن به نتیجه‌ی دلخواه کمک می‌کند.

    من خودم به شخصه ویژگی جدید جست‌وجوی تصاویر را امتحان نکرده‌ام اما کسی را دیدم که از این امکان استفاده می‌کرد. هر وقت صفحه را کاملاً به پایین اسکرول می‌کرد و عکس مورد نظرش را پیدا نمی‌کرد٬ گوگل به کمک Ajax صفحه‌ی بعدی نتایج را به انتهای سند اضافه می‌کرد.

    وقتی گوگل باز می‌شود اولین چیزی که می‌بینید کادر جست‌وجو و دکمه‌های جست‌وجو (المان‌های مهم‌تر) است. بقیه‌ی اجزای صفحه٬ پس از بارگیری کامل بخش مهم صفحه به صورت آژاکس باز می‌شوند.

    – در بالا و پایین نتایج جست‌وجو دو کادر و دکمه برای تغییر کلمات کلیدی هست. این ویژگی باعث می‌شود برای تغییر دادن کلمات کلیدی و گشتن دوباره٬ مجبور نشوید تا بالای صفحه اسکرول کنید. این ویژگی اهمیت خود را وقتی نشان می‌دهد که شما با صفحه‌ی دراز و کم عرض موبایل طرف هستید. اسکرول کردن به بالای صفحه 10-15 ثانیه از شما زمان می‌برد.

  2. گوگل یک موتور جست و جو است

    امکانات جدیدی که در حاشیه به آن اضافه می‌شوند٬ موتورجست‌وجو بودنش را خدشه‌دار نمی‌کنند. google UI copy2 وقتی وارد گوگل می‌شوید٬ پیش روی خود٬ در وسط صفحه آرم بزرگ شرکت و جعبه‌ی‌متن بزرگ با فونت درشت و دو دکمه‌ی Google Search و I’m Feeling Lucky را می‌بینید. رعایت این نکته‌ها باعث می‌شود چشمتان کاملاً روی وسط صفحه و بخش اصلی –جعبه‌ی متن– متمرکز شود.
  3. اندازه‌ها و هارمونی

    آرم بزرگ شرکت گوگل٬ فونت درشت جعبه‌ی متن جست‌وجو٬ فونت ریز Advanced Search و Language Settings و اندازه‌های اجزای دیگر سایت کاملاً متناسب بوده و هارمونی خوبی را پدید آورده اند. به شکل زیر دقت کنید. روی آن کلیک کنید و اندازه‌ی اصلیش را ببینید.

    تناسب اندازه ها و حاشیه ها در طراحی صفحه‌ی اول گوگل

  4. فقط آنچه که لازم است

    آنچه مورد نیاز است٬ در صفحه‌ی اول هست و آنچه کمتر مورد نیاز است در جا‌های دیگر و آنچه مورد نیاز نیست٬ طبیعتاً نیست. (مثلا اگر گوگل آدرس آی‌پی و نوع مرورگرتان یا آمار بازدید‌هایش را در صفحه‌ی اصلی نشان می‌داد چه فایده‌ای داشت؟)

  5. فشردگی

    کد‌های استفاده شده در صفحه فشرده شده اند. این امر به مصرف پهنای باند شما و از آن مهم‌تر مصرف پهنای باند سرورهای گوگل کمک خیلی زیادی می‌کند.

  6. نوار بالای صفحه

    google UI - نوار بالای صفحه

    پس از اضافه شدن GMail و گوگل ریدر و گوگل پیجز و… آنچه به صفحه اضافه شده نواری باریک در بالای صفحه است.
    اولین نکته‌ی مهم در طراحی این نوار این است که رنگ زمینه‌ی آن سفد است و حواس شما را زیاد پرت نمی‌کند و تنها با یک خط آبی از بقیه‌ی صفحه جدا شده.
    دومین نکته این است که هرآنچه در آنجا می‌بینید مربوط به حالت‌های مختلف جست‌وجو از جمله وب٬ تصاویر و فیلم‌ها است. تنها چیزی که خارج از پیوند‌های مربوط به موتور جست‌وجو می‌بینید Gmail و more هست.
    سومین نکته به خوبی مشخص بودن بخش جاری(در این عکس Web) است.
    چهارمین نکته فلش کنار more است. این فلش به شما می‌فهماند که با کلیک روی more صفحه تغییر مسیر نمی‌دهد و یک منو باز می‌شود.

  7. به این خاطر نوشتم شاید قسمت اول چون ممکن است این پست نیاز به یک پست مکمل داشته باشد. چه خودم بنویسم چه شما!

, , ,

  1. بیان دیدگاه

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s

%d وب‌نوشت‌نویس این را دوست دارند: