نقش قلم ها در طراحی صفحات وب

[shirin71]

نظر به اینکه در ایجاد و انتشار وب ساختار آن نیز مانند دیگرتکنولوژیهای آن به طور مداوم تغییر می کنند ، دو فونت معمول وجود دارند که در اینترنت از آنها به کرات استفاده می شود . اولین آن New Roman برای کامپیوترهای PC است که معادل آن Time بر روی سیستم های مکینتاش می باشد ، فونت دوم ، Arial برای کامپیوترهای PC و معادل باآن Helvetica بر روی سیستم های مکینتاش می باشد . تکنولوژیهایی نظیر داینامیک و فونتهای تعبیه شده و توکار برای ارائه سریع و انتخاب بهتر ظاهر می شوند .
به هر جهت این فونتهای معمول یک سایت زیبا و جذاب ایجاد می کنند و یک نمایش خوب را ارائه می دهند .
و اگر گاهی از آن استفاده کنید احتمالا متوجه خواهید شد که فونتهایی که به آنها نگاه می کنید از موقعیت خوبی برخوردار هستند . ممکن است به سایتی نگاه کنید که از فونت دیگری استفاده کرده که چشمان شما را به آسانی درگیر می کند زیرا در بسیاری از موارد از آن استفاده نمی شود .
● محدودیت ها :
یکی از محدودیت هایی که در استفاده از فونت وجود دارد این است که فونتهای انتخابی باید روی سیستم کاربر نصب گردند تا در مرورگر ترجمه شود و اگر کاربر آن فونت را در سیستم خود نداشته باشد، مرورگر آن را با فونت پیش فرض سیستم خود ترجمه می کند . برای PC ها فونت Times New Roman و Times برای مکینتاش . اگر قصد دارید که از فونت دیگری استفاده کنید، اصل فونت باید برای کاربران در دسترس باشد تا آنها بتوانند فونت را بارگذاری و سپس آن را بر روی سیستم خود نصب کنند و این کار باعث می شود که شما را به تجارب و سرمایه گذاری بر روی سایت خود مطمئن می کند .
● فن چاپ :
از آنجایی که فونتها از اجزاء لازم هر سایتی محسوب می شوند فونت و رنگی را انتخاب کنید که همراه با المانهای دیگر صفحه بایدبتواند جملات بدون کلام ایجاد کند . خواندن متون زیاد مانند چیزهای دیگری که می خوانید فشار زیادی وارد می کند و خسته کننده می باشد و باعث منحرف کردن توجه کاربر می شود. یک فونت انتخابی خوب می تواند در صفحه خوابیده شود و یا درخشش خود را برای کاربر تنظیم و ایجاد کند .
● Serifs
زواید آرایشی کوچکی وجود دارند که در انتهای هر کاراکتر اضافه می شوند که در شکل زیر وجود دارند . در فونت Serif
[بزرگ‌نمایی تصویر]

این زواید به توانایی خواندن شما با هدایت چشمهای کاربر در امتداد هر کاراکتر کمک می کند ولی به هر جهت خواندن این نوع قلم در سایزهای خیلی کوچک یا خیلی بزرگ ( کوچکتر از ۸ نقطه ) مشکل می باشد . با این نوع نمایش فونتهای Serif باید بیشتر در بدنه سایت جایگزین شود .
شکل ظاهری Serif ۴ نوع می باشد :
Old Style, Transitional, Modern, Slab Serif
▪ Sans Serifs (آرایشی ):
Sans Serif زوایدی که در انتهای هر کاراکتر در فونت Serif وجود دارد را ندارند . شکل زیر را مشاهده کنید:
در نمایش کاراکترها از این زوائدی که در انتهای هر کاراکتر وجود دارد کاسته می شود . فونت Sans serif باید کاراکتر به کاراکتر خوانده شود توصیه می کنیم که از این فونت برای متون با اندازه کوچکتر از ۸ نقطه و یا اندازه های خیلی بزرگ استفاده کنید . معمولا استفاده از این ۲ نوع فونت با یکدیگر در یک صفحه وب ترکیب خوبی را ایجاد می کند .
[بزرگ‌نمایی تصویر]

باید از مجموعه فونتهایی در سایت استفاده کنید که موافق هم باشند و در تناقض با یکدیگر نباشند . در یک صفحه وب می توانید از مجموعه ای از فونتهای مختلف استفاده کنید ولی باید بدانید که برای نمایش موضوعاتی که در سایت شبیه به هم هستند از فونت های شبیه بهم استفاده کنید. برای مثال تمامی متنهای Navigation باید دارای فونت شبیه به هم باشند و یا تمامی پاراگرافهای معمولی باید دارای فونت نظیر هم باشند ولی بعضی از متون می باشند که نیاز به این دارند که با فونت متفاوتی نسبت به بقیه اجزاء صفحه ظاهر شوند مثل اعداد و رویدادها...
از بکارگیری فونتهای بزرگ در صفحه پرهیز کنید چرا که باعث شلوغ شدن صفحه و ایجاد مشکل برای خواندن آن می شود . یک صفحه ایده آل ساختار ثابت و با استحکام دارد و برای کاربر دید و منظز خوبی ایجاد می کند . رنگ فونتها نیز باید مستحکم باشد و نیز کاربر بداند که آن متن چه چیزی را می خواهد به نمایش گذارد .
● سایز فونت
سایز فونت نرمال برای بیشتر مرورگرها ۳ می باشد و اندازه های دیگر با این مقدار فرضی اندازه گیری می شوند . برای مثال اگر بخواهید سایز فونت را به ۵ افزایش دهید کدی که برای آن به کار می برید بصورت فوق است :
< Font Size=۲ >
به جای استفاده از
< Font Size=۵ >
سایز فونت نرمال برای بیشتر مرورگرها ۳ می باشد و اندازه های دیگر با این مقدار فرضی اندازه گیری می شوند . برای مثال اگر بخواهید سایز فونت را به ۵ افزایش دهید کدی که برای آن به کار می برید بصورت فوق است :
● نوع صحیح True Type :
خیلی از فونتهای شناخته شده به عنوان نوع صحیح هستند به این معنی که آنها می توانند در هر سایز نقطه ای بدون کم شدن کیفیت کاراکترها ترجمه شوند . True Type یک تکنولوژی دیجیتال است که با کامپیوترهای Apple توسعه یافته است و امروزه هم با سیستم های Apple و هم با سیستم هایMicrosoft استفاده می شوند . Times new roman و Arial از نوع صحیح هستند .
بعضی از این فونتها مثل verdena و Georgia نسبتا بیشتر ظاهر می شوند و به زیبایی ترجمه می شوند و یک صفحه سنگین و پرمایه ایجاد می کنند .
● جلوگیری از اثرات بصری نامطلوب :
این فرآیند باعث جلوگیری از ناهمواری لبه های متن یا نوشته می شود . اغلب از تصاویر برای نمایش کاراکترها ، کلمات و جملات استفاده می شود . این فرآیند کناره های متن را بصورت هموار در می آورد . با تیره کردن خطوط بین متن و پیش زمینه ( پر کردن ناصافی های لبه های متن ) لبه های دندانه دار کنار فونت را از بین می برد . این گزینه بیشترین اثر خود را در تایپ متن با سایز های بزرگ ظاهر می کند. یکی از مضرات این فرآیند این است که مقداری رنگ را به تصویر یا نوشته اضافه می کند . مخصوصا در سایزهای بزرگ ممکن است برای بارگذاری مشکلاتی ایجاد گردد .
● خطوط افقی با طول زیاد :
برای آسانتر خواندن متن از ایجاد متن هایی با خطوط طولانی که در پنجره های مرورگر ایجاد می شود پرهیز کنید . خواندن بصورت خط به خط و هر بار بازگشت به سمت چپ صفحه در هر زمان (اگر خطوط داخلی طولانی باشد) کاری مشکل است . این نکته را متذکر می شویم که خطوط را بصورت پاراگراف ایجاد کنید و بیشتر از ۱۰ تا ۱۲ کلمه برای مرورگرهای معمولی را در یک پاراگراف قرار ندهید . اگر مجبورید که متون زیادی در صفحه داشته باشید دو قالب ستون برای آن ایجاد کنید .
● ملاحضات دیگر :
برای یافتن بهترین فونتی که خواسته های شما را به بهترین حالت بر آورد کند نیاز به تشخیص دامنه فونت و حدود عبارت برای تغییرات و دگرگونی آن دارید .
باید همه این تکنیکها و موارد را به بهترین صورت انجام دهید . توصیه های زیر می تواند در جلوگیری از اشتباهات معمول در هنگام توسعه یک سایت به شما کمک کند .
در نظر داشته باشید که تمامی فونتهای مجزا با هم یکی می شوند و نیز بدانید که چگونه فونتها به طراحی شما وابسته هستند .
هر فونتی به طور جدا گانه می تواند تمام منظورات ما را در یک زمان برطرف سازد .
طراحی المانهامثل ( سایز و فاصله خطوط و رنگ پیش زمینه و پس زمینه ، Margin )همه و همه می توانند در محاسبه و ایجاد یک نتیجه مطلوب کمک می کنند . متن فونتهای نسبتا بی اثر مثل Sansserif می تواند تنوع و دگرگونی عمیق در اشکال ساده میان ترکیبات گوناگون انجام دهد .
● فونتهای مرورگر Netscape
برای مرورگر Netscape در سایت www.bitstream.com اشکال کاراکترهایی که در صفحات کاربرد دارند وجود دارد و آنها در یک فایل فشرده (PFR) ذخیره شده اند .
PFR Portable Font Resource
می توانید فایل PFR را به عنوان یک مرجع برای صفحات HTML و اسناد Style sheet خود قرار دهید . وقتی که صفحه توسط مرورگری مشاهده شد که از این فایل پشتیبانی می کرد مرورگر فایل PFR را می خواند و کاراکترها را دوباره ایجاد می کند . PFR قادر است که کاراکترها را در اسناد اصلی برای همراهی اسناد در هر جایی به کار ببرد . فونتهای میکروسافت :
فونتهای وب اولیه میکروسافت Open Type نامیده می شوند سایت www.microsoft.com/hypography تلاش مشترکی بین میکروسافت و Adobe می باشد . ازنقطه نظر نگاه وب Open Type مانند Truedoc عمل می کند و کاراکترها را قادر می سازد که از میان اسناد در فرم متراکم شده ای عبور کنند .
Open Type پهنای ابتدائی دارد که True Type و Post Script نوع ۱ را به عنوان یک قالب منفرد در هم ادغام کرده است .
گر چه True Dec و Open Type تکنولوژیهای رقابتی با یکدیگرهستند ولی آنها قادر خواهند بود که با هم در یک کامپیوتر همجوار باشند و هر فونتی را در صفحه ظاهر کنند به شرط آنکه کاربران آن فونت را بر روی سیستم های خود Install کنند . این قالب این تعهد را ایجاد می کند که کاربرانی که از مرورگرهای مختلف استفاده می کنند همیشه هر دو این تکنولوژیها را حمایت کنند .
بعضی کاربران مرورگرهای قدیمی دارند . به عنوان یک طراح وب باید بتوانید بین تقاضای خود برای تناسب فونتها و نیاز به جلب بیشترین مخاطب ارتباطی برقرار سازید .
واین حقیقت کوشش بیشتر شما را برای ایجاد یک صفحه با منظر خوب ( مستقل از نوع مرورگری که این صفحات با آن دیده می شوند ) را می طلبد .
● فضای سفید :
هنگامی که در ابتدا صفحه ای بر روی مرورگر شما بار گذاری میشود ،علاوه بر آنکه در هر قسمت صفحه با مفاهیمی مواجه میشوید ،نتایج مندرجات محدودی را که به خوبی و با هماهنگی توزیع شده اند مشاهده می نمایید.
اولین حس شما از این نوشته ها چیست ؟ اگر شما بمانند خیلی از کاربران هستید صفحه ای با توزیع هماهنگ المانهاو مقداری فضای خالی (که در انجمن توسعه به عنوان فضای سفید معروف است) را ترجیح می دهید . توجه داشته باشید که کاربران به خاطر ایجاد صفحه ای با متنهای زیاد و شلوغ از شما قدردانی نخواهند کرد . آنها خیلی سریع صفحه شما را مرور می کنندو اگر صفحه شما اینچنین بود ممکن است اطلاعات زیادی را از دست بدهند . این نکته بدان معنی نیست که برای کاربران اطلاعات زیاد ایجاد نکنید بلکه به این مفهوم است که نباید همه این اطلاعات را در یک صفحه قرار دهید . هر صفحه وب باید حدودا ۵۰ درصد متن کمتری نسبت به یک صفحه مشابه چاپ شده آن داشته باشد .
هر صفحه باید برای ارائه اجمالی اطلاعات طراحی شود و باید اتصالاتی برای رسیدن کاربران به جزئیات بیشتر و عمیق تر ایجاد شود . همه کاربران یه یک مقدار اطلاعات نیاز دارند . به کاربر این اختیار را بدهید که خود انتخاب کند که آیا جزئیات رامی خواهد یا نه ؟
و نیز صفحه را به منظور کوتاه کردن آن قسمت نکنید . مگر آنکه شکستن آن منطقی باشد . هر صفحه باید مستقل بوده و وابستگی به جایی نداشته باشد .
بعضی از طراحان و انتشار دهندگان وب از جداول و عکسهای Gif برای اضافه کردن فضا به صفحه استفاده می کنند . بعد از محاسبه اینکه کاربران چه چیزی را نیاز دارند که بدانند می توانید صفحه آرایی خود را با استفاده از جداول و حاشیه ها HTML برای قرار دادن موفقیت سند و مندرجات صفحه در فضاهای خالی شروع کنید به عبارت دیگر جداول همه آن چیزهایی هستند که شما به آنها نیاز دارید .



استاد آن لاین